Bootstrap4 创建一个网页

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

在学习之前我们可以先看下效果

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
>

尝试一下 »

分享标题：创新互联Bootstrap4教程：Bootstrap4创建一个网页
转载来源：http://www.shufengxianlan.com/qtweb/news1/372601.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联