Bootstrap4 創(chuàng)建一個(gè)網(wǎng)頁

接下來我們通過 Bootstrap4 來創(chuàng)建一個(gè)簡(jiǎn)單的響應(yīng)式網(wǎng)頁。

在學(xué)習(xí)之前我們可以先看下效果

HTML 代碼

<
div

class
=
"
jumbotron text-center
"

style
=
"
margin-bottom:0
"
>

<
h1
>
我的第一個(gè) Bootstrap 4 頁面
h1
>

<
p
>
重置瀏覽器窗口大小查看效果！
p
>

div
>

<
nav

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

<
a

class
=
"
navbar-brand
"

href
=
"
#
"
>
導(dǎo)航
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
>
關(guān)于我
h2
>

<
h5
>
我的照片:
h5
>

<
div

class
=
"
fakeimg
"
>
這邊插入圖像
div
>

<
p
>
關(guān)于我的介紹..
p
>

<
h3
>
一些鏈接
h3
>

<
p
>
說明文本
p
>

<
ul

class
=
"
nav nav-pills flex-column
"
>

<
li

class
=
"
nav-item
"
>

<
a

class
=
"
nav-link active
"

href
=
"
#
"
>
激活狀態(tài)
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
>
標(biāo)題
h2
>

<
h5
>
副標(biāo)題
h5
>

<
div

class
=
"
fakeimg
"
>
圖像
div
>

<
p
>
一些文本..
p
>

<
p
>
菜鳥教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想?。。〔锁B教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想?。?！菜鳥教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想?。?！
p
>

<
br
>

<
h2
>
標(biāo)題
h2
>

<
h5
>
副標(biāo)題
h5
>

<
div

class
=
"
fakeimg
"
>
圖像
div
>

<
p
>
一些文本..
p
>

<
p
>
菜鳥教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想！??！菜鳥教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想?。?！菜鳥教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想！??！
p
>

div
>

div
>

div
>

<
div

class
=
"
jumbotron text-center
"

style
=
"
margin-bottom:0
"
>

<
p
>
底部?jī)?nèi)容
p
>

div
>

嘗試一下 ?

當(dāng)前題目：創(chuàng)新互聯(lián)Bootstrap4教程：Bootstrap4創(chuàng)建一個(gè)網(wǎng)頁
標(biāo)題路徑：http://www.dlmjj.cn/article/coihsod.html