Bootstrap知识点

2018.9.20 星期四

Bootstrap

第一章 Bootstrap简介、栅格系统
第二章 CSS布局组件
第三章 CSS组件
第四章 JavaScript插件

---

第一章 Bootstrap简介、栅格系统

一、Bootstrap概述
1.什么是Bootstrap？
Bootstrap是目前最流行的前端开发【框架】，由Twitter的两位前员工 Mark Otto和Jacob。 Thornton在2010年8月创建。是一套基于Less(Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。)的前端开发库。

Bootstrap的强大之处在于它对常见的CSS布局小组件和JavaScript插件都进行了完整且完善的封装，使得开发人员（不仅是前端开发人员）信手拈来，轻松使用。

2.Bootstrap提供了重要的特性
1）一套完整的基础CSS插件
2）丰富的预定义样式表
3）一组基于jQuery的JS插件集
4）一个非常灵活的响应式（Responsive）栅格系统，并且崇尚移动先行（Mobile First）的思想

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

三、栅格系统基本用法
1.列组合
每一行里面都总共有12列

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

2.列偏移

  <div class="row">
		<div class="col-sm-3 col-sm-offset-3 bg-primary">3</div>
  </div>

3.列嵌套

   <div class="container">
    		<div class="row">
    			<div class="col-sm-9">
    				<div class="row">
    					<div class="col-sm-6 bg-success">1</div>
    					<div class="col-sm-6 bg-danger">1</div>
    				</div>
    			</div>
    			<div class="col-sm-3 bg-primary">3</div>
    		</div>
    	</div>

4.列排序

       <div class="row">
	  <!-- 往右推3格 -->
	 <div class="col-sm-9 col-sm-push-3 bg-success">9</div>
	  <!-- 往左拉9格 -->
	  <div class="col-sm-3 col-sm-pull-9 bg-danger">3</div>
	</div>

四、响应式栅栏
1.跨设备组合定义
在一个元素上应用不同类型的样式，以适配不同尺寸的屏幕。

   <div class="row">
        <div class="col-md-9 col-sm-6">.col-md-9</div>
         <div class="col-md-3 col-sm-6">.col-md-3</div>
      </div>

2.清除浮动问题
当内容超过盒子的宽度时可能会出现布局错乱的情况，这时需要clearfix样式来清除浮动。

<div class="row">
	 <div class="col-sm-2 col-xs-6 bg-info">
		     这里很多内容这里很多内容这里很多内容这里很多内容这里很多内容
	   </div>
	   <div class="col-sm-2 col-xs-6 bg-danger">3</div>
	   <!-- 清除浮动 -->
	   <div class="clearfix visible-xs"></div>
	   <div class="col-sm-2 col-xs-6 bg-info">3</div>
	   <div class="col-sm-2 col-xs-6 bg-danger">3</div>
</div>

---

第二章 CSS布局

学习目标：
1）理解Bootstrap三大核心内容的基础，即基础的CSS布局语法。
2）掌握以下八大语法。

一、基础排版(Typography)
1.标题
2.页面主题
3.强调文本
4.缩略语
5.地址元素
6.引用
7.列表

二、代码(Code)
1.内联代码
2.用户输入代码
3.多行代码块

三、表格(Tables)
1.基础样式（.table）
2.带边框的表格（.table-bordered）

四、表单(Forms)
1.基础表单（.form）
2.内联表单（.form-inline）
3.横向表单（.form-horizontal）
4.表单控件：
input
select
textarea
checkbox
radio

五、按钮(Buttons)

六、图像(Images)
.img-rounded
.img-circle
.img-thumbnail

七、辅助类(Helper Classes)
文本样式及背景样式
内容浮动
隐藏与显示

八、响应式设计(Responsive utilities)

---

第三章 CSS组件

学习目标：
1）理解Bootstrap框架的三大核心之二：组件。
2）掌握20种组件。

一、小图标
1.基本用法
2.实现方式
3.应用场景

二、下拉菜单
基本用法

三、按钮组
1.基本用法
2.按钮工具栏
3.按钮尺寸设置
4.嵌套分组
5.垂直分组
6.自适应分组

四、按钮下拉菜单
1.组合式下拉菜单
2.分离式下拉菜单
3.按钮大小
4.向上弹起的下拉菜单

五、输入框
1.基本用法
2.尺寸大小设置
3.复选框与单选框作为addon
4.按钮作为addon
5.下拉菜单按钮作为addon
6.分段按钮为addon

六、导航(Nav)
1.选项卡导航
2.胶囊式选项卡导航
3.堆叠式导航
4.自适应导航
5.禁用链接
6.二级导航实现

七、导航条(Navbar)
1.基础导航条
2.导航条中的表单
3.导航条中的按钮、文本、链接
4.导航条中的项进行左右浮动
5.顶部固定或底部固定
6.响应式导航条
7.反色导航条

八、面包屑导航条

九、分页导航
1.页码分页
2.翻页

十、标签

十一、徽章

十二、页面标题

十三、缩略图

十四、警告框
1.默认警告
2.可关闭的警告框
3.多彩样式警告框
4.警告框中的链接

十五、进度条
1.基本样式
2.多彩样式
3.条纹样式
4.堆叠样式
5.动画样式

十六、媒体对象
1.默认样式
2.媒体列表

十七、列表组(List group)

十八、面板(Pannel)

十九、洼地

二十、主题

---

第四章 JavaScript插件

学习目标：
1）理解JavaScript插件的原理。
2）掌握新版Bootstrap提供的11中JavaScript插件。

12种JavaScript插件：

1）模态框(Modal)
   1.模态框布局与样式
   2.声明式用法
   3.JavaScript用法
   modal
     modal-dialog
       modal-content
          modal-header
          modal-body
             form-group
          modal-footer

2）选项卡(Tab)
   1.声明式用法
   2.JavaScript用法

3）旋转轮播(Carousel)
   1.声明式用法
   2.声明式用法分析
   3.JavaScript用法

4）下拉菜单(Dropdown)
   1.声明式用法
   2.JavaScript用法

5）弹出框(Popover)

6）警告框(Alert)

7）按钮(Button)

8）折叠(Collapase)

9）滚动侦测(Scrollspy)

10）自动定位浮标(Affix)

11）提示框(Tooltip)

12）动画过渡效果