Bootstrap简介、下载bootstrap及引入文件说明、响应式容器和满屏容器、栅格系统
作者：互联网
Bootstrap简介：
Bootstrap是Twitter（推特）开发的，目前最受欢迎的前端开源框架，基于jQuery用于开发HTML、CSS、JavaScript，简洁灵活，常用于开发响应式布局及移动端开发。其中文官方文档：http://www.bootcss.com 官网：http://getbootstrap.com 推荐网站：http://bootstrap.css88.com
下载bootstrap：
拿到bootstrap文件包的方式有很多种，例如：官网下载、npm(后面介绍完node可以使用npm中：npm install bootstrap@4.0.0-beta.2直接download下来4.0版本)、使用在线文档连接等。考虑到某些读者可能没接触到node，这里小编通过官方下载bootstrap来介绍：访问官方网址：http://getbootstrap.com，点击右上角Download选择对应的版本继续点击编译好的（Compiled CSS and JS）bootstrap下载，这里小编采用bootstrap4进行简介，bootstrap4放弃了IE8及iOS6，目前仅支持IE9+及iOS7+，实际开发中需要注意这点。
编译后的bootstrap文件目录结构如下：（只需要拿需要的文件即可）
bootstrap/
├── css/
│ ├── bootstrap-grid.css
│ ├── bootstrap-grid.css.map
│ ├── bootstrap-grid.min.css
│ ├── bootstrap-grid.min.css.map
│ ├── bootstrap-reboot.css
│ ├── bootstrap-reboot.css.map
│ ├── bootstrap-reboot.min.css
│ ├── bootstrap-reboot.min.css.map
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ └── bootstrap.min.css.map
└── js/
├── bootstrap.bundle.js
├── bootstrap.bundle.js.map
├── bootstrap.bundle.min.js
├── bootstrap.bundle.min.js.map
├── bootstrap.js
├── bootstrap.js.map
├── bootstrap.min.js
└── bootstrap.min.js.map
引入资源：
需要注意：bootstrap基于jQuery，但是下拉菜单（dropdown）、弹出框（popover）和工具提示（tooltip）组件依赖Popper(https://popper.js.org/) 开发，bootstrap文件分css文件和js文件，如果只需要样式，可以不需要引入js文件，如：
<!--将bootstrap文件及依赖文件引入到head靠前位置，便于自己样式层叠-->
<link rel="stylesheet" href="lib/bootstrap/bootstrap.css">
<!-- 条件注释，第一个是解决html5新标签兼容性的，第二个是解决css媒体查询兼容问题的，且此依赖不能以files方式打开使用-->
<!--[if lt IE 9]>
<script src="lib/html5shiv/html5shiv.js"></script>
<script src="lib/respond/respond.js"></script>
<![endif]-->
<script src="lib/jquery/jquery.js"></script><!-- 引入jQuer依赖（bootstrap依赖jQuery库） -->
<script src="lib/popper/popper.js"></script><!-- 用于弹窗、提示、下拉菜单时引入此依赖，但是目前的 bootstrap.bundle.js已经包含了/popper.js，自己判断版本自行增删 -->
<script src="lib/bootstrap/bootstrap.js"></script><!-- 引入bootstrap.js文件-->
基本结构说明：
<!-- 1.bootstrap要求使用HTML5文档类型，现在最新html5声明如下（可以简写为html）： -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 通常网页开发都会声明编码-->
<!-- 2.bootstrap常用于移动端开发，如果是移动端开发，记得开启视口，其标准视口书写如下(新增自动适应手机屏幕宽度属性：shrink-to-fit=no，解决iOS9兼容问题)： -->
<meta name="viewport" content="width=device-width, initial-scale=1.0，user-scalable=no，maximum-scale=1.0,minimum-scale=1.0,shrink-to-fit=no">
<!-- 3.引入jQuery插件，因为bootstrap是基于jQuery开发的： -->
<scrip src="lib/jquery.js"></scrip>
<!-- 4.如果需要做弹窗、提示、下拉菜单等功能，引入如下依赖： -->
<scrip src="lib/bootstrap/js/bootstrap.bundle.js"></scrip>
<!-- 5.引入bootstrap中参样式文件： -->
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
<!-- 6.如果需要使用bootstrap中行为，引入bootstrap中js文件: -->
<script src="lib/bootstrap/js/bootstrap.js"></script>
<!-- 7.条件注释，第一个是解决html5新标签兼容性的插件，第二个是解决css媒体查询兼容问题的，且此依赖不能以files方式打开文件-->
<!--[if lt IE 9]>
<script src="lib/html5shiv/html5shiv.js"></script>
<script src="lib/respond/respond.js"></script>
<![endif]-->
<!-- 8.引入自己编写的css文件层叠掉bootstrap中不符合的样式: -->
<link rel="stylesheet" href="test.css">
<title>Document</title>
</head>
<body>
<div class='container'>配置好此模板，在这里就可以使用bootstrap了</div>
</body>
</html>
使用bootstrap中功能：
bootstrap中的功能使用起来很简单，如果是给自己编写的html骨架添加功能，只需要添加bootstrap中定义好有功能的类名即可，如果需要使用某个定义好的功能块，那么直接将案例代码拷贝到自己的代码中即可。下面将介绍实际开发中常用的功能：
响应式容器：
<!-- container:定义一个响应式容器，使有此类名的容器在不同尺寸设备下显示不同的尺寸，且水平居中，当小于570px时不再做变小 -->
<div class='container'></div>
满屏容器：
<!-- container-fluid:定义一个占据全部视口的容器，无论设备屏幕尺寸多大，总是100%占据视口宽度 -->
<div class='container-fluid'></div>
栅格系统：
默认把页面内容分成12等份（当然自己可以定制份数），由行和列组合的布局页面,网格状布局，在一个响应式容器中定义行和列。由类名row定义栅格系统的行，由col-x-n定义栅格系统的列。col-x-n中n表示所占栅格12份中的几份，x参数:（xl屏幕尺寸大于1200px）其他如下：
栅格嵌套：每个栅格中是可以嵌套其它栅格的，就像div一样，可以相互嵌套。
栅格偏移：col-(lg/md/sm/xs)-offset-n,给某个栅格添加此类可以使这个栅格向后偏移n份。
栅格排序：col-(lg/md/sm/xs)-push/pull-n,将某个栅格push推后几份或将某个栅格pull拉前几份。
<div class="container"><!--1.栅格系统要放在固定宽度或全屏容器中，实际开发中会利用bootstrap的响应式容器（媒体查询原理固定的尺寸）-->
<div class="row"><!--row定义行-->
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">1</div><!--col定义列，其中xs-12表示当在bootstrap中定义的xs屏幕时，此列占一行中的12份，即一行占满；lg-2表示当在bootstrap中定义的尺寸为lg时，此时这列占一行中的2份，即2/12-->
<!--栅格嵌套开始：-->
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
<div class="row"><!--在一个col中可以继续嵌套row行，row行中可以继续划分列，如：-->
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">栅格嵌套a</div>
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">栅格嵌套b</div>
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">栅格嵌套c</div>
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">栅格嵌套d</div>
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">栅格嵌套e</div>
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">栅格嵌套w</div>
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">3</div>
<!-- 栅格偏移col-x-offset-n：n表示这列向右偏移n份 -->
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
<div class="row">
<div class="col-lg-4 col-md-3 col-sm-2 col-xs-1">栅格偏移</div>
<div class="col-lg-4 col-lg-offset-4 col-md-3 col-md-offset-6 col-sm-2 col-sm-offset-8 col-xs-1 col-xs-offset-10">栅格偏移</div><!--col-lg-offset-4表示在lg尺寸下向右偏移4份-->
</div>
</div>
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">5</div>
<!-- 栅格排序push推、pull拉 -->
<div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">
<div class="row arr">
<div class="col-lg-6 col-lg-push-6 col-md-6 col-md-push-6 col-sm-6 col-sm-push-6 col-xs-6 col-xs-push-6">栅格排序-左边</div>
<div class="col-lg-6 col-lg-pull-6 col-md-6 col-md-pull-6 col-sm-6 col-sm-pull-6 col-xs-6 col-xs-pull-6">栅格排序-右边</div>
</div>
</div>
</div>
</div>
提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者删除。
笔者：苦海
标签：容器,min,bootstrap,满屏,js,栅格,map,css 来源： https://blog.csdn.net/weixin_46758988/article/details/116803460