Bootstrap学习笔记01

自用学习笔记

作者 _Nomo 日期 2016-04-02
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-boxborder-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项目主页


分享到: