bootstrap学习------2------

表单

<table class = "table">
<thead>
<tr>
<th>表格标题</th>
<th>表格标题</th>
<th>表格标题</th>
</tr>
</thead>
<tbody>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
</tbody>
</table>
* 基本格式
table类有三个作用
1. 给表格设置了margin-bottom:20px以及设置单元内距
2. 在thead底部设置了一个2px的浅灰实线
3. 每个单元格顶部设置了一个1px的浅灰实线
* 带斑马线的<table class="table table-striped">
格式是这样的
* 带边框的表单<table class="table table-bordered">

* 鼠标悬浮高亮 <table class="table table-hover">
*响应式表格.table-responsive

Bootstrap中响应式表格效果表现为：当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时，表格底部水平滚动条就会消失。

表单

• 例子
  
  • 
    <form role="form">
<div class="form-group">
<label for="exampleInputEmail1">邮箱：</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入您的邮箱地址">
</div>
<div class="form-group">
<label for="exampleInputPassword1">密码</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入您的邮箱密码">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 记住密码
</label>
</div>
<button type="submit" class="btn btn-default">进入邮箱</button>
</form>
• 在Bootstrap框架中，通过定制了一个类名form-control，也就是说，如果这几个元素使用了类名“form-control”，将会实现一些设计上的定制效果。
  
  1. 宽度变成了100%
  2. 设置了一个浅灰色（#ccc）的边框
  3. 具有4px的圆角
  4. 设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化
  5. 设置了placeholder的颜色为#999
• 水平表单
  
  • 在元素上使用类名“form-horizontal”主要有以下几个作用：
    1、设置表单控件padding和margin值。
    2、改变“form-group”的表现形式，类似于网格系统的“row”。
    
• 如何要让表单放在一行的话，在form加一个类form-inline
  
  • 如果你要在input前面添加一个label标签时，会导致input换行显示。如果你必须添加这样的一个label标签，并且不想让input换行，你需要将label标签也放在容器“form-group”中。在label加一个类sr-only这个标签就看不见了，但是如果有残疾人士需要读出来的话，就读出来了，十分的良心。
• 单行输入框，常见的文本输入框，也就是input的type属性值为text。在Bootstrap中使用input时也必须添加type类型，如果没有指定type类型，将无法得到正确的样式，因为Bootstrap框架都是通过input[type=“?”] (其中?号代表type类型，比如说text类型，对应的是input[type=“text”]) 的形式来定义样式的。为了好看一点，类 可以加上form-control
• 表单下拉
  
  • 例子
  • <select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

• 文本区域
  
  • <textarea class="form-control" rows="3"></textarea>
  • 可以通过设置row来设置高度，可以通过设置col设置宽度
• checkbox和radio这个东西给封装起来了
  

  ---

• 这个还可以让这些按钮在一排
  <div class="form-group">
<label class="radio-inline">
<input type="radio" value="option1" name="sex"> 男性
</label>
<label class="radio-inline">
<input type="radio" value="option2" name="sex"> 女性
</label>
<label class="radio-inline">
<input type="radio" value="option3" name="sex"> 中性
</label>
就是让他内联一下

• 按钮格式
  

  <button class="btn btn-success" href="#">Success</button>例子

• 控制大小

  • bootstrap默认把页面大小划分为12份，如果你想你的表单占据大小也可以使用col-xs-*
    col-xs-6 会把一行分为两列
    col-xs-4 会把一行分为3列
    xs(for phones), <768px;
    

    ---

  sm(for tablets), <=768px-991px;
  md(for desktops), >=992px-1199px;
  lg(for large desktops), >=1200px;

  ---

超过规定范围后会把叠在一起的内容显示为一排
* 禁用表单
<input class="form-control input-lg" type="text" placeholder="表单已被禁用，不可输入" disabled>