Bootstrap 创建一个网页
接下来我们通过 Bootstrap3 来创建一个简单的响应式网页。
在学习之前我们可以先看下效果: /try/demo_source/bootstrap3-makewebsite.htm
HTML 代码
<
div
class
=
"
jumbotron text-center
"
style
=
"
margin-bottom:0
"
>
<
h1
>
我的第一个 Bootstrap 页面
</
h1
>
<
p
>
重置浏览器窗口大小查看效果!
</
p
>
</
div
>
<
nav
class
=
"
navbar navbar-inverse
"
>
<
div
class
=
"
container-fluid
"
>
<
div
class
=
"
navbar-header
"
>
<
button
type
=
"
button
"
class
=
"
navbar-toggle
"
data-toggle
=
"
collapse
"
data-target
=
"
#myNavbar
"
>
<
span
class
=
"
icon-bar
"
>
</
span
>
<
span
class
=
"
icon-bar
"
>
</
span
>
<
span
class
=
"
icon-bar
"
>
</
span
>
</
button
>
<
a
class
=
"
navbar-brand
"
href
=
"
#
"
>
网站名
</
a
>
</
div
>
<
div
class
=
"
collapse navbar-collapse
"
id
=
"
myNavbar
"
>
<
ul
class
=
"
nav navbar-nav
"
>
<
li
class
=
"
active
"
>
<
a
href
=
"
#
"
>
主页
</
a
>
</
li
>
<
li
>
<
a
href
=
"
#
"
>
页面 2
</
a
>
</
li
>
<
li
>
<
a
href
=
"
#
"
>
页面 3
</
a
>
</
li
>
</
ul
>
</
div
>
</
div
>
</
nav
>
<
div
class
=
"
container
"
>
<
div
class
=
"
row
"
>
<
div
class
=
"
col-sm-4
"
>
<
h2
>
关于我
</
h2
>
<
h5
>
我的照片:
</
h5
>
<
div
class
=
"
fakeimg
"
>
这边插入图像
</
div
>
<
p
>
关于我的介绍..
</
p
>
<
h3
>
链接
</
h3
>
<
p
>
描述文本。
</
p
>
<
ul
class
=
"
nav nav-pills nav-stacked
"
>
<
li
class
=
"
active
"
>
<
a
href
=
"
#
"
>
链接 1
</
a
>
</
li
>
<
li
>
<
a
href
=
"
#
"
>
链接 2
</
a
>
</
li
>
<
li
>
<
a
href
=
"
#
"
>
链接 3
</
a
>
</
li
>
</
ul
>
<
hr
class
=
"
hidden-sm hidden-md hidden-lg
"
>
</
div
>
<
div
class
=
"
col-sm-8
"
>
<
h2
>
标题
</
h2
>
<
h5
>
副标题
</
h5
>
<
div
class
=
"
fakeimg
"
>
图像
</
div
>
<
p
>
一些文本..
</
p
>
<
p
>
云搜索MX教程,学的不仅是技术,更是梦想!!!云搜索MX教程,学的不仅是技术,更是梦想!!!云搜索MX教程,学的不仅是技术,更是梦想!!!
</
p
>
<
br
>
<
h2
>
标题
</
h2
>
<
h5
>
副标题
</
h5
>
<
div
class
=
"
fakeimg
"
>
图像
</
div
>
<
p
>
一些文本..
</
p
>
<
p
>
云搜索MX教程,学的不仅是技术,更是梦想!!!云搜索MX教程,学的不仅是技术,更是梦想!!!云搜索MX教程,学的不仅是技术,更是梦想!!!
</
p
>
</
div
>
</
div
>
</
div
>
<
div
class
=
"
jumbotron text-center
"
style
=
"
margin-bottom:0
"
>
<
p
>
底部内容
</
p
>
</
div
>
尝试一下 »