Bootstrap布局及网站实例

Bootstrap,讲道理,写很少代码就能布局一个非常漂亮的页面。关键是移动为先的理念,想想都很赞!Ps:想想苦逼的写iOS/Android界面的同学,这东西简直不能再好。本文主要写栅格系统,布局及应用,至于控件,要用的时候去官网文档看实例最好。


Bootstrap中的布局

首先找到个web端的编辑工具。http://www.bootcss.com/p/layoutit/ 或者 http://www.layoutit.com/build

还有官网的几个经典案例。http://caibaojian.com/bootstrap/getting-started.html#examples

栅格系统(网格系统)

什么是Grid System? 系统随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。

网格系统需要注意的:

  1. 行必须放置在 .container class 内,以便获得适当的对齐(alignment)和内边距(padding)。
  2. 使用行来创建列的水平组。
  3. 内容应该放置在列内,且唯有列可以是行的直接子元素。

下面一张图列出了在什么样的屏幕下用什么前缀的gird。

demo 1:水平排列。

在大屏幕上12分为1列4个, 在小屏上2列各2个。(可以通过调整浏览器宽口大小来观察变化)

1
2
3
4
5
6
7
8
<div class="container">
<div class="row">
<div class="col-xs-6 col-sm-3">111111</div>
<div class="col-xs-6 col-sm-3">222222</div>
<div class="col-xs-6 col-sm-3">333333</div>
<div class="col-xs-6 col-sm-3">444444</div>
</div>
</div>

demo2:偏移列。

通俗的意思就是隔开几列。(调整浏览器宽口大小,会发现窗口很小时是靠最左边的。当拖动到一定大小后,会变得靠右一点)

1
2
3
4
5
<div class="container">
<div class="row">
<div class="col-md-offset-3">1111111111111111111111111111111</div>
</div>
</div>

demo3:嵌套列。

就是列中嵌套其他列。为了在内容中嵌套默认的网格,请添加一个新的.row。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-4">111111</div>
<div class="col-md-4">222222</div>
<div class="col-md-4">333333</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-6">111111</div>
<div class="col-md-6">222222</div>
</div>
<div class="row">
<div class="col-md-6">111111</div>
<div class="col-md-6">222222</div>
</div>
</div>
</div>
</div>

demo4:列排序。

意思就是你编写的顺序并不代表你显示的顺序。你可以push右推, pull左边拉过来。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="container">
<div class="row">
<p>排序前</p>
<div class="col-md-4">我在左边</div>
<div class="col-md-8">我在右边</div>
</div>
<div class="row">
<p>排序后</p>
<div class="col-md-4 col-md-push-8">我在左边</div>
<div class="col-md-8 col-md-pull-4">我在右边</div>
</div>
</div>

固定布局

就是不缩放。如果您想要创建基于固定像素数的网页。直接用container。(也可以变为响应式)

1
2
3
<div class="container">
...
</div>

流式布局

流布局是一种适应屏幕的做法。即不固定块的宽度,而是采用百分比作为单位来确定每一块的宽度。这种布局非常适应各种不同大小的屏幕。

1
2
3
4
5
6
7
8
9
10
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
</div>
<div class="span10">
<!--Body content-->
</div>
</div>
</div>

基本网站布局实例

在Bootstrap文档中有一个名为carousel的example,算是里面最复杂的一个。以下列一些构建该网页的基本框架,注意点供大家参考,有兴趣的可以自己写写。http://caibaojian.com/bootstrap/examples/carousel.html

主要结构分析

  1. 最上部navbar
  2. 滑动控件(官网上有直接demo, 这个代码固定)
  3. 主体部分: 头部3个等分的一行,及下部3个交错的列,最后是footer

