首页 > 代码库 > bootstrap 学习总结

bootstrap 学习总结

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。当前最新版本是3.2.0;

使用的第一步,可以直接复制官方的模版,另存为index.html. 这一过程相当于是搭好一个框架,像我们使用yii需要引入它的框架文件一样。

模板是这个样子的:

<!DOCTYPE html><html lang="zh-cn">  <head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>Bootstrap 101 Template</title>    <!-- Bootstrap -->    <link href="http://www.mamicode.com/css/bootstrap.min.css" rel="stylesheet">    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->    <!-- WARNING: Respond.js doesn‘t work if you view the page via file:// -->    <!--[if lt IE 9]>      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>    <![endif]-->  </head>  <body>    <h1>你好,世界!</h1>    <!-- jQuery (necessary for Bootstrap‘s JavaScript plugins) -->    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>    <!-- Include all compiled plugins (below), or include individual files as needed -->    <script src="http://www.mamicode.com/js/bootstrap.min.js"></script>  </body></html>

如果只是初步的学习,其实可以只引入“bootstrap.min.css”这一个就可以了。其它文件都可以看成是功能的扩展和增强。

说到bootstrap,首先要了解的是它的栅格系统。这让我不禁想起了用表格布局的年代,但是这个栅格和表格还是有很大的不同的。

要用珊格系统呢,首先要创建一个容器,container或container-fluid.

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

<div class="container-fluid">  ...</div>

  

 这相当于是创建一个<table></table>,所以接下来,要创建行和列也是情理之中的啦。

 

<div class="row">      <div class="col-xs-4">col-xs-4</div>     <div class="col-xs-8">col-xs-8</div></div>

<div class="row"></div> 这个就相当于是<tr></tr>,<div class="col-xs-4"></div>就相当于是<td></td>

col-xs-4 是代表了三个意义:col表是创建的是一个列,xs表示小屏设备,4呢,表示把一行划分成12份,它占4份。它就是用这种方法来实现布局的,所以,这和表格的布局方式多少有几分相似,但是表格呢不会根据屏幕的宽度实现自动增减列数和调整列宽,栅格系统可以看成是一个更灵活的表格。

栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理:

  • “行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。
  • 通过“行(row)”在水平方向创建一组“列(column)”。
  • 你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。
  • 类似 .row 和 .col-xs-4 这种预定义的类,可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
  • 通过为“列(column)”设置 padding 属性,从而创建列与列之间的间隔(gutter)。通过为 .row 元素设置负值margin 从而抵消掉为 .container 元素设置的 padding,也就间接为“行(row)”所包含的“列(column)”抵消掉了padding
  • The negative margin is why the examples below are outdented. It‘s so that content within grid columns is lined up with non-grid content.
  • Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.
  • 如果一“行(row)”中包含了的“列(column)”大于 12,多余的“列(column)”所在的元素将被作为一个整体另起一行排列。

栅格参数

通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

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

 
 
将最外面的布局元素 .container 修改为 .container-fluid,就可以将固定宽度的栅格布局转换为 100% 宽度的布局。
是否不希望在小屏幕设备上所有列都堆叠在一起?那就使用针对超小屏幕和中等屏幕设备所定义的类吧,即 .col-xs-*和 .col-md-*。请看下面的实例,研究一下这些是如何工作的。
<!-- Stack the columns on mobile by making one full-width and the other half-width --><div class="row">  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div></div>

通过观察css样式,可以发现,如果在class中写了多个不同类型的col,那么bootstrap会自动匹配当前屏莫的宽度,来选择最适合的col类型。通过观察css可以发现,
@media (max-width: @screen-xs-max) { ... }@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }@media (min-width: @screen-lg-min) { ... }
原来是应用了媒体查询。
关于布局,还有一个知识点,那就是列偏移。

列偏移

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

学会用bootstrap的第一步呢,就是要撑握它的栅格布局。

bootstrap 学习总结