初识bootstrap框架

bootstrap是我们在前端学习中最早接触的一个实用的框架，只要我们熟练掌握了HTML，css，JavaScript等内容，我们就可以熟练地运用这个框架。下面我们来简单了解一下这个框架的内容。（附上中文网官方地址）
中文网官方地址：bootstrap中文网

一、bootstrap框架

1.它是一个前端框架。

2.封装了html,css,javascript。

3.具有响应式布局的效果（可以适配不同屏幕大小的设备）。

4.构建优雅美观的前端界面，并且占用资源少。

二、bootstrap配置

1.使用本地文件

​ （1）bootstrap.css （bootstrap.min.css）：必须具备的css样式

​ （2）bootstrap.js （bootstrap.min.js）:必须具备的js文件

​ （3）jQuery.js（jquery.min.js）：根据实际情况的需求，如果要使用，必须放在bootstrap.js文件之前引入
2.使用CDN加速服务（必须要联网使用）

<!--  Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

三、bootstrap的全局css样式

1.在移动设备上禁止缩放功能：

<meta user-scalable=no />

2.容器

​ （1）.container：类用于固定宽度并支持响应式布局的容器

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

​ （2）.container-fluid：用于100%宽度，占据全部视口（view-port）的容器

<div class="container-fluid" style="background-color: brown; height: 500px;"></div>

注意：这两种容器不能互相嵌套

3.排版：

​ （1）标题标签：h1 ~ h6都有对应的class属性：.h1~.h6
​ （2）页面主体（body）:字号（font-size）：14px

​ （3）表格：
​ .table: 表格的基本样式

​ .table-striped： 表格隔行变色

​ .table-bordered：表格边框

​ .table-hover：鼠标悬停效果（对鼠标悬停做出响应）

​ .table-condensed：紧缩表格（表格的紧缩样式）

​ 状态类样式：设置单元格或者行的样式

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

​ .info 标识普通的提示信息

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

​ .warning 标识警告

​ .danger 标识危险

​ （4）表单（form）：

​ .form-group :可以让表单控件之间有很好的位置排列

​ .from-control ： 可以让使用该样式的input，textarea，select的宽度为100%

​ （5）按钮（button）：

​ A、按钮的样式

<button type="button" class="btn btn-primary" disabled>大学</button>
<button type="button" class="btn btn-info">大学</button>
<button type="button" class="btn btn-danger">大学</button>
<button type="button" class="btn btn-warning">大学</button>
<button type="button" class="btn btn-success">大学</button>
<input type="button" class="btn btn-success" value="大学">
<button type="button" class="btn btn-default">年后</button>		

​ B、按钮尺寸

​ .btn-lg: 大按钮

​ .btn-sm: 小按钮

​ .btn-xs: 超小按钮

​ .btn-block：父容器宽度百分百

​ （6）图片样式：

圆角图片： <img src="..." alt="..." class="img-rounded">
圆形图片： <img src="..." alt="..." class="img-circle">
边框圆角： <img src="..." alt="..." class="img-thumbnail">

​ .img-responsive: 响应式图片

​ .center-block：图片居中

​ （7）辅助类：

​ A、文本的颜色

<p class="text-success">前端框架</p>
<p class="text-primary">前端框架</p>
<p class="text-warning">前端框架</p>
<p class="text-info">前端框架</p>
<p class="text-danger">前端框架</p>

​ B、背景颜色类

<p class="text-success bg-success">前端框架</p>
<p class="text-primary">前端框架</p>
<p class="text-warning">前端框架</p>
<p class="text-info">前端框架</p>
<p class="text-danger">前端框架</p>

​ C、三角符号

<span class="caret"></span>

​ D、清除浮动

<div class="clearfix"></div>

​ E、显示和隐藏内容

隐藏内容： <div class="hidden">你好世界</div>

四、bootstrap栅格系统（重要内容）:

是一种响应式的、移动设备优先的流式栅格系统。将屏幕或者视口划分为最多12列，通过一系列的行列组合来创建页面布局，可以将内容放在列当中

1.行（row）必须放在容器中（.container或者.container-fluid)中；这样才会有合适的排列和内补白

2.每一行可以划分成若干个列（col），列只能作为行的直接子元素

3.栅格系统中的列是通过指定1到12的值来表示其跨越的范围

4.如果一行（row)中包含了的列（column）大于12，多余的列所在的元素将被视为一个整体另起一行排列。

5.栅格参数：

​ .col-xs- 超小屏幕 （手机）

​ .col-sm- 小屏幕（平板）

​ .col-md- 中等屏幕（桌面显示器）

​ .col-lg- 大屏幕（大桌面显示器）

6.列偏移

​ .col-md-offset-* : 类可以将列向右偏移

7.删除网格间距：

​ .row-no-gutters

8.流式容器下的网格（container-fluid）：栅格宽度为100%
9.栅格系统的展示：

<div class="row bg-success row-no-gutters">
   <div class="col-md-2">世界</div>
   <div class="col-md-2">年后</div>
   <div class="col-md-2">你好</div>
   <div class="col-md-2">很好</div>
   <div class="col-md-2">不错</div>
   <div class="col-md-2">挺好</div>
</div>

展示效果：