Bootstrap样式之表单样式

表单
1. 基本表单

class=”form-control”：可以给<input>、<textarea>、<select>元素设置宽度为100%

示例代码：

<form action="" method="">

<label>用户名:</label>

<input type="text" class="form-control" />

</form>

之前我们写在文本框前面写用户名一直都是直接写字，在实际开发中一般用文本标签包起来例如 <label> <span> 标签

我们可以看到效果文本框的宽度占满了整行，下拉框的宽度也占满了整行

class=”form-group”：可以为<div>设置该属性。如果<div>中包含<label>和<input>表示为一组。层次会更清晰

示例代码：

<form action="" method="">

<div class="form-group">

<label>用户名:</label>

<input type="text" placeholder="请输入用户名" class="form-control" />

</div>

<div class="form-group">

<label>密码:</label>

<input type="text" class="form-control" />

</div>

</form>

这个页面效果可能不是很明显

内联表单：class=”form-inline”

什么是内联表单呢，就是让我们的所有表单元素都在一行

<form action="" method="">

<label>用户名:</label>

<input type="text" class="form-control" />

<select class="form-control">

<option value ="">北京</option>

</select>

</form>

刷新页面，我们可以看到效果，每一个元素都自动换行，总共占了四行。用内联表单我们再来看看

<form class="form-inline" action="" method="">

<label>用户名:</label>

<input type="text" />

<select >

<option value ="">北京</option>

</select>

</form>

现在都显示在一行

表单组合

class=”input-group”、class=”input-group-addon”

表单组合就是把几个元素组合在一起，我们一起来看一下代码:

<div class="form-group">

<label>工资:</label>

<input type="text" class="form-control" />

</div>

现在的效果就是工资后面跟着一个文本框，如果我们先想在文本框中的前面一部分来一个$美元符合。看一下怎么写:

<div class="form-group">

<label>工资:</label>

<div class="input-group">

<span class="input-group-addon">$</span>

<input type="text" class="form-control" />

</div>

首先我们需要把$美元符合和文本框组合在一起，所用用div把他们两个包括起来,给div设置属性:class=”input-group，表示把他们分为一组，给span设置属性:class=”input-group-addon”.这样就可以把他们组合在一起。刷新看一下效果，是不是漂亮多了

水平排列表单，设计到栅格

<form>

<div class="form-group">

<label >用户名:</label>

<input type="text" class="form-control" />

</div>

<div class="form-group">

<label>密码:</label>

<input type="password" class="form-control" />

</div>

</form>

现在这个表单的效果，每个元素占一行。假如现在我们需要让用户名和文本框一行

密码和密码框一行。这个时候我们可以使用水平排列表单

示例代码：

<div class="container">

<form class="form-horizontal">

<div class="form-group">

<label class="col-md-2 control-label" >用户名:</label>

<input class="col-md-10" type="text" class="form-control" />

</div>

<div class="form-group">

<label class=”col-md-2 control-label”>密码:</label>

<input class=”col-md-2 control-label” type="text" class="form-control" />

</div>

</form>

</div>

这段代码对比上面的代码在表单的外面多了div标签，在这里水平排列，需要给form表单设置属性：class=”form-horizontal” 表示水平。这个时候会出现一个效果，我们打的用户名，密码文本显示不全，前面会有一个文字显示不出来。所以就需要我们之前讲到的固体容器。来显示出文本。<div class="container">

现在就可以再配合栅格系统来设置每行的文本和文本框占用的格子数量了、

<div class="form-group">

<label class="col-md-2 control-label" >用户名:</label>

<input class="col-md-10" type="text" class="form-control" />

</div>

这段代码表示：用户名文本占2个格子，文本框占10个格子，同前面讲到的栅格

control-label这句属性设置文本靠近文本框

多选框

注意：这里的语法格式，需要把input标签放在label标签中，为啥要这样写？咱们接下来详聊。

我们平常写多选框：<input type="checkbox"/>吃饭。想要选中必须要点吃饭文本前面的方框框才可以。点文本是没有选中效果的。我们再看把标签放在label中的效果

<label>

<input type="checkbox"/>吃饭

</label>

哎，现在是不是点吃饭两个字也可以选中了。这就是为啥放在label中。

我们再来看一下Bootstrap中咋写:

<div class="checkbox">

