BootStrap框架的使用介绍
bootstrap框架的使用介绍
一.什么是 Bootstrap 框架？
Bootstrap 框架是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
二.怎么使用
先下载库并安装到环境中
注意：bootstrap框架动态效果是基于jQuery的 也就意味着你在使用bootstrap的时候要提前先导入jquery,可以提前在seetings中设置好默认
这是第一种将文件下载到本地中的方式，第二种可以直接从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-offset-数字，从左往右移几份
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-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-offset-8 col-xs-offset-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-lowercase
全部小写：text-uppercase
首字母大写：text-capitalize
<p class="text-lowercase">Lowercased text.</p> <p class="text-uppercase">Uppercased 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、组件
组件中包括图标、下拉框、导航条、警告框、弹出框、分页、进度条等等
图标可在图标库中找到对应的图标使用其代码前需要先下载该库到本地后导入，之后直接找到相应的图标复制代码就好，图标库fontawesome
3、JavaScript插件
JavaScript插件中包括js代码样式有：模态框、下拉菜单、滚动监听、标签页、弹出框、警告框、按钮等等
其中警告框、弹出框可以用 SweetAlert
具体使用方式可以在官网中查看
三.Font Awesome的使用介绍
font awesome是一套字体和图表的扩建，当我们在用bootstrap发现图表不够用时可以使用这个
SweetAlert可以美化bootstrap的弹框，具有更多的风格并且与bootstrap完美兼容
导入到文件中即可
