BootStrap框架的使⽤介绍bootstrap框架的使⽤介绍
⼀.什么是 Bootstrap 框架？
Bootstrap 框架是最受欢迎的 HTML、CSS 和 JS 框架，⽤于开发响应式布局、移动设备优先的 WEB 项⽬。
⼆.怎么使⽤
先下载库并安装到环境中
注意：为了防⽌在后⾯引⽤导⼊的时候出错，可以将⼀些不必要的⽂件删除，不影响使⽤
注意：bootstrap框架动态效果是基于jQuery的也就意味着你在使⽤bootstrap的时候要提前先导⼊jquery，可以提前在etings中设置好默认注意：导⼊bootstrap⽂件夹后要导⼊两个模块
这是第⼀种将⽂件下载到本地中的⽅式，第⼆种可以直接从bootcdn中获取链接
这样就可以调⽤bootstrap⾥⾯的框架了
1、全局CSS样式
1、布局容器
1、左右留⽩的页⾯框架 container
<div class="container">
......
</div>
2、全部占满浏览器窗⼝的容器框架 container-fluid
<div class="container-fluid">
......
</div>
2、栅格系统
在布局容器内创建页⾯布局
1、先⽤row来划分⾏，⼀⾏默认是12份
2、再⽤col-**-数字，来划定份数
3、可以通过栅格系统控制在多种不同尺⼨屏幕展⽰效果相同
⼿机：col-xs-数字
平板：col-sm-数字
电脑：col-md-数字
超⼤屏幕：col-lg-数字
各种类参数可以叠加使⽤
4、可以控制划分的份数左右移动⽤，col-md-offt-数字，从左往右移⼏份
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offt-3">这是占了6个栅格，在中间</div>
<div class="col-md-6 ">这是占了6个栅格，在左边</div>
<div class="col-md-4 col-sm-4 col-xs-4">占了4个栅格</div>
<div class="col-md-4 col-xs-4 col-md-offt-8 col-xs-offt-8">这是占了4个栅格，在右边</div>
</div>
</div>
3、排版
设置副标题：small
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
4、对齐
左对齐：text-left
居中对齐：text-center
右对齐：text-right
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
5、改变⼤⼩写
全部⼤写：text-lowerca
全部⼩写：text-upperca
⾸字母⼤写：text-capitalize
<p class="text-lowerca">Lowercad text.</p>
<p class="text-upperca">Uppercad text.</p>
<p class="text-capitalize">Capitalized text.</p>
6、列表
⽆样式列表 (⼤列表⽆样式，⼩列表下有点序号)：list-style
<ul class="list-unstyled">
<li>...</li>
</ul>
内联列表（将所有元素放在⼀⾏）：list-inline
<ul class="list-inline">
<li>...</li>
</ul>
7、⽤户输⼊
⽤<kbd>标签标⽰⽤户输⼊的内容
<kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
8、表格
基本带边框：table
条纹带表格：table-striped
带边框表格：table-bordered
⿏标悬停：table-hover
设置颜⾊：active(悬停在单元格上的颜⾊)、success(淡绿⾊)、danger(淡红⾊)、warning(淡黄⾊)、info(淡蓝⾊)、primary(⽆⾊) 9、表单
所有的表单标签⼀般设置设置form-control类
10、按钮
可以为a、button、input标签添加button类，btn btn-default
按钮颜⾊：btn-default（默认样式样式）、btn-danger（红⾊）、btn-primary（蓝⾊）、btn-success（绿⾊）、btn-info（淡蓝⾊）按钮尺⼨：btn-lg（⼤按钮）、btn-sm（⼩按钮）、btn-xs（超⼩按钮）
禁⽤按钮：disabled='disabled'
<p>
<button type="button" class="btn btn-danger btn-lg">（⼤按钮）Large button</button>
</p>
<p>
<button type="button" class="btn btn-default btn-sm">（⼩按钮）Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">（超⼩尺⼨）Extra small button</button>
<button type="button" class="btn btn-primary btn-xs" disabled>禁⽤（超⼩尺⼨）Extra small button</button>
</p>
11、图⽚
响应式图⽚（让图⽚更好的缩放）：img-responsive
图⽚形状：img-rounded（⽅形）、img-circle（圆形）、img-thumbnail（四边留⽩⽅形）
<img src="..." alt="..." class="img-responsive img-rounded">
<img src="..." alt="..." class="img-responsive img-circle">
<img src="..." alt="..." class="img-responsive img-thumbnail">
12、颜⾊
给⽂本加颜⾊
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
给背景加颜⾊
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>
13、浮动
向左浮动：pull-left
向右浮动：pull-right
14、让内容居中
center-block
2、组件
组件中包括图标、下拉框、导航条、警告框、弹出框、分页、进度条等等
图标可在图标库中找到对应的图标使⽤其代码前需要先下载该库到本地后导⼊，之后直接找到相应的图标复制代码就好，3、JavaScript插件
JavaScript插件中包括js代码样式有：模态框、下拉菜单、滚动监听、标签页、弹出框、警告框、按钮等等
其中警告框、弹出框可以⽤中的样式更加好看，使⽤其代码前需要先下载该库到本地后导⼊
具体使⽤⽅式可以在中查看
三.Font Awesome的使⽤介绍
font awesome是⼀套字体和图表的扩建，当我们在⽤bootstrap发现图表不够⽤时可以使⽤这个
具体使⽤⽅法可以在查看
四.SweetAlert的使⽤介绍
SweetAlert可以美化bootstrap的弹框，具有更多的风格并且与bootstrap完美兼容
导⼊到⽂件中即可具体使⽤请查看
