欧美三级国产三级日韩三级_亚洲熟妇丰满大屁股熟妇_欧美亚洲成人一区二区三区_国产精品久久久久久模特

Bootstrap項(xiàng)目實(shí)踐：帶有導(dǎo)航欄的響應(yīng)式網(wǎng)頁 - 新聞資訊 - 云南小程序開發(fā)|云南軟件開發(fā)|云南網(wǎng)站建設(shè)-昆明葵宇信息科技有限公司

159-8711-8523

云南網(wǎng)建設(shè)/小程序開發(fā)/軟件開發(fā)

知識

不管是網(wǎng)站，軟件還是小程序，都要直接或間接能為您產(chǎn)生價值，我們在追求其視覺表現(xiàn)的同時，更側(cè)重于功能的便捷，營銷的便利，運(yùn)營的高效，讓網(wǎng)站成為營銷工具，讓軟件能切實(shí)提升企業(yè)內(nèi)部管理水平和效率。優(yōu)秀的程序?yàn)楹笃谏壧峁┍憬莸闹С郑?

您當(dāng)前位置>首頁 » 新聞資訊 » 技術(shù)分享 >

Bootstrap項(xiàng)目實(shí)踐：帶有導(dǎo)航欄的響應(yīng)式網(wǎng)頁

發(fā)表時間：2020-10-18

發(fā)布人：葵宇科技

瀏覽次數(shù)：44

前言

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

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

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

一、Grid布局和Flex彈性盒子

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

這次也是用到Grid進(jìn)行整體布局，在局部使用Flex彈性盒子進(jìn)行局部布局。代碼很簡單，基本一看就懂。

二、Flex彈性盒子展示

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

簡單的來說，彈性盒子就是使盒子內(nèi)的內(nèi)容不會超出盒子范圍泄露出去。根據(jù)對彈性盒子的應(yīng)用我們可以在盒子里面布局更好的符合響應(yīng)式開發(fā)。

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

<!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(從左側(cè)開始)</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(從右側(cè)開始)</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>

展示效果：

三、導(dǎo)航欄制作

根據(jù)上述彈性盒子展示的效果，不難發(fā)現(xiàn)可以利用Gird的布局劃分col4份預(yù)留給我們的表單空間。然后利用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">頭部導(dǎo)航欄固定</nav>
<div class="bg-secondary p-3">
	<p>內(nèi)容欄1</p>
	<p>內(nèi)容欄2</p>
	<p>內(nèi)容欄3</p>
	<p>內(nèi)容欄4</p>
	<p>內(nèi)容欄5</p>
	<p>內(nèi)容欄6</p>
	<p>內(nèi)容欄7</p>
	<p>內(nèi)容欄8</p>
	<p>內(nèi)容欄9</p>
</div>
<body>
</body>
</html>

大概是這個形式：

在進(jìn)行修飾一下就行了。

四、Grid布局

將導(dǎo)航欄和所展示的內(nèi)容分開來。

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

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

超過中屏就展示導(dǎo)航欄和內(nèi)容，小于中屏就只顯示上面是導(dǎo)航欄下面是內(nèi)容。

五、整體實(shí)裝

我寫的是關(guān)于學(xué)院學(xué)生活動的一個導(dǎo)航欄響應(yīng)網(wǎng)頁。

左邊為導(dǎo)航行，利用錨點(diǎn)導(dǎo)航，左邊頂部為固定定位，點(diǎn)擊可回到頂部。過多內(nèi)容將不作太多設(shè)置，僅作展示。

附上源代碼：

 <!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>帶有導(dǎo)航欄的響應(yīng)式網(wǎng)頁檔</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">軟件學(xué)院2020年活動</p></a></nav>
<nav class=" bg-danger p-3 ">
	<a href="#new1"><p class=" text-white">眾星捧月美好時，舉國歡慶悅團(tuán)員</p></a>
    <a href="#new2"><p class=" text-white>如果學(xué)到了或者用到了~~~求個贊吖~~