BootStrap回顾-网格系统

文章目录

一、什么是BootStrap
二、BootStrap的特性是什么
三、获取BootStrap
五、BootStrap的基本使用模板(使用时将网络资源改为本地资源即可)
六、网格系统
七、列偏移

第一次学习bootstrap是在八个月前了，不禁感叹时间飞逝，虽然一直都有接触bootstrap，但是对其中许多的技术细节都已经忘记了，一直以来也都是复制粘贴完事，几乎没有再自己造过“轮子”，这篇文章用于回顾bootstrap框架的相关知识，毕竟作为一个后台开发者来说，bootstrap也是必须熟练使用的啊！

一、什么是BootStrap

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。

二、BootStrap的特性是什么

1、移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
2、浏览器支持：所有的主流浏览器都支持 Bootstrap。
3、响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
4、它包含了功能强大的内置组件，易于定制。

三、获取BootStrap

在bootstrap官网即可下载bootstrap套件，解压后的结构如下:
在这里插入图片描述

如果您下载了 Bootstrap 源代码，那么文件结构将如下所示：
在这里插入图片描述

less/、js/ 和 fonts/ 下的文件分别是 Bootstrap CSS、JS 和图标字体的源代码。
ldist/ 文件夹包含了上面预编译下载部分中所列的文件和文件夹。
ldocs-assets/、examples/ 和所有的 *.html 文件是 Bootstrap 文档

五、BootStrap的基本使用模板(使用时将网络资源改为本地资源即可)


<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap 模板</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- 可选的Bootstrap主题文件（一般不使用） -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script>
   </head>
   <body>
      <h1>Hello, world!</h1>
 

      <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </body>
</html>

六、网格系统

BootStrap的一大特色是响应式布局，BootStrap规定，一行被划分为十二列,如图
在这里插入图片描述
Bootstrap 网格的基本结构：

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

下表总结了 Bootstrap 网格系统如何跨多个设备工作：

	超小设备手机（<768px）	小型设备平板电脑（≥768px）	中型设备台式电脑（≥992px）	大型设备台式电脑（≥1200px）
网格行为	一直是水平的	以折叠开始，断点以上是水平的	以折叠开始，断点以上是水平的	以折叠开始，断点以上是水平的
最大容器宽度	None (auto)	750px	970px	1170px
Class 前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列数量和	12	12	12	12
最大列宽	Auto	60px	78px	95px
间隙宽度	30px （一个列的每边分别 15px）	30px （一个列的每边分别 15px）	30px （一个列的每边分别 15px）	30px （一个列的每边分别 15px）
可嵌套	Yes	Yes	Yes	Yes
偏移量	Yes	Yes	Yes	Yes
列排序	Yes	Yes	Yes	Yes

七、列偏移

偏移是一个用于更专业的布局的有用功能。它们可用来给列腾出更多的空间。例如，.col-xs-* 类不支持偏移，但是它们可以简单地通过使用一个空的单元格来实现该效果,这时要使用到 .col-md-offset-* 类，这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。如下面代码，将col-md-6的左边添加3列，即让其居中了。


<div class="container">
    <h1>Hello, world!</h1>
    <div class="row" >
        <div class="col-md-6 col-md-offset-3" 
        style="background-color: #dedef8;box-shadow: 
        inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing 
            elit.
            </p>
        </div>
    </div>
</div>