1.Bootstrap css2
1.在网页中显示代码的两种方式：
1 <!--独立的块元素和内联元素--> 2 <pre> 3 <p>这是一个独立的块</p> 4 </pre> 5 <code> 6 <p>这是一个内联元素</p> 7 </code>
2.表格
| table | 表格的基本样式 |
| thead | 表格标题 |
| tbody | 表格主体 |
| tr | 需要thead或者tbody作为父元素 |
| td | 单元格，需要tr作为父元素 |
| th | 特殊的单元格，使用在thead和tr之下 |
3.表单
1.基本样式的表单（垂直表单）
- 向父<form>添加role=“form”
- 向含有标签和控件的<div>中添加，class.form.group
- 向所有文本标签添加：class.form-control
1 <body><form role="form" > 2 <div class="form-group"> 3 <!--一个输入框--> 4 <input type="text" placeholder="请在这里输入您的用户名" class="form-control"> 5 <input type="text" placeholder="请在这里输入您的密码" class="form-control"> 6 </div> 7 <div class="form-group"> 8 <!--一个单选框--> 9 <input type="radio" name="sex" value="male" class="form-control">男<br> 10 <input type="radio" name="sex" value="female" class="form-control">女<br> 11 </div> 12 <div class="form-group"> 13 <!--一个提交按钮--> 14 <input type="submit" value="提交"> 15 </div> 16 17 </form> 18 19 20 21 </body>
2.显示内联样式的表单（如果要把标签和控件放在一行）
1 <!--在父<form>中添加form-inline--> 2 <body><form role="form" class="form-inline"> 3 <div class="form-group"> 4 <input type="text" placeholder="请在这里输入您的用户名" class="form-control"> 5 <input type="text" placeholder="请在这里输入您的密码" class="form-control"> 6 </div> 7 <div class="form-group"> 8 <input type="radio" name="sex" value="male" class="form-control">男<br> 9 <input type="radio" name="sex" value="female" class="form-control">女<br> 10 </div> 11 <div class="form-group"> 12 <input type="submit" value="提交"> 13 </div> 14 15 </form> 16 17 18 19 </body>
PS：默认情况下，Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时，您需要在表单控件上设置一个宽度。
3.水平表单
- <form>中设置除了role="form"外，还要设置class="form-horizontal"
- 第二步同上
- 类中添加.control.lable
1 <!--在form中添加class="form-horizontal"--> 2 <body><form role="form" class="form-horizontal" > 3 <div class="form-group"> 4 <!--class中"control-lable"--> 5 <input type="text" placeholder="请在这里输入您的用户名" class="control-label" size="20px"> 6 <input type="text" placeholder="请在这里输入您的密码" class="control-lable" size="20px"> 7 </div> 8 <div class="form-group"> 9 <input type="radio" name="sex" value="male" class="control-lable" size="20px">男<br> 10 <input type="radio" name="sex" value="female" class="control-lable" size="20px">女<br> 11 </div> 12 <div class="form-group"> 13 <input type="submit" value="提交" size="20px" class="control-lable"> 14 </div> 15 16 </form>
4.支持的表单控件
简单介绍一些bootstrap支持的上面没有用到的表单控件，bootstrap本身对html的原生控件有着很好的支持
文本域：
<!--文本域"--> <body><form role="form" > <div class="form-group"> <textarea rows="3" class="form-control" placeholder="最多输入10字" maxlength="10"></textarea> </div> </form> </body>
单选和多选列表：
1 <!--单选和多选选择列表--> 2 <body><form role="form" > 3 <div class="form-group"> 4 <select class="form-control"> 5 <option>百度</option> 6 <option>谷歌</option> 7 <option>搜狐</option> 8 <option>雅虎</option> 9 <option>MSN</option> 10 </select> 11 </div> 12 <div class="form-group"> 13 <select multiple class="form-control"> 14 <option>1</option> 15 <option>2</option> 16 <option>3</option> 17 <option>4</option> 18 <option>5</option> 19 </select> 20 </div> 21 22 </form> 23 </body>
静态控件：
1 <!--静态控件--> 2 <body><form role="form" > 3 <div class="form-group"> 4 <button class="form-control-static">这是一个静态控件</button> 5 </div> 6 </form> 7 </body>
表单控制状态：
<!--表单控制状态--> <body><form role="form" > <div class="form-group"> <input class="form-control" text="text" value="点击时获取焦点"> </div> <div class="form-group has-warning"> <input class="form-control" text="text" value="这是一个警告框"> </div> <div class="form-group has-error"> <input class="form-control" text="text" value="这是一个错误提示框"> </div> <div class="form-group has-success"> <input class="form-control" text="text" value="这是一个成功提示框"> </div> </form> </body>
表单大小：
1 <!--表单大小--> 2 <body><form role="form" > 3 <div class="form-group"> 4 <!--预定义--> 5 <input class="form-control input-lg" text="text" value=".input.lg"> 6 </div> 7 <div class="form-group has-warning"> 8 <input class="form-control input-sm" text="text" value=".input.sm"> 9 </div> 10 <div class="form-group has-error"> 11 <!--自定义--> 12 <input class="form-control col-lg-2" text="text" value=".col-lg-2"> 13 </div> 14 <div class="form-group has-success"> 15 <input class="form-control col-lg-3" text="text" value=".col-lg-3"> 16 </div> 17 </form> 18 </body>