一、Bootstrap基础

1、简介：

是一个基于HTML、CSS和JavaScript语言编写的框架，具有简单、灵活的特性，

拥有样式库、组件和插件。常用来开发响应式布局和移动设备优先的Web项目，

能够帮助开发者快速搭建前端页面。

根据设备适口的大小来确定，自适应不同终端，减小工作量，移动设施上常用

• 特点：
  丰富的组件库
  响应式设计
  移动设备优先
  浏览器支持
  低成本，易上手
  CSS预编译
  框架成熟

2、组成：

(1)基本结构：栅格系统（可以自适应）

(2)丰富的CSS样式库：只需要改变标签的class属性值,就可以给标签应用不同的样式

(3)布局组件：有丰富的组件库，可以完成不同样式的页面布局

(4)插件：基于jQuery的插件，功能强大

3、浏览器：

主要关注–>内核：Blink、WebKit（谷歌浏览器）和Trident
CSS样式需要考虑支持和兼容性（-object(浏览器名字）-）

4、视口(Viewport)：

能将大分辨率尺寸网页缩小显示在手机浏览器

(1)布局视口(layout viewport)：是指网页的宽度

(2)视觉视口(visual viewport)：是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度

(3)理想视口(ideal viewport)：是指对设备来讲最理想的视口（窗口）尺寸

(4)视口的设置：在<meta>标签中，将name属性设为viewport，即可设置视口。在终端中以理想视口打开网页

5、分辨率

分辨率，又称解析度、解像度，可以细分为显示分辨率、图像分辨率、打印分辨率和扫描分辨率等。

像素相对低的情况下颗粒感会较重。

6、可缩放矢量图形(ScalableVectorGraphics，SVG)

是一种开放标准的描述矢量图形的语言，它基于XML（可扩展标记语言）

(1)SVG使用标签的方式定义各种图形，外层标签是<svg>

(2)它的属性主要包括x、y、width、height，用数字表示，每个数字之间用空格或逗号隔开，表示定义一个在左上角(x,y)坐标位置，宽度为width，高度为height的矩形

二、bootstrap的环境配置

1、在页面中引入本地文件：

<link rel="stylesheet" href="../css/bootstrap.min.css">
<script src="../js/bootstrap.min.js"></script>

2、使用CDN加速器：

(1)CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。

(2)用法：(前提是必须联网)

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

三、bootstrap的全局的CSS样式

这个是我们更多关注的部分。

1、布局容器

(1)container：用于固定宽度并支持响应式布局的容器

(2)container-fluid：类用于100%宽度，占据全部视口（viewport）的容器

2、文本排版样式：

class="text-left"文本左对齐
class="text-right"文本右对齐
class="text-center"文本中对齐
class="text-justify"文本两端对齐
class="text-nowrap"禁止文本换行

3、设置字母的大小写

class="text-lowercase"转成小写
class="text-uppercase"转成大写
class="text-capitalize"首字母大写

4、列表样式：

(1)无样式列表

class=“list-unstyled”

(2)内联列表：

class=“list-inline”

5、表格样式

(1)表格的全局样式：class=“table”

(2)带边框的表格:

class=“tabletable-bordered”

(3)表格隔行变色：斑马线效果

class=“tabletable-striped”

(4)鼠标悬停

class=“tabletable-hover”

(5)紧缩表格

class=“tabletable-condensed”

(6)状态类：通过这些状态类可以为行或单元格设置颜色。

.active鼠标悬停在行或单元格上时所设置的颜色

.success标识成功或积极的动作

.info标识普通的提示信息或动作

.warning标识警告或需要用户注意

.danger标识危险或潜在的带来负面影响的动作

6、表单样式

(1)html中的表单：<form action="远程服务器地址"method="请求方式"></form>

(2)bootstrap应用到form的样式属性：

a、form-control：应用该样式,则表单控件、、的宽度

默认为100%(即占容器宽度的100%)

<input class="form-control"/>

<text area class="form-control"></textarea>

<select class="form-control"></select>

b、内联表单：

<form class="form-inline"></form>

c、水平排列的表单

<form class="form-horizontal"></form>

7、按钮：

<a>、<button>、<input type="button"/>

(1)样式

默认样式：<button class="btnbtn-default">default</button>

首选项：<button class="btnbtn-primary">primary</button>

成功：<button class="btnbtn-success">success</button>

一般信息：<button class="btnbtn-info">info</button>

警告：<button class="btnbtn-warning">warning</button>

危险：<button class="btnbtn-danger">Danger</button>

链接：<button class="btnbtn-link">Link</button>

激活状态(active)：<button type="button" class="btnbtn-primaryactive">

禁用状态：<button class="btnbtn-default"disabled>

(2)尺寸

btn-lg：大按钮

btn-sm：小按钮

btn-xs：超小按钮

8、图片

(1)class=“img-rounded”：圆角图片

(2)class=“img-circle”：圆形图片

(3)class=“img-thumbnail”：边框圆角

9、辅助类

(1)文本颜色

柔和的：<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>

(2)背景色

<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>

(3)三角符号

class="caret"

(4)显示和隐藏内容

class="show"

class="hide"

四、bootstrap的栅格系统：

1、将屏幕或视口(viewport)自动分为最多12列

2、通过一系列的行(row)与列(column)的组合来创建页面布局

3、行(row)必须包含在.container(固定宽度)或.container-fluid(100%宽度)中

4、通过行(row)在水平方向创建一组列(column).内容应当放置于列(column)内，并且，只有列(column)可以作为

行(row)的直接子元素

5、如果一行(row)中包含了的列(column)大于12，多余的列(column)所在的元素将被作为一个

整体另起一行排列

6、栅格参数：

'*'表示1~12数字

col-xs-*
col-sm-*
col-md-*
col-lg-*

7、栅格系统的列偏移：

col-md-offset-*

例如，.col-md-offset-4类将.col-md-4元素向右侧偏移了4个列（column）的宽度。

8、字体图标

9、下拉菜单：

(1)定义容器(容器的class为：dropdown)

(2)在容器中添加菜单触发器和菜单项

<divclass="dropdown">
<buttonclass="btnbtn-default"data-toggle="dropdown">
关于我们
<spanclass="caret"></span>
</button>
<ulclass="dropdown-menu">
<li><ahref="#">公司简介</a></li>
<li><ahref="#">公司荣誉</a></li>
<li><ahref="#">发展历程</a></li>
<li><ahref="#">组织结构</a></li>
</ul>
</div>

(3)分割线：

<li role="separator"class="divider"></li>

(4)禁用的菜单项:< li class = “disabled”><a href = “#”>< / a >< / li >

10、按钮组：将按钮放在btn-group的容器中

(1)按钮工具栏：

<div class="btn-toolbar">按钮</div>

(2)按钮组的尺寸：

.btn-group-lg：应用于大型按钮组。

.btn-group：应用于一般按钮组。

.btn-group-sm：应用于小型按钮组。

.btn-group-xs：应用于超小型按钮组。

11、输入框组：

使用input-group