1.bootstrap简介

- 在GitHub上的开源产品
- 快速开发Web应用程序和网站的前端框架
- 支持响应式布局。（是指兼容多种终端设备访问（电脑、平板、手机））

2.部署bootstrap

- 1.下载bootstrap框架  http://www.bootcss.com--选择bootstap3  --生产环境
- 2.解压压缩包--用3个文件--css/fonts/js
- 3.讲解这3个文件夹
    -css: bootsrap.css   bootsrap.min.css(压缩版，小一些）
    -fonts:字体文件夹
    -js:bootstrap.js   bootstrap.min.js（压缩版，小一些）

3.引入到项目中

- 1.boostrap要求使用html5的文档类型
- 2.bootstrap是移动设备优先的，只需要在head标签中加入
    <meta name="viewport" content="width=device-width,initial-scale=1">
- 3.引入css文件
    <link rel="stylesheet" href="bootstrap的css文件所在的位置">
- 4.引入jquery文件（必须在bootstrap文件之前引入，boostrap依赖jquery文件）
    <script type="text/javascript" src="jquery文件所在的位置"></script>
- 5.引入bootsrap文件
    <script type="text/javascript" src="bootsrap文件所在的位置"></script>

4.全局的CSS样式

- 说明：设置全局的CSS样式--bootsrap给用户写了很多css样式， 我们可以通过类名来使用→<标签名 class="类名"></标签名>
- 布局容器：它认为每一个网页都应该会拥有固定的宽度，并且它在容器内水平居中；占据容器的100%的宽度。
    - 1）固定的宽度    .container类  用于固定宽度，并支持响应式布局的容器
    - 2）百分之百宽度  .container-fluid   类用于100%宽度，占据容器的100%；
- 如果一个容器没有设置固定的宽度，那么这个容器会占据父容器100%的宽度。

5.排版样式

5.1 h1-h6

- <h1>-<h6>  经过了美化，字体大小、字体颜色、字体类别等   --它是块样式，独自占一行
- .h1-.h6  别的标签，利用h1-h6的样式
- <strong></strong>或<b></b>   加粗；<em></em>或者<i></i>斜体；<del></del>或者<s></s>删除线；<ins></ins>或者<u></u>下划线
- .text-left文本水平居左对齐 .text-center文本水平居中对齐   .text-right文本水平居右对齐
- .text-uppercase将小写字母变大写    .text-lowercase将大写字母 变小写   .text-capitalize实现首字母大写

5.2列表样式（有序列表、无序列表、定义列表）--ul

- .list-unstyled  将列表前的项目符号去掉，同时去除列表的默认padding值
- .list-inline  将列表内容排成同一行，并增加少量padding值

5.3表格样式table

- .table  给表格添加一些样式，例如变宽、添加内边距、水平分割线等
- 注意：.table这个类名是所有的类名的父类名，千万不能将其删除，其他类名直接在.table后面添加即可。
- .table-bordered给每一个单元格加一个边框
- .table-striped 斑马线效果，隔行变色
- .table-hover 鼠标放在行上时变色
- .table-condensed  表格中padding值减半，紧奏型表格
- 状态类     只给tr或 td 或th来设置，不能给table标记来设置
    - .active鼠标悬停在行或单元格上时所设置的颜色    .success标识成功或积极的动作   .info标识普通信息或动作  .warning标识警告或需用户注意  .danger标识潜在危险或潜在带来负面影响的动作

5.4按钮样式

- .btn  表示按钮， 它是所有按钮的父类名
- .btn-default 默认按钮
- .btn-primary 重要的按钮
- .btn-warning 警告
- .btn-info
- .btn-danger
- .btn-link  背景色是透明的
- .btn-lg  超大按钮
- .btn-sm 小按钮
- .btn-xs 超小按钮
- disabled属性--不可编辑
- 也可以给a标签添加btn类，会变成按钮样式。

5.5图片

5.5.1响应式图片

- .img-responsive 响应式的图片   --只能给img标签使用

5.5.2图片的形状

- .img-rounded  圆角矩形的图片
- .img-circle  圆形图片
- .img-thumbnail 圆角边框的图片--默认支持响应式布局

6.栅格系统

6.1什么是栅格系统？

- 响应式、移动设备优先的流式栅格系统，系统会自动分为最多12列。
- 通过一系列的行（row）与列（col）的组合来创建页面布局
- 注意：行(row)必须包含在.container或.container-fluid中。
- 一行最多有12列，多了会换行。
- .col-md-x  x代表数字，x是6,说明.col-md-6占据了6列的范围。

6.2

超小屏幕（手机） .col-xs-
小屏幕   （平板） .col-sm-
中等屏幕（桌面显示器）.col-md-
大屏幕（大桌面显示器）.col-lg-
- 案例：大屏 显示12列，中等屏幕显示6列，小屏幕显示3列，超小屏幕显示2列

6.3列偏移和嵌套列

- 列偏移 .col-lg|md|sm|xs-offset-*   *表示偏移量   例如：.col-md-offset-2 偏移两个位置
-  在列里面可以嵌套一个行与列的组合（栅格  系统）

#7表单格式

7.1 form-horizontal

8.组件

- 组件包括字体图标、下拉菜单、导航等等。

8.1Glyphicons字体图标

- 直接在bootsrap的官网上，将class的类名复制过来

8.2下拉菜单

原文地址：https://www.cnblogs.com/xuzhengguo/p/10009954.html