Bootstrap 的简单使用-栅格系统

作者: 屋檐下的燕雀 | 来源:发表于2017-08-27 22:35 被阅读195次

bootstrap栅格系统分析
Bootstrap 的简单使用-栅格系统
栅格化系统在设计中的运用
Bootstrap响应式栅格布局实现方法
bootstrap栅格化系统
第二谈：布局系统
媒体查询、栅格系统
some useful links
2018-06-09
bootstrap学习笔记(四)栅格系统

写在前面

最近在学习了写前端页面，其中使用了 Bootstrap 的前端框架，感觉非常好用。
Bootstrap 来自 Twitter ，是目前很受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。Bootstrap 是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用其提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速法开发出原型或者构建整个 app。Bootstrap 写出来的界面简介，使用方便，兼容大部分的 JQuery 插件。并且 Boostrap 是 gitHub 上的开源项目，可以获取它的源码。
这里附上中文官网地址：http://www.bootcss.com/
英文官网地址则是：https://getbootstrap.com/
Boostrap 目前最新版本是 Boostrap3 v3.3.7( Bootstrap 4 是预览版)

下载

boostrap 在官网下载即可，这里使用版本v3.3.7 >>> 传送门
下载好的文件是一个压缩包，直接解压即可。将文件复制到工程之中即可。

解压后的文件目录.PNG

之后，只需要我们在html 文件中引用他们就可以了，除此之外，Bootstrap 的所有 JavaScript 插件都依赖 jQuery，因此 jQuery 也必须在 Bootstrap 之前引入：

<!-- Bootstrap -->
<link href="./public/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="./public/jquery/jquery-3.2.1.min.js"></script>
<script src="./public/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

注：
之后，我们就可以使用 Boostrap 了。注意，Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型,所以需要在每个页面如下设置：

<!DOCTYPE html>
<html lang="zh-CN">
  ...
</html>

这里进入主题，主要介绍下 Bootstrap 中的栅格系统。

栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的 mixin 用于生成更具语义的布局。
先看下示例：


效果图-平板.png	小屏幕显示.png

代码如下：

<style type="text/css" media="screen">
    .container,.container-fluid{
        border-top: 2px solid #E1E1E8;
    }
    div{
        border-left: 1px solid #E1E1E8;
        border-right: 1px solid #E1E1E8;
        border-bottom: 1px solid #E1E1E8;
    }
</style>
<body>
<p>this is for test !</p>
<div class="container-fluid">
    <div class="row">
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
  </div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>
</div>
</body>

代码解析：

.如<div class="container-fluid">，<div class="row">，
<div class="">其中的 container-fluid，row，col-md-* 为 bootstrap 的预定义类，class声明这些值后，会引用 bootstrap 中设置好的属性。当然，我们也可以将他们改变成我们自己想要的样式。
行（.row）必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
通过“行（row）”在水平方向创建一组“列（column）”。
内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为“行（row）”的直接子元素。
类似 .row 和 .col-md-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
以下附录官网有关栅格系统的信息表格：

	超小屏幕手机 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面显示器 (≥992px)	大屏幕大桌面显示器 (≥1200px)
栅格系统行为	总是水平排列		开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
.container 最大宽度	None （自动）	750px	970px	1170px
类前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列（column）数	12	12	12	12
最大列（column）宽	自动	~62px	~81px	~97px
槽（gutter）宽	30px （每列左右均有 15px）	30px （每列左右均有 15px）	30px （每列左右均有 15px）	30px （每列左右均有 15px）
可嵌套	是	是	是	是
偏移（Offsets）	是	是	是	是
列排序	是	是	是	是

实例

在不同设备上显示—移动，平板电脑，桌面

代码如下：

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

效果图：


效果图-平板.png	效果图-移动.png	效果图-桌面.png

列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。
代码：

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

效果图：


效果图-列偏移-小屏幕.png	效果图-列偏移-中等屏幕.png

嵌套列

为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。


效果图-嵌套.png

列排序

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。
代码：

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

效果图：