Bootstrap項目實踐：帶有(yǒu)導航欄的(de)響應式網頁

發表時(shí)間(jiān)：2020-10-18

發布人(rén)：葵宇科(kē)技(jì)

浏覽次數(shù)：48

前言

對(duì)前端開(kāi)發不(bù)是(shì)很(hěn)熟練，之前¶✘♠ 學過html和(hé)Javascrip課程但(dàn)是(sh↓"®ì)掌握的(de)并不(bù)是(shì)很(hěn)δ$↑∏熟練，希望能(néng)夠借助Bootstrap課程鞏固前端課程±σ。

上(shàng)一(yī)篇：Bootstrap項目實踐&#ε™xff1a;Grid布局應用(yòng)

提示：以下(xià)是(shì)本篇文(wén)章(zhāng)正文(wén)內(n‌↕ $èi)容，下(xià)面案例可(kě)供參考

一(yī)、Grid布局和(hé)Flex彈性盒子(zǐ)

https://www.runoob.com/bootstrap/bootst→‍rap-grid-system.html

這(zhè)次也(yě)是(shì)用(yòng)到(dào¶α)Grid進行(xíng)整體(tǐ)布局，在局部使用‍ (yòng)Flex彈性盒子(zǐ)進行(xíng)局部布局。代碼很¥(hěn)簡單，基本一(yī)看(kàn)就(jiù)懂(dǒng)。

二、Flex彈性盒子(zǐ)展示

https://www.w3cschool.cn/css3/2h6g5xoy.html

簡單的(de)來(lái)說(shuō)，彈性盒子(zǐ)©®σ就(jiù)是(shì)使盒子(zǐ)內(nèi)的(de)內(nèi)容不(bù)∏£會(huì)超出盒子(zǐ)範圍洩露出去(qù)。根據對(duì)彈性δ←£δ盒子(zǐ)的(de)應用(yòng)我們可(kě)以在盒子(zǐ)裡(lǐ‍♣∞)面布局更好(hǎo)的(de)符合響應式開(kāi)發。

這(zhè)裡(lǐ)先展示一(yī)下(xià)盒子(zǐ)的(de)基本用(yòng↑φ$↑)法：

<!doctype html>
<html>
<head>
‍γ <meta charset="utf-8">
<met&≈a name="viewport" content✔απ="width=device-width,₹↕✔ initial-scale=1,  shrink-to-fit=₹♦&;no">
<title>彈性盒子(zǐ‍↑₩)展示</title>
<link rel=&#£↓Ω₽34;stylesheet" href="bootstrap-4.2.1-&₩±dist/css/bootstrap.css">
</hea÷σ≥d>

<body class="cont£÷  ainer">
<h3 class&#> ∏61;"mb-4">定義彈性盒子(zǐ)</±γh3>
<h4>d-flex</h4>
<div←<≠ class="d-flex p-3 φ₩bg-warning text-white">
	&l£‍×♦t;div class="p-2 b•÷★←g-primary">d-flex item 1</div>
	&l  t;div class="p-2 bg-success">d-←↓φ∞flex item 2</div>
	<div ↓δ©class="p-2 bg-danger">d-flex ite¥≠¶m 3</div>
</div&g™‍✔Ωt; 
<h4>d-inline-fle•↔x</h4>
<div class=≤§ε¥"d-inline-flex p-3 bg-warning t↑™→•ext-white ">
	<div class=←λ↑↕"p-2 bg-primary">d-flex item 1</d÷φiv>
	<div class="p-2 bg-success"∏☆>♠;>d-flex item 2</div>
	&l☆∑≠¶t;div class="p-2 bg-dange"≤♦r">d-flex item 3</div>
</di↑α£v>
<h3 class="mb-4"&g₽¥↔©t;水(shuǐ)平方向</h3>
<h4&™'gt;flex-row(從(cóng)左側開(kāi)始)&σλ∞lt;/h4>
<div class="d-flex flex-××row p-3 bg-warning text-white">
	&>αlt;div class="p-2 bg-primar©γ®y">d-flex item 1</div>
	<d∑σiv class="p-2 bg-succ ε≤ess">d-flex item 2</div>
	< δ;div class="p-2 bg-danger"&g₩♥★t;d-flex item 3</div>
</div>&l♣¶t;br/>
<h4>flex-row-reverse "(從(cóng)右側開(kāi)始)</h4>®&✘
<div class="d-flex flex-row-®↑♣reverse p-3 bg-warning text-white"‍ ←;>
	<div class="p-2 bg-primary→•">d-flex item 1</div→→‌±>
	<div class="p-2 bg-suc×¶≥cess">d-flex item 2</div>
	<↑"≠;div class="p-2 bg-danger">≈π↔d-flex item 3</div>
</div>
<h3 c♥÷★lass="mb-4">垂直方向</h3&g≠↕•t;
<h4>flex-column（從(cóng)上(shàng✘♦•≥)往下(xià)）</h4>
<div class=&∏$ ★#34;d-flex flex-column p-3 bg-warning text-white &">
	<div class="p-2 bg-prβ★imary">Flex item 1<σ≤$ /div>
	<div class="p-2 bg-s₩φuccess">Flex item 2</div>
	<div ε♥α♠class="p-2 bg-danger">Fle✘♣πx item 3</div>
</div>
<h3 class≠≠♥↕="mb-4">垂直方向</h3>
<h4&★Ωgt;flex-column（從(cóng)下(xià)ε>&♥往上(shàng)）</h4>
<di♠✘γ₽v class="d-flex flex-column-reverse ‍§♥p-3 bg-warning text-white">
₩©	<div class="p-2 bg-pr®‍★¥imary">Flex item 1&≥εlt;/div>
	<div class="p-2 bg-succ♥≤™ess">Flex item 2<↕♣ ♣;/div>
	<div class="p-2 bg-danger&"±#34;>Flex item 3</div&g φt;
</div>
</body>
</html>♣≈ε
																											↓δ

展示效果：

三、導航欄制(zhì)作(zuò)

根據上(shàng)述彈性盒子(zǐ)展示的(de)效果࿰®φ★c;不(bù)難發現(xiàn)可(kě)以利用(yòng)Gird的(de)布局劃分(¶™>αfēn)col4份預留給我們的(de)表單空(kōng)間(jiā§₹n)。然後利用(yòng)flex的(de)縱向排布作(zuò)為(wèi)我們表單Ωδ格式。

<!doctype html>
<html>
<head&gσ‌♠t;
<meta http-equiv="Content-Type"±™ content="text/html; chars∏$et=utf-8" />
<meta name="≥♣ ;viewport" content="width& >β#61;device-width, initial-scale=1,shri↑€→βnk-to-fit=no"  />
<★¥₹title>彈性盒子(zǐ)表單測試</title>
&l∏σ★★t;link rel="stylesheet" hre<λΩf="bootstrap-4.2.1-d$∞ist/css/bootstrap.css" />
<link rel&σ€£&#61;"stylesheet" href="font-§≥‌↔awesome-4.7.0/css/font-awesome.css"πδ‍  />
</head>
<nav class="sticα♣™ky-top bg-primary  p-5 mb-5"&ππ&gt;頭部導航欄固定</nav>
<div class="bg↓→&'-secondary p-3">
	<p>內(nèi)容欄1<ε∑♥/p>
	<p>內(nèi)容欄2</p&g®±‌←t;
	<p>內(nèi)容欄3</p>β <∏;
	<p>內(nèi)容欄4</p>
	<p>內(nèi♥Ω)容欄5</p>
	<p>內(nèi)容欄6</p>
	&≈β∑lt;p>內(nèi)容欄7</p>
	&lφ€✘↕t;p>內(nèi)容欄8</p>
	<p>內(nèσ ♥i)容欄9</p>
</div>
<body>
&∑←lt;/body>
</html>

大(dà)概是(shì)這(zhè)個(gè)形式：

在進行(xíng)修飾一(yī)下(xià)就(jiù)行(xíng)了(le)。

四、Grid布局

将導航欄和(hé)所展示的(de)內(nèi)容分(fēn)開(kā'λ★ i)來(lái)。

<div class="col-12 col-md-4 &border py-3">

<div class="col-12 co₽¶♣‍l-md-8 border py-3">☆∏≠

超過中屏就(jiù)展示導航欄和(hé)內(nèi)容，小(xiǎo)于中屏就("✔jiù)隻顯示上(shàng)面是(shì)導航欄下(xià)面是(shì)內(£¥nèi)容。

五、整體(tǐ)實裝

左邊為(wèi)導航行(xíng)，利用(y‌σ òng)錨點導航，左邊頂部為(wèi)固定定位，點擊可(φ₽↑$kě)回到(dào)頂部。過多(duō)內(nèi)容将不(bù)作(zπλ€uò)太多(duō)設置，僅作(zuò)展示。φ£¶<

附上(shàng)源代碼：

 <!doctype html>
<html xmlns="htt ≈≈p://www.w3.org/1999/xhtml">
<hea♥¥d>
<meta http-equiv="Content-Type&#ε♥34; content="text/htmlε£; charset=utf-8" /®γ♣☆>
<meta name="viewpo∑±♣ rt" content="wid♣®♠€th=device-width, initial-s £cale=1,shrink-to-fit=↔♣±no"  />
<title>帶π™有(yǒu)導航欄的(de)響應式網頁檔</tit≠¥₹☆le>
<link rel="stylesheet" hreβ✔f="bootstrap-4.2.1-dist/css/bo "δ otstrap.css" />
<link ↔>✔rel="stylesheet" href="font¶↓→β-awesome-4.7.0/css/font-awe≠ ☆εsome.css" />
</head> →₹∏

<body class="cont€×¶↓ainer" style="height:200€☆β•0px;">
<div class="row"ε ;>
<div class="colαε-12 col-md-4 border py-3"&g& ↔←t;
	<nav class="sti ≤→✔cky-top bg-primary  p-5 mb-5"><a h>∞±ref="#topAnchor"><p cl ↕₹ass=" text-white"$₽>軟件(jiàn)學院2020年(nián)活動</p>&l>↑♥$t;/a></nav>
<nav class=♥™$ 4; bg-danger p-3 ">
	<a hre♣f="#new1"><©‌>p class=" text-white">衆星捧月(yuè)美βλ↔π(měi)好(hǎo)時(shí)，舉國(guó)歡慶悅團員σβ(yuán)</p></a>
    <a href&# >¶☆61;"#new2"><p class=&$ ♠#34; text-white>如(rú)果學到(dào)了(le)或者用  ©×(yòng)到(dào)了(le)~~~求個(gè)贊吖~~