以下参考了源代码,主要是写页面结构。

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!--包裹navbar-->
<div class="myNavbar-wrapper">
<!--这个container能使nav不全屏-->
<div class="container">
<nav class="navbar navbar-inverse navbar-static-top">
<!--标题-->
<div class="navbar-header">
<a class="navbar-brand" href="#">Project name</a>
</div>
<!--列表-->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">菜单</a></li>
</ul>
</div>
</nav>
</div>
</div>
<!--------------固定的滑动展示模块----------------->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="images/slide-01.jpg" alt="First slide">
<div class="container">
<div class="carousel-caption">
<h1>Example headline.</h1>
<p>。。。</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
</div>
</div>
</div>
<div class="item">
<img class="second-slide" src="images/slide-02.jpg" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p>。。。</p>
<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--主体部分布局, 包括底部-->
<div class="marketing container">
<div class="row">
<div class="col-lg-4">
<img class="img-circle" src="images/blank.png" width="140" height="140" alt="placeholder">
<h2>blog.xigulu.com</h2>
<p>xn4545945 xn4545945</p>
<p><a class="btn btn-default" href="#">查看更多...</a></p>
</div>
<div class="col-lg-4">
<img class="img-circle" src="images/blank.png" width="140" height="140" alt="placeholder">
<h2>blog.xigulu.com</h2>
<p>xn4545945 xn4545945 xn4545945</p>
<p><a class="btn btn-default" href="#" role="button">查看更多...</a></p>
</div>
<div class="col-lg-4">
<img class="img-circle" src="images/blank.png" width="140" height="140" alt="placeholder">
<h2>blog.xigulu.com</h2>
<p>xn4545945 xn4545945 xn4545945 xn4545945</p>
<p><a class="btn btn-default" href="#">查看更多...</a></p>
</div>
</div>
<!--分割线-->
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-7 featurette-heading">
<h2>这个Chrome浏览器</h2>
<p class="lead">这个Chrome浏览器这个Chrome浏览器</p>
</div>
<div class="col-md-5">
<img src="images/browser-icon-chrome.png" alt="chrome!!">
</div>
</div>
<!--分割线-->
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-5">
<img src="images/browser-icon-firefox.png" alt="Firefox">
</div>
<div class="col-md-7 featurette-heading" >
<h2>这是火狐浏览器!</h2>
<p class="lead">这是火狐浏览器!这是火狐浏览器!</p>
</div>
</div>
<!--分割线-->
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-7 featurette-heading">
<h2>这是Safari浏览器</h2>
<p class="lead">这是Safari浏览器这是Safari浏览器</p>
</div>
<div class="col-md-5">
<img src="images/browser-icon-safari.png" alt="Safari">
</div>
</div>
<!--底部-->
<hr class="featurette-divider">
<footer>
<p class="pull-right"><a href="#">返回顶部</a></p>
<p>&copy; 2016 xn545945. &middot; <a href="#">隐私</a> &middot; <a href="#">关于</a> </p>
</footer>
</div>

基本结构就是这样。当然还有部分CSS代码。只设定了几个主要的。

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<style>
body{
padding-bottom: 40px;
color: #5a5a5a;
}
/*navbar下移*/
.myNavbar-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 10;
margin-top: 20px;
margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
}
/* marketing------------------------- */
.marketing .col-lg-4 {
margin-bottom: 20px;
text-align: center;
}
.marketing h2 {
font-weight: normal;
}
.marketing .col-lg-4 p {
margin-right: 10px;
margin-left: 10px;
}
/* Featurettes------------------------- */
.featurette-divider {
margin: 80px 0; /* Space out the Bootstrap <hr> more */
}
/* Thin out the marketing headings */
.featurette-heading {
font-weight: 300;
line-height: 1;
letter-spacing: -1px;
}
</style>

引入CDN

注意: 当用本地文件方式引入Bootstrap时, 左右图片滑动模块是不能显示完全的。因此用引入CDN。

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">

<!-- 可选的Bootstrap主题文件(一般不使用) -->
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap-theme.min.css"></script>

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

结语 + 代码

Bootstrap好东西啊! 附上前面实例的代码。点我下载

转载请注明出处,有疑问欢迎留言!