Bootstrap样式（一）

Bootstrap3

---

栅格说明

• 使用说明：类似表格样式的使用

<table>
	<tr rowspan="2">
		<td colspan="3"></td>
		<td></td>
	</tr>
</table>

• 注意：

1. row必须包含在container或container-fluid两种样式的任意一种之中。
2. column是通过row来进行创建的。
3. 通过使用padding来设置列之间的间隔(gutter)。
4. 为row的margin来设置负值来消除为container设置的padding值。
5. 列内可嵌套列
6. 如果列大于12，多余的列将会另起一行。
7. 使用container进行设置栅格时,当浏览器窗口为小屏幕时，采用col-xs-2进行布局，当屏幕为中等屏幕时col-md-12将会被使用。

   	<div class="container">
   		<div class="col-xs-2 col-md-12">hello</div>
   		<div class="col-xs-6">world</div>
   		<div class="col-xs-4">bootstrap3</div>
   	<div>
   

效果图
大屏幕
小屏幕

• 常见问题
  • 某些列较大的时候会出现重置的时候不能按照预期的方法堆叠

  <div class="row">
  	  <div class="col-xs-6 col-sm-3">Resize your viewport or check it out on your phone for an example. .col-xs-6 .col-sm-3</div>
  	  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  
  	  <!-- Add the extra clearfix for only the required viewport -->
  	  <!-- <div class="clearfix visible-xs-block"></div> -->
  
  	  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  	  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  	</div>
  

  此时大屏幕效果图都如下：缩小屏幕后，此时会出现不能按照col-xs-6的堆叠方式：解决方法为：使用clearfix和响应式工具类进行解决：

  <div class="clearfix visible-xs-block"></div>
  <!--添加此类进行解决-->
  

  效果如下解决原因分析：源码的样式，所以使用清楚浮动可解决该问题

.col-xs-1, 
.col-xs-2,
.col-xs-3,
.col-xs-4, 
.col-xs-5, 
.col-xs-6, 
.col-xs-7, 
.col-xs-8, 
.col-xs-9,
.col-xs-10, 
.col-xs-11,
.col-xs-12
     {
 	 float: left;
	}

• 列
  • 列偏移 :
    .col-[sm,xs,md,lg]-offset-[0-12]
  • 列排序:
    改变带有 .col-md-push-*和 .col-md-pull-*类的内置网格列的顺序，其中 * 范围是从 1 到 11。

---

排版

• 标题
  • small 标签(samll类也存在)
  • h1-h6均有调整
  • 页面主体调整：
    • font-size = “14px”
    • line-height = 1.428
  • .lead类让段落突出显示
  • <mark>标签会显示高亮
  • <del>标签
  • <s>标签表示无用文本
  • ins标签表示额外插入文本
  • <u>文本添加下划线
  • 文本对齐:
    • text-left左对齐
    • text-center居中
    • text-right右对齐
    • text-justify两端对齐
    • text-nowrap不换行
  • 改变大小写
    • text-lowercase
    • text-uppercase
    • text-capitalize
  • 缩略
    • <abbr>标签
    • .initialism类让字变稍微小
  • 地址<address>标签
  • 引用：
    • <blockqueto>标签包裹
    • <footer>标明引用来源
    • <cite>标签包裹来源网站
    • .blockquote-reverse类来实现右对齐
  • 列表：
    • 内联列表.inline-block进行显示
      
    • 水平排列描述.dl-horizontal
      
  • 代码：
    • 内联代码<code>
    • 用户输入<kbd>Ctrl+?
    • 代码块<pre>

      <p>Sample text here...</p>

    • 变量<var>标记 x
    • 程序输出<samp>标签标记
      hello world

---

表格

• 使用<table class="table">使用bootstrap的默认样式
• 样式：
  • 默认样式.table
  • 条纹表格table-striped
  • 带边框的表格table-border
  • 悬停样式table-hover指针悬停会做出反应
  • 紧缩表格table-condensed表格更加紧凑，单元格中的内补（padding）均会减半
  • 将表格包含在<div class="table-responsive">内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失。

---

表单

• 表单基本样式

  <form>
  		<div class="form-group">
  			<label for="password">Password</label>
  			<input type="password"  id="password" placeholder="Password">
  		</div>
  	</form>
  

  
• form-control样式
  
• 默认按钮btn-default样式
  
• 使用form-inline可以让表单在一行内显示
  
• 使用sr-only隐藏lable标签
• input-group与input-group-addon样式
• 使用form-horizontal来使用栅格系统改变框的大小与对齐

  <form class=" form-horizontal">
  	<div class="form-group col-md-10">
  		<label for="password" class="col-md-2 control-label">Password</label>
  		<div class="col-md-10">
  			<input type="password" class="form-control" id="password" placeholder="Password">
  		</div>		
  		<div class="col-md-2">
  			<button type="submit" class="btn btn-default">Submit</button>
  		</div>
  </form>
  

  
• 输入框支持的其他控件类型： text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。
• 文本域：使用row来改变textarea的大小
• 多选框：默认单独占一行，使用radio-inline只占一行
• 单选框：默认单独占一行，使用checkbox-inline只占一行
• 下拉列表