Bootstrap4 创建一个网页

接下来我们通过 Bootstrap4 来创建一个简单的响应式网页。

在学习之前我们可以先看下效果：https://www.idc.net/try/demo_source/bootstrap3-makewebsite.htm

HTML 代码

<
div

class
=
"
jumbotron text-center
"

style
=
"
margin-bottom:0
"
>

<
h1
>
我的第一个 Bootstrap 4 页面
</
h1
>

<
p
>
重置浏览器窗口大小查看效果！
</
p
>

</
div
>

<
nav

class
=
"
navbar navbar-expand-sm bg-dark navbar-dark
"
>

<
a

class
=
"
navbar-brand
"

href
=
"
#
"
>
导航
</
a
>

<
button

class
=
"
navbar-toggler
"

type
=
"
button
"

data-toggle
=
"
collapse
"

data-target
=
"
#collapsibleNavbar
"
>

<
span

class
=
"
navbar-toggler-icon
"
>
</
span
>

</
button
>

<
div

class
=
"
collapse navbar-collapse
"

id
=
"
collapsibleNavbar
"
>

<
ul

class
=
"
navbar-nav
"
>

<
li

class
=
"
nav-item
"
>

<
a

class
=
"
nav-link
"

href
=
"
#
"
>
链接
</
a
>

</
li
>

<
li

class
=
"
nav-item
"
>

<
a

class
=
"
nav-link
"

href
=
"
#
"
>
链接
</
a
>

</
li
>

<
li

class
=
"
nav-item
"
>

<
a

class
=
"
nav-link
"

href
=
"
#
"
>
链接
</
a
>

</
li
>

</
ul
>

</
div
>

</
nav
>

<
div

class
=
"
container
"

style
=
"
margin-top:30px
"
>

<
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 flex-column
"
>

<
li

class
=
"
nav-item
"
>

<
a

class
=
"
nav-link active
"

href
=
"
#
"
>
激活状态
</
a
>

</
li
>

<
li

class
=
"
nav-item
"
>

<
a

class
=
"
nav-link
"

href
=
"
#
"
>
链接
</
a
>

</
li
>

<
li

class
=
"
nav-item
"
>

<
a

class
=
"
nav-link
"

href
=
"
#
"
>
链接
</
a
>

</
li
>

<
li

class
=
"
nav-item
"
>

<
a

class
=
"
nav-link disabled
"

href
=
"
#
"
>
禁用
</
a
>

</
li
>

</
ul
>

<
hr

class
=
"
d-sm-none
"
>

</
div
>

<
div

class
=
"
col-sm-8
"
>

<
h2
>
标题
</
h2
>

<
h5
>
副标题
</
h5
>

<
div

class
=
"
fakeimg
"
>
图像
</
div
>

<
p
>
一些文本..
</
p
>

<
p
>
菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！
</
p
>

<
br
>

<
h2
>
标题
</
h2
>

<
h5
>
副标题
</
h5
>

<
div

class
=
"
fakeimg
"
>
图像
</
div
>

<
p
>
一些文本..
</
p
>

<
p
>
菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！
</
p
>

</
div
>

</
div
>

</
div
>

<
div

class
=
"
jumbotron text-center
"

style
=
"
margin-bottom:0
"
>

<
p
>
底部内容
</
p
>

</
div
>

尝试一下 »