文章目录
第一次学习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>