前言

對前端開發不是很熟練，之前學過html和Javascrip課程但是掌握的并不是很熟練，希望能夠借助Bootstrap課程鞏固前端課程，

上一篇：Bootstrap專案實踐：Grid布局應用

提示：以下是本篇文章正文內容，下面案例可供參考

一、Grid布局和Flex彈性盒子

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

這次也是用到Grid進行整體布局，在區域使用Flex彈性盒子進行區域布局，代碼很簡單，基本一看就懂，

二、Flex彈性盒子展示

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

簡單的來說，彈性盒子就是使盒子內的內容不會超出盒子范圍泄露出去，根據對彈性盒子的應用我們可以在盒子里面布局更好的符合回應式開發，

這里先展示一下盒子的基本用法：

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

<body class="container">
<h3 class="mb-4">定義彈性盒子</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（從上往下）</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（從下往上）</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>

展示效果：

三、導航欄制作

根據上述彈性盒子展示的效果，不難發現可以利用Gird的布局劃分col4份預留給我們的表單空間，然后利用flex的縱向排布作為我們表單格式，

<!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>彈性盒子表單測驗</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>

大概是這個形式：

在進行修飾一下就行了，

四、Grid布局

將導航欄和所展示的內容分開來，

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

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

超過中屏就展示導航欄和內容，小于中屏就只顯示上面是導航欄下面是內容，

五、整體實裝

我寫的是關于學院學生活動的一個導航欄回應網頁，

左邊為導航行，利用錨點導航，左邊頂部為固定定位，點擊可回到頂部，過多內容將不作太多設定，僅作展示，

附上源代碼：

 <!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>帶有導航欄的回應式網頁檔</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">眾星捧月美好時，舉國歡慶悅團員</p></a>
    <a href="#new2"><p class=" text-white one">學四史 銘初心 慶八秩芳華</p></a>
    <a href=""><p class=" text-white">歌舞詮釋活力，青春演繹精彩</p></a>
    <a href=""><p class=" text-white">節儉始于心，"光碟"踐于行</p></a>
    <a href=""><p class=" text-white">“迎國慶慶中秋 從瑤湖再出發”拔河比賽</p></a>
    <a href=""><p class=" text-white">軟體學院學生同上一堂思政大課</p></a>
    <a href=""><p class=" text-white">畢業季 |致敬我們的四年</p></a>
    <a href=""><p class=" text-white">軟體學院組織舉辦"垃圾分類"主題教育</p></a>
    <a href=""><p class=" text-white">前方高能！直擊超燃現場！</p></a>
    <a href=""><p class=" text-white">青山湖校區“奮進2020”元旦文藝晚會</p></a>
    <a href=""><p class=" text-white">有愛師大！你的專屬月餅已送達~</p></a>
    <a href=""><p class=" text-white">校黨委委員、副校長深入軟體學院開展“雙體驗日”活動</p></a>
    <a href=""><p class=" text-white">關于舉辦軟體學院“學四史 銘初心 慶八秩芳華”網頁設計制作大賽的通知</p></a>
	</nav>
</div>
<div class="col-12 col-md-8  border py-3">
<div id="topAnchor"></div>
	<div id="new1" class="d-flex flex-column  p-3">
	<h3 align="center">眾星捧月美好時，舉國歡慶悅團員</h3>
	<p >佳節將至,或難團圓，希望這份月餅可以陪伴,每一位師大學子，家在遠方,你在師大心上，此心安處，便是師大，</p>
	<a><img src="1.png"/>如果學到了或者用到了~~~求個贊吖~~







        
      轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/181158.html
      標籤：其他 
      上一篇：ES6新增內容(部分)
下一篇：一個小白想建站，應該如何操作