Bootstrap插件基础介绍

引入Bootstrap

网址:
CSS部分
https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.css
JS部分
https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.js

引入js的时候要同时引入jQuery文件，jQuery在上，bootstrap在下

布局

Bootstrap需要为页面内容和栅格系统包裹一个.container容器。框架中提供了两个类

container类

用于固定宽度并支持响应式布局的容器

<div class="container">
。。。
</div>

container-fluid类

用于100%宽度，占据全部视口（viewport的容器）

<div class="container-fluid">
。。。
</div>

##由于padding等属性的原因，这两种属性的容器不能互相嵌套

Bootstrap提供了一套响应式，移动设备优先的栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为12列

栅格参数

	超小屏幕(手机)	小屏幕(平板)	中等屏幕(桌面显示器)	大屏幕(大桌面显示器)
栅格系统行为	总是水平排列	开始是堆叠在一起的	，当大于这些阙值时	将变为水平排列
.container最大宽度	None(自动)	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列数	12	12	12	12

表格

在Bootstrap里，给<table>标签添加.table类可以为其赋予基本的样式-少量的内补（padding）和水平方向的分割线

条纹状的表格

<table class="table table-striped"> 
。。。
</table>

带边框的表格

<table class="table table-bordered"> 
。。。
</table>

鼠标悬停

<table class="table table-hover"> 
。。。
</table>

表单

单独的表单控件会被赋予一些全局样式

所有设置了.form-control类的<input>，<textarea>和<select>元素都将被默认设置宽度属性为width:100%;；将lable元素和前面提到的控件包裹在.form-group中可以获得最好的排列

内联表单

为form元素添加.form-inline类可使其内容左对齐并且表现为inline-block级别的控件，只适用于视口至少为768px时
在Bootstrap中，输入框和单选/多选框控件默认被设置为width:100%宽度。在内联表单，我们将这些元素宽度设置为width:auto;因此，多个控件可以排列在同一行。根据布局需求，也可能需要其他组件

一定要添加lable标签

输入框

包括大部分表单控件，文本输入控件，和所有HTML5的输入控件

组件

图标

所有图标都需要一个基类和对应每个图标的类

改变图标字体文件的位置
Bootstrap假定所有的图标字体文件全部位于../fonts/目录内，相对于预编译模板css文件的目录，如果修改了图标字体文件的位置，那么需要以下方式更新css文件
在less源码文件中修改@icon-font-path或@icon-font-name变量
利用less编译器提供的相对url地址
修改预编译css文件中的url地址

下拉菜单

用于显示链接列表的可切换，有上下午的菜单。下拉菜单的JavaScript插件让他具有看交互性

输入框组

通过在文本输入框<input>前面，后面或是两边加上文字或按钮，可以实现对表单控件的扩展

按钮组

JavaScript插件

模态框 modal.js

模态框经过了优化，更加灵活，以弹出对话框的形式出现，具有最小和实用的功能用

不支持同时打开多个模块框
模块框的HTML放置位置在HTML代码的最高级，以避免影响其他模块