<label>

<input type="checkbox"/>吃饭

</label>

</div>

<div class="checkbox">

<label>

<input type="checkbox"/>睡觉

</label>

</div>

<div class="checkbox">

<label>

<input type="checkbox"/>打豆豆

</label>

</div>

简单，至少在标签外面套了一层div，设置class属性为:checkbox。那么有什么效果呢？鼠标放上去是不是原来的鼠标箭头变成了小手。这就是效果。

现在每一个选项都加了div,选项竖着排列。如果我们现在想让多选框横着排列，来看看该咋写：

<label class="checkbox checkbox-inline">

<input type="checkbox" />吃饭

</label>

<label class="checkbox checkbox-inline">

<input type="checkbox" />睡觉

</label>

<label class="checkbox checkbox-inline">

<input type="checkbox" />打豆豆

</label>

我们只需要把div去掉，在label中直接写:class=”checkbox checkbox-inline”。这样就在一行了

禁选：

<label class="checkbox checkbox-inline disabled">

<input type="checkbox" disabled="disabled"/>吃饭

</label>

如果是单选按钮：

<div class="radio">

<label>

<input type="radio"/>男

</label>

<label>

<input type="radio"/>女

</label>

</div>

只需要把checkbox改成radio就OK

下拉列表

直接用class=”form-control”

<select class="form-control">

<option>湖南省</option>

<option>湖北省</option>

<option>山东省</option>

<option>山西省</option>

</select>

直接占满整行，顺便帮我们添加样式

控制尺寸(高度)

示例代码:

<input type="text" class="input-lg" />

<input type="text"/>

<input type="text" class="input-sm" />

控制高度有两种，lg最高，sm最低

控制尺寸(宽度)

有控制高的就有对应控制宽的，控制文本框宽也要用到栅格，很简单:

<input type="text" class="col-lg-10"/>表示文本框占10个格子

按钮
1. 可用作按钮使用的标签和元素

可以用作按钮使用的标签元素有很多，a标签、button标签本身就是按钮，input标签的button,submit这些都可以用class=”btn”来添加按钮样式

<a class="btn btn-warning">超链接按钮</a><br>

<button class="btn btn-success" type="button">button标签按钮</button><br>

<input class="btn btn-info" type="button" value="input标签的button按钮"/><br>

<input class="btn btn-danger" type="submit" value="input标签的submit按钮"/>

预定义样式

<button class="btn btn-default">button标签按钮</button>

<button class="btn btn-primary">button标签按钮</button>

<button class="btn btn-success">button标签按钮</button>

<button class="btn btn-info">button标签按钮</button>

<button class="btn btn-warning">button标签按钮</button>

<button class="btn btn-danger">button标签按钮</button>

<button class="btn btn-link">button标签按钮</button>

前面六种基本就是给按钮设置不同的背景色，第七种是把按钮的样式修改为超链接

尺寸

尺寸有五种，示例如下：

<button class="btn btn-success">button标签按钮</button>默认大小

<button class="btn btn-success btn-lg">button标签按钮</button>大按钮

<button class="btn btn-success btn-sm">button标签按钮</button>小按钮

<button class="btn btn-success btn-xs">button标签按钮</button>超小按钮

<button class="btn btn-success btn-block">button标签按钮</button>块级按钮

激活状态

<button class="btn btn-success active">button标签按钮</button>

设置按钮颜色为激活状态的颜色

禁用状态

<button class="btn btn-success disabled">button标签按钮</button>

设置按钮不可用

图片
1. 图片形状、响应式图片

图片形状有三种：

圆角矩形：<img class=”img-rounded”>

<img src="img/a.jpg" class="img-rounded" >

圆形/椭圆：<img class=”img-circle”>这个比较牛逼，会根据图片来决定是宽椭圆还是高椭圆。

<img src="img/a.jpg" class="img-circle" >

缩略图：<img class=”img-thumbnail”>

<img src="img/a.jpg" class="img-thumbnail" >

可是现在还有点瑕疵，我们缩小网页的时候图片好像不会跟着自动缩小，会被只显示一部分。这个时候就需要设置一下让图片根据网页缩小而自动缩小。我们叫做响应式图片

很简单：img-responsive

<img src="img/a.jpg" class="img-rounded img-responsive" >

