表单格式

 

　　.form-group：表单组（label标签和输入框尽量使用这个类包围起来）

 

　　.form-control：给input，textarea和select元素都将被默认设置宽度属性为width:100%圆角边框

 

　　.form-inline：内联表单，是给form这个标签设置的，让里面的框变为值水平排列

 

　　.form-horizontal：水平排列的表单，通过为表单添加.form-horizontal类，并联合使用Bootstrap预置的栅格类，可以将label标签和控件组水平并排布局。这样做将改变.form-group的行为，使其表现为栅格系统中的行（row），因此就无需再额外添加.row了

 

　　.sr-only：它是主要给label来设置，将label隐藏起来

 

　　一个简单的登陆框

 

　　

 

　　<pclass="container">

 

　　<formaction="#"method="post"class="form-horizontal">

 

　　<pclass="form-group">

 

　　<labelfor="user"class="col-lg-2control-label">用户名</label>

 

　　<pclass="col-lg-10"><inputtype="text"name="user"id="user"value=""class="form-control"/></p>

 

　　</p>

 

　　<pclass="form-group">

 

　　<labelfor="pd"class="col-lg-2control-label">密码</label>

 

　　<pclass="col-lg-10"><inputtype="password"name="pd"id="pd"value=""class="form-control"/></p>

 

　　</p>

 

　　<pclass="form-groupcol-lg-5col-lg-offset-5">

 

　　<pclass="col-lg-5col-lg-offset-5"">

 

　　<inputtype="checkbox"name=""id="cx"value=""/>

 

　　<labelfor="cx">是否同意</label>

 

　　</p>

 

　　<pclass="col-lg-2col-lg-offset-5">

 

　　<buttontype="submit"class="btnbtn-success">提交</button>

 

　　</p>

 

　　</form>

 

　　</p>

 

　　这里的control-label是给label同步input的样式

 

　　字体图标

 

　　出于性能的考虑，所有图标都需要一个基类和对应每个图标的类。把下面的代码放在任何地方都可以正常使用。注意，为了设置正确的内补（padding），务必在图标和文本之间添加一个空格。具体字体图标，请访问Bootstrap中文网（https://v3.bootcss.com/components/）查询。

 

　　总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。




本文转载自中文网