Bootstrap学习笔记01

自用学习笔记

作者 _Nomo 日期 2016-04-02
前端技术 Bootstrap CSS
Bootstrap学习笔记01

Bootstrap来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。它由Twitter的工程师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。

起步

下载模板文件

点击下载文件 Bootstrap模板。

  • 下载压缩包之后，将其解压缩到任意目录即可看到以下（压缩版的）目录结构： 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

基础模板

  • 拷贝并粘贴下面给出的 HTML 代码，这就是一个最简单的 Bootstrap 页面了。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!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">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for 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="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//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="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

引入Bootlint

Bootlint：是Bootstrap官方提供的一个HTML/CSS检查工具(js编写的)，可以检查出使用bootstrap.css的页面中常见的HTML和CSS样式方面的错误。

  • 使用方法,引入JS文件后加入以下代码：
1
2
3
4
5
6
7
8
(function () {
        var s = document.createElement("script");
        s.onload = function () {
            bootlint.showLintReportForCurrentDocument([]);
        };
        s.src = "js/bootlint.js";
        document.body.appendChild(s)
})();

基础全局CSS样式

Bootstrap中的CSS Reset

Bootstrap改变了所有元素的盒模型设置，改为 border-box 。值得注意的是需要区分 content-box 和 border-box ：
1) box-sizing: content-box; （默认值）
盒子总宽=margin+border+padding+width(content)
2) box-sizing: border-box;
盒子总宽=margin+width(包含border/padding/content)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
* {  box-sizing: border-box;  }
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;		/*改用更好看的字体*/
  font-size: 14px;				/*改变全局字体大小*/
  line-height: 1.42857143;
  color: #333;					/*字体颜色改为深灰色*/
  background-color: #fff;
  margin: 0;					/*去掉浏览器默认margin*/
}
h1, .h1 {
  font-size: 36px;				/*h1~6属性的字体大小与margin*/
}
h1, .h1, h2, .h2, h3, .h3 {
  margin-top: 20px;
  margin-bottom: 10px;
}
h4, .h4, h5, .h5, h6, .h6 {			/*h1~6属性的字体大小与margin*/
  margin-top: 10px;
  margin-bottom: 10px;
}
p { margin-bottom: 10px; }			/*去掉P元素的下margin*/
a { color: #337ab7; text-decoration:none; background: transparent; }	/*更改a元素的字体颜色，下划线和背景颜色*/
a:hover { color: #23527c; text-decoration:underline; }			/*修改a元素的hover样式*/
img { border: 0;  vertical-aling: middle}				/*图片周围文字的垂直居中*/
table { border-spacing:0; border-collapse: collapsed; }			/*修改table中的border相关样式*/
ul { margin-top: 0; margin-bottom:10px; }

全局CSS样式——按钮

三种形式的按钮： button input a
按钮基础class： .btn
白底黑字按钮class： .btn-default
五种常用色： .btn-danger / warning / success / info / primary
四种大小： btn-lg / 默认(md) / sm / xs
块级按钮： btn-block

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>

全局CSS样式——图片

圆角图片： .img-rounded
圆形图片： .img-circle
缩略图片： .img-thumbnail
响应式图片：.img-responsive { display: block; max-width:100%; height: auto; }

1
2
3
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

全局CSS样式——文本样式

文本颜色： .text-danger/warning/success/info/primary
背景颜色： .bg-danger/warning/success/info/primary
文本对齐： .text-left/right/center/justify
文本改变大小写： .text-uppercase/lowercase/capitalize

1
2
3
4
5
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

全局CSS样式——列表样式

不带圆饼/数字提示符的列表： .list-unstyled
水平列表: .list-inline

1
2
3
<ul class="list-inline">
  <li>...</li>
</ul>

全局CSS样式——表格

注意：HTML5规定：TABLE中必须声明tbody、thead、tfoot！即TABLE不能直接放TR！
.table 创建一个100%宽度的表格
.table-bordered 表格边框
.table-striped 条状/隔行变色表格
.table-hover 鼠标悬停效果的表格
.table-responsive 响应式表格，注意：该class不能用于table，而用于table的父容器div上。

1
2
3
<table class="table table-striped">
  ...
</table>

全局CSS样式——栅格布局系统

(1)栅格系统中的容器

栅格系统中的内容必须放在“容器”元素中，且有“行”和“列”的概念，结构如下：

1
2
3
4
5
<div class="container">				<!--<table>-->
	<div class="row">			<!--<tr>-->
		<div class="col-*-*"></div>	<!--<td>-->
	</div>
</div>

(2)Bootstrap两种容器

有 .container , .container-fluid (100%宽) 两种容器;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/*.container: 定宽容器，一般用于最外层*/ 
     lg-1170px      md-970px      
     sm-750px      xs-100%
.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
/*.container-fluid: 变宽容器，一般用于内层容器*/
.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
}
/*上述两个容器都有前置和后置内容生成：可以放置子元素的margin越界，以及清除子元素浮动对父元素及后续元素造成的影响。*/

(3)col的四大家族

.col-lg 用于大PC屏幕的列
.col-md 用于中等PC屏幕列
.col-sm 用于中等平板屏幕列
.col-xs 用于中等手机屏幕列
一行中默认等分为12列，每个.col必须指定自己的宽度占比
.col-lg-1/2/3/4.../12 , .col-md-1/2/3/4.../12 , .col-sm-1/2/3/4.../12 , .col-xs-1/2/3/4.../12

注意：一个div可以指定多个col-值——响应式列宽

  • Bootstrap中默认把浏览器屏幕根据宽度分为四种：
    (1)超大PC显示器(width>=1200px) —— lg (large)
    (2)普通PC显示器(1200px>width>=992px) —— md (medium)
    (3)平板显示器(991px>width>=768px) —— sm (small)
    (4)手机显示器(width<768px) —— xs (extra small)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!-- 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>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

(4)向右的偏移量(offset)

可用于在两col间添加大块的空白，或者让col右错实现居中效果
col-lg-offset-1/../12 在LG屏幕下实现列偏移
col-md-offset-1/../12 在MD/LG屏幕下实现列偏移
col-sm-offset-1/../12 在SM/MD/LG屏幕下实现列偏移
col-xs-offset-1/../12 在XS/SM/MD/LG屏幕下实现列偏移

1
2
3
4
5
6
7
8
9
10
11
<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>

(5)指定某种屏幕下隐藏

.hidden-lg 只在LG屏幕下有效
.hidden-md 只在MD屏幕下有效
.hidden-sm 只在SM屏幕下有效
.hidden-xs 只在XS屏幕下有效

(6)栅格系统的嵌套

为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。

1
2
3
4
5
6
7
8
9
<div class="container/container-fluid">
   <div class="row">
       <div class="col-*-*">
           <div class="row">
	       <div class="col-*-*"></div>
	   </div>
       </div>
   </div>
</div>

本次重要难点在与Bootstrap的栅格系统，它是实现响应式设计的关键所在，而且嵌套的比较复杂。
友情链接：Bootstrap项目主页。

分享到：
标签
前端技术 Bootstrap CSS
友情链接