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

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

發布人(rén)：融晨科技

浏覽次數：44

前言

對前端開發不(bù)是(shì)很熟練，之(zhī)前學過html和(hé / huò)Javascrip課程但是(shì)掌握的(de)并不(bù)是(shì)很熟練，希望能夠借助Bootstrap課程鞏固前端課程。

上(shàng)一篇：Bootstrap項目實踐：Grid布局應用

提示：以(yǐ)下是(shì)本篇文章正文内容，下面案例可供參考

一、Grid布局和(hé / huò)Flex彈性盒子(zǐ)

https://www.runoob.com/bootstrap/bootstrap-grid-system.html

這(zhè)次也(yě)是(shì)用到(dào)Grid進行整體布局，在(zài)局部使用Flex彈性盒子(zǐ)進行局部布局。代碼很簡單，基本一看就(jiù)懂。

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

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

簡單的(de)來(lái)說(shuō)，彈性盒子(zǐ)就(jiù)是(shì)使盒子(zǐ)内的(de)内容不(bù)會超出(chū)盒子(zǐ)範圍洩露出(chū)去。根據對彈性盒子(zǐ)的(de)應用我們可以(yǐ)在(zài)盒子(zǐ)裏面布局更好的(de)符合響應式開發。

這(zhè)裏先展示一下盒子(zǐ)的(de)基本用法：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,  shrink-to-fit=no">
<title>彈性盒子(zǐ)展示</title>
<link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css">
</head>

<body class="container">
<h3 class="mb-4">定義彈性盒子(zǐ)</h3>
<h4>d-flex</h4>
<div class="d-flex p-3 bg-warning text-white">
	<div class="p-2 bg-primary">d-flex item 1</div>
	<div class="p-2 bg-success">d-flex item 2</div>
	<div class="p-2 bg-danger">d-flex item 3</div>
</div> 
<h4>d-inline-flex</h4>
<div class="d-inline-flex p-3 bg-warning text-white ">
	<div class="p-2 bg-primary">d-flex item 1</div>
	<div class="p-2 bg-success">d-flex item 2</div>
	<div class="p-2 bg-danger">d-flex item 3</div>
</div>
<h3 class="mb-4">水平方向</h3>
<h4>flex-row(從左側開始)</h4>
<div class="d-flex flex-row p-3 bg-warning text-white">
	<div class="p-2 bg-primary">d-flex item 1</div>
	<div class="p-2 bg-success">d-flex item 2</div>
	<div class="p-2 bg-danger">d-flex item 3</div>
</div><br/>
<h4>flex-row-reverse(從右側開始)</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-success">d-flex item 2</div>
	<div class="p-2 bg-danger">d-flex item 3</div>
</div>
<h3 class="mb-4">垂直方向</h3>
<h4>flex-column（從上(shàng)往下）</h4>
<div class="d-flex flex-column p-3 bg-warning text-white">
	<div class="p-2 bg-primary">Flex item 1</div>
	<div class="p-2 bg-success">Flex item 2</div>
	<div class="p-2 bg-danger">Flex item 3</div>
</div>
<h3 class="mb-4">垂直方向</h3>
<h4>flex-column（從下往上(shàng)）</h4>
<div class="d-flex flex-column-reverse p-3 bg-warning text-white">
	<div class="p-2 bg-primary">Flex item 1</div>
	<div class="p-2 bg-success">Flex item 2</div>
	<div class="p-2 bg-danger">Flex item 3</div>
</div>
</body>
</html>

展示效果：

三、導航欄制作

根據上(shàng)述彈性盒子(zǐ)展示的(de)效果，不(bù)難發現可以(yǐ)利用Gird的(de)布局劃分col4份預留給我們的(de)表單空間。然後利用flex的(de)縱向排布作爲(wéi / wèi)我們表單格式。

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no"  />
<title>彈性盒子(zǐ)表單測試</title>
<link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css" />
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css" />
</head>
<nav class="sticky-top bg-primary  p-5 mb-5">頭部導航欄固定</nav>
<div class="bg-secondary p-3">
	<p>内容欄1</p>
	<p>内容欄2</p>
	<p>内容欄3</p>
	<p>内容欄4</p>
	<p>内容欄5</p>
	<p>内容欄6</p>
	<p>内容欄7</p>
	<p>内容欄8</p>
	<p>内容欄9</p>
</div>
<body>
</body>
</html>

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

在(zài)進行修飾一下就(jiù)行了(le／liǎo)。

四、Grid布局

将導航欄和(hé / huò)所展示的(de)内容分開來(lái)。

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

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

超過中屏就(jiù)展示導航欄和(hé / huò)内容，小于(yú)中屏就(jiù)隻顯示上(shàng)面是(shì)導航欄下面是(shì)内容。

五、整體實裝

我寫的(de)是(shì)關于(yú)學院學生活動的(de)一個(gè)導航欄響應網頁。

左邊爲(wéi / wèi)導航行，利用錨點導航，左邊頂部爲(wéi / wèi)固定定位，點擊可回到(dào)頂部。過多内容将不(bù)作太多設置，僅作展示。

附上(shàng)源代碼：

 <!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no"  />
<title>帶有導航欄的(de)響應式網頁檔</title>
<link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css" />
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css" />
</head>

<body class="container" style="height:2000px;">
<div class="row">
<div class="col-12 col-md-4 border py-3">
	<nav class="sticky-top bg-primary  p-5 mb-5"><a href="#topAnchor"><p class=" text-white">軟件學院2020年活動</p></a></nav>
<nav class=" bg-danger p-3 ">
	<a href="#new1"><p class=" text-white">衆星捧月美好時(shí)，舉國(guó)歡慶悅團員</p></a>
    <a href="#new2"><p class=" text-white>如果學到(dào)了(le／liǎo)或者用到(dào)了(le／liǎo)~~~求個(gè)贊吖~~