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

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

在學習之前我們可以先看下效果

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
=
"
#
"
>
激活狀態(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
>
標題
h2
>

<
h5
>
副標題
h5
>

<
div

class
=
"
fakeimg
"
>
圖像
div
>

<
p
>
一些文本..
p
>

<
p
>
菜鳥教程，學的不僅是技術，更是夢想?。?！菜鳥教程，學的不僅是技術，更是夢想?。?！菜鳥教程，學的不僅是技術，更是夢想?。?！
p
>

<
br
>

<
h2
>
標題
h2
>

<
h5
>
副標題
h5
>

<
div

class
=
"
fakeimg
"
>
圖像
div
>

<
p
>
一些文本..
p
>

<
p
>
菜鳥教程，學的不僅是技術，更是夢想?。。〔锁B教程，學的不僅是技術，更是夢想?。。〔锁B教程，學的不僅是技術，更是夢想！??！
p
>

div
>

div
>

div
>

<
div

class
=
"
jumbotron text-center
"

style
=
"
margin-bottom:0
"
>

<
p
>
底部內容
p
>

div
>

嘗試一下 ?

新聞標題：創(chuàng)新互聯(lián)Bootstrap4教程：Bootstrap4創(chuàng)建一個網(wǎng)頁
分享地址：http://m.5511xx.com/article/coihsod.html