2. Bootstrap样式

目录

一、栅格系统

1.实现原理

2.Bootstrap 网格的基本结构

3. 栅格系统的使用 

 1）列组合

 2）列偏移

3）列嵌套

4）列排序

5）栅格系统选项参数

二、CSS全局样式

 1. 标题

 2. 对齐方式

3. 列表

 4. 表单

1）基础表单

 2）内联表单

3）横向表单

5. 控件大小

1）高度尺寸

2）列尺寸宽度 

6. 按钮

7. 图片

总结

---

一、栅格系统

Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备尺寸的增加，系统会自动分为最多12列。

1.实现原理

通过定义容器大小，平分为12份，再调整内外边距，最后结合媒体查询，制作出强大的响应式栅格系统。

2.Bootstrap 网格的基本结构

<div class="container">
       <div class="row">
              <div class="col-md-4">4</div>
              <div class="col-md-8">8</div>      
       </div>
       <div class="row">
              <div class="col-md-4">4</div>
              <div class="col-md-4">4</div>
              <div class="col-md-4">4</div>
       </div>
</div>

以上代码实现效果：

 其中：.container 固定宽度，并将布局居中

           .row 使用“行（row）”在水平方向创建一组“列（column）”

           栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.col-md-4来创建

3. 栅格系统的使用 

 1）列组合

        <div  class="container">
				<div class="row">
						<div class="col-md-1">1</div>
						<div class="col-md-1">1</div>
						<div class="col-md-1">1</div>
						<div class="col-md-1">1</div>
						<div class="col-md-1">1</div>
						<div class="col-md-1">1</div>
						<div class="col-md-1">1</div>
						<div class="col-md-1">1</div>
						<div class="col-md-1">1</div>
						<div class="col-md-1">1</div>
						<div class="col-md-1">1</div>
						<div class="col-md-1">1</div>
				</div>
				<div  class="row">
						<div  class="col-md-4">4</div>
						<div  class="col-md-8">8</div>
				</div>
				<div class="row">
						<div class="col-md-4">4</div>
						<div class="col-md-4">4</div>
						<div class="col-md-4">4</div>
				</div>
		</div>

 占比效果：

 2）列偏移

如果不想让两个相邻的列挨在一起，使用列偏移功能，不必定义margin值。

.col-md-offset-*可以将列偏移到右侧。 比如.col-md-offset-2   意思是将元素向右移动两个列的宽度。

    <div  class="container">
				<div class="row">
						<div class="col-md-1">1</div>
						<div class="col-md-1">1</div>
						<div class="col-md-1">1</div>
						<div class="col-md-1">1</div>
						<div class="col-md-1">1</div>
						<div class="col-md-1">1</div>
						<div class="col-md-1">1</div>
						<div class="co