<img src="img/a.jpg" class="img-circle img-responsive" >

<img src="img/a.jpg" class="img-thumbnail img-responsive" >

现在就舒服了。看看效果

辅助类
1. 情境文本颜色(文字颜色)

这个主要设置文字颜色，有六种颜色，分别：

<p class="text-muted">男儿事长征</p>

<p class="text-primary">少小幽燕客</p>

<p class="text-success">赌胜马蹄下</p>

<p class="text-info">由来轻七尺</p>

<p class="text-warning">杀人莫敢前</p>

<p class="text-danger">须如猬毛磔</p>

情境背景色(背景颜色)

背景颜色注意有五种

<p class="bg-info">黄云陇底白云飞</p>

<p class="bg-danger">未得报恩不得归</p>

<p class="bg-primary">辽东小妇年十五</p>

<p class="bg-warning">惯弹琵琶解歌舞</p>

<p class="bg-success">今为羌笛出塞声</p>

关闭按钮class=”close”

<span class="close">×</span>

×表示X

三角符号class=”caret”

<span class="caret"></span>

快速浮动class=”pull-right”,class=”pull-left”

<div style="width: 200px; height: 200px; background-color: yellow;" class="pull-right">

</div>

类似CSS样式中float的左浮动右浮动

响应式工具

当我们需要随着页面大小变化想要隐藏一些元素的时候可以用响应式工具来实现

可见：class=”visible-xs-*” *指的是block或者inline

<button class="btn-danger visible-sm">手机用户，点击有惊喜</button>

visible-sm：表示只有在页面变小才会显示这个按钮

<p class="bg-danger visible-lg-block">点击有惊喜</p>

block：表示显示整行背景

<p class="bg-danger visible-lg-inline">点击有惊喜</p>

inline:表示只在文本宽度显示背景色

隐藏：class=”hidden-xs”

<button class="btn-danger hidden-lg">手机用户，点击有惊喜</button>

hidden-lg：表示在大屏幕就隐藏

Bootstrap样式之表单样式相关推荐

还不错的Table样式和form表单样式
作为一个后台开发人员而言,拥有一套属于自己的前台样式是比较重要的,这里分享一下自己感觉还不错的样式,以后遇到好的,还会陆续添加上图: 带鼠标滑动效果的table样式看起来比较清爽样式 <he ...
1-17. Bootstrap 表单样式汇总
网站数据交互一般都是通过表单实现 Bootstrap中表单布局类型有哪些? 垂直表单内联表单水平表单向父 <form> 元素添加 role="form" 把标签和 ...
real——表单样式
<form class="real-form" action=""><div class="real-form-item" ...
用于设定表格样式的附加css,css设置表格与能表单样式.ppt
css设置表格与能表单样式第6章 CSS设置表格与表单样式学习目标什么是表格模型对数据表格应用样式. 创建简单和复杂的表单布局对各种表单元素应用样式. 掌握CSS中用列表制作各种菜单的方法. ...
基于Vue3，Element Plus的一款表单设计器，支持生成Element和Antd样式的表单
简介 FormMaking v3 是基于 Vue 3.x 和 Element Plus 开发的可视化/低代码表单设计器,可以生成 Element 和 Antd 样式的表单. FormMaking 目前 ...
精通CSS.DIV网页样式与布局（五） ——设置表格与表单样式
原文地址为: 精通CSS.DIV网页样式与布局(五) --设置表格与表单样式表格和表单是网页中非常重要的两个元素,我们这次来说说CSS如何设置表格和表单样式.我们先来看看CSS如何控制表格. 首先表 ...
css美化表格和表单样式
Css美化表格和表单样式表格创建默认是没有边框的,我们要用boder属性去设置表格的边框表格基本样式表格边框合并boder-collapse 在显示表格时,通常来说表格都是有边框的,边框的作用: ...
jquery表单样式
使用jquery做的表单样式,有隔行变色.点击换色.选中换色等等 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" &quo ...
java 表单_Java报表表单设计之表单样式设计
阅读提示: 文章中与FineReport软件使用的相关内容,基于软件的V7.0旧版本编写,不代表软件最新的使用方式. FineReport最新版免费试用:https://www.finereport. ...

Bootstrap样式之表单样式

Bootstrap样式之表单样式相关推荐

最新文章

热门文章