當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

MDB基础知识二

發布時間：2023/12/20 编程问答 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 MDB基础知识二小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

MDB基礎知識二

1.概述
2. 導航及全屏圖片背景
- 導航條
- 全屏幕圖像背景
3.遮罩和彈性盒子布局
- 遮罩 Mask
- 彈性盒子布局 Flexbox
4. 頁面主體-結構及 Best Features章節
- 第一 section
5. 頁面主體- Example 章節
6. 頁面主體- Gallery 章節
7. 頁面主體- Contact 章節
8. 頁面底部及導航調整
- 頁面底部
- 導航調整
- 取消搜索
結語

1.概述

本此學習將構建一個所謂的單頁應用SPA(Single Page App), 即內容都在一個頁面, 不會發生跳轉。
原出處棋哥教學網.
我們將涉及以下內容:

全屏頁面
遮罩和陰影
動畫
字體
Sogou/Google/高德地圖
圖標/表單
輪播/幻燈片
使用自定義樣式

2. 導航及全屏圖片背景

導航條

具體過程前面說過了，這里不再贅述。
boby部分：

<header></header>  <main></main>  <footer></footer>

header部分：

<nav class="navbar navbar-expand-lg navbar-dark primary-color"><div class="container"><a class="navbar-brand" href="#">Navbar</a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="basicExampleNav"><ul class="navbar-nav mr-auto"><li class="nav-item active"><a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a></li><li class="nav-item"><a class="nav-link" href="#">Features</a></li><li class="nav-item"><a class="nav-link" href="#">Pricing</a></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"aria-expanded="false">Dropdown</a><div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">Another action</a><a class="dropdown-item" href="#">Something else here</a></div></li></ul><form class="form-inline"><div class="md-form my-0"><input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"></div></form></div></div></nav>

我們稍微做點改變, 希望導航條能固定在頁面頂部, 簡單的添加==.fixed-top==類即可.

<nav class="navbar navbar-expand-lg navbar-dark primary-color fixed-top">

要加入一些內容后才能看到變化哦。

全屏幕圖像背景

我們現在來構建一個以圖片作為整個背景的頁面.
添加如下代碼在<header>標簽中,<nav>標簽之后(注意添加位置):

<div id="intro" class="view"><div class="mask"></div></div>

解釋如下:

.view 是我們背景圖片的封裝器, 同時使我們可以對圖片進行明暗等效果的遮罩.
.mask 是一個有絕對定位的元素, 它將以某種效果覆蓋圖片(通常我們將添加一些文字).
id=“intro” 這是.view元素的ID, 我們稍后將會用到.

不過, 如果你刷新頁面看不到任何改變, 因為我們沒有引入圖片. 添加如下 CSS 代碼到css/style.css文件中.

提示: 除了大量使用 MDB 預定義的樣式類外, 我們也可以使用自定義的樣式, 一般放在style.css文件中.

html, body, header, #intro {height: 100%; }#intro {background: url("https://mdbootstrap.com/img/Photos/Horizontal/Nature/full%20page/img%20%283%29.jpg")no-repeat center center fixed;-webkit-background-size: cover; /* 針對Chrome, Safari, Edge等瀏覽器 */-moz-background-size: cover; /* 針對Firefox瀏覽器 */-o-background-size: cover; /* 針對Operallq */background-size: cover; /* 通用 */ }

說明:

我們將背景圖像的所有父元素高度設置為100％，只有這樣，圖像才能覆蓋整個屏幕
我們通過ID(intro)為該元素設置的背景圖像的 URL. 請注意, 這也是我們顯示圖片的常用方式(這種情況下, 我們就不能通過在頁面圖片上點擊右鍵來另存為…之類的了)
我們使用了cover來設置背景的尺寸, 它將覆蓋屏幕所有可用的空間
另外, -webkit-, -moz- , -o-前綴是為了確保在所有瀏覽器都正常工作. 不過現代瀏覽器都支持了, 所以不用也沒什么問題(就放棄老舊的瀏覽器市場吧)

提示: 背景圖片一般需要 1920px * 1280px以上的分辨率, 最好采用JPG, Webp等壓縮格式, 因為其是屬于重量級元素!

提示: 圖片壓縮可考慮CompresJPG, TinyFY, Website Planet等等. 另外, 請一定關注 Goolge 提出的新的圖片格式 Webp, 有非常高的壓縮率且質量上乘, 當前已被主流瀏覽器支持了. 請訪問Webp官網

3.遮罩和彈性盒子布局

遮罩 Mask

雖然一個全屏的圖像讓人印象不錯, 但它不是我們的重點. 它應該暗淡一點, 應該有些文字.
簡單的添加一個強暗黑遮罩效果rgba-black-strong就好了.

刷新瀏覽器即可看到不同的效果. 進一步學習, 請參考MDB的 mask文檔.

暗黑的背景上當然需要添加一些東西. 添加如下代碼在.mask .rgba-black-strong元素內:

<div class="mask rgba-black-strong"><h2 class="display-4 font-weight-bold white-text pt-5 mb-2">Travel</h2><hr class="hr-light"><h4 class="white-text my-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti consequuntur.</h4><button type="button" class="btn btn-outline-white">Read more<i class="fas fa-book ml-2"></i></button></div>

我們添加了一個二級標題, 一條分割線, 一點描述文字和一個按鈕在頁面上.
說明:

display-4 一個好看的大標題. 參見 MDB版式 Typography文檔.
font-weight-bold 文本加粗. 參見 MDB文本工具 Text Utilities文檔.
white-color 白色文本. 參見 MDB 顏色Color文檔.
hr-light 一條白色分割線.
btn-outline-white 一個白色的透明輪廓按鈕. 參見 MDB 按鈕Buttons文檔.
fa-book 一個書本樣的圖標(注意不是圖片而是特殊字體). MDB 提供了眾多的圖標供我們使用, 參見圖標Icons文檔.
刷新瀏覽器看看結果. 你可能對頁面上內容的布局不太滿意. 下面我們對這些元素進行合理的布局.

彈性盒子布局 Flexbox

通常我們希望這些內容居中顯示. 將這四個內容(標題, 分割線, 文字, 按鈕)用一個div包裹起來并加上一些樣式如下:

<div class="mask rgba-black-strong"><div class="d-flex align-items-center h-100"><h2 class="display-4 font-weight-bold white-text pt-5 mb-2">Travel</h2><hr class="hr-light"><h4 class="white-text my-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti consequuntur.</h4><button type="button" class="btn btn-outline-white">Read more<i class="fas fa-book ml-2"></i></button></div></div>

說明:

d-flex 使得元素以 flex即彈性模式顯示(相當于 CSS的display: flex;)屬性.
align-items-center 必須與d-flex一起使用才能生效, 將使內容在其父元素中垂直居中.
h-100 使元素占用全部(100%)可用高度. 請參見 MDB 尺寸Sizing文檔.
提示:Flex Box是現代 CSS流行及強大的布局方式, 請盡可能掌握. 參見 MDB 彈性布局Flexbox文檔.

當前你應該看到如此結果

所有內容雖然垂直居中了, 似乎水平還沒有, 且顯得擁擠, 不怎么美觀, 下面我們進一步進行調整.

為避免出錯, 請將整個

的內容替換如下:

<div id="intro" class="view"><div class="mask rgba-black-strong"><div class="container-fluid d-flex align-items-center justify-content-center h-100"><div class="row d-flex justify-content-center text-center"><div class="col-md-10"><h2 class="display-4 font-weight-bold white-text pt-5 mb-2">Travel</h2><hr class="hr-light"><h4 class="white-text my-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti consequuntur.</h4><button type="button" class="btn btn-outline-white">Read more<i class="fas fa-book ml-2"></i></button></div></div></div></div></div>

上面代碼出現了些新的樣式, 也有一些新的div, 下面我們進行解釋.

添加了.container-fluid 容器以利用柵格進行布局. 我們使用柵格系統的構建方式一般為.container or .container-fluid > .row > column. 另外我們添加了justify-content-center來保證元素水平居中.
根據上面的規則, 我們將四個元素(標題, 分割線, 文字, 按鈕)再用兩個div(分別是行和列)進行包裹.
在行元素.row上, 我們再次應用了彈性布局及其justify-content-center樣式來保證行內的列元素水平居中. 同時我們使用了text-center樣式保證個元素內的文本居中.

試一試: 請將行元素上的justify-content-center樣式去掉看看發生什么?
沒有居中。

在列元素.col-md-10上, 我們沒有使用全部寬度(你應該還記得10/12), 這會使得在大屏幕上內容不會被拉得很長.

刷新瀏覽器, 現在你應該可以看到一個較好的有全屏圖像背景的頁面.
接下來, 我們將進一步添加一下新的元素到我們的頁面.

4. 頁面主體-結構及 Best Features章節

主體結構
現在是時候添加頁面的具體內容了. 將標簽用如下代碼替換:

<main class="mt-5"><div class="container"><section id="best-features"></section><hr class="my-5"><section id="examples"></section><hr class="my-5"><section id="gallery"></section><hr class="my-5"><section id="contact"></section></div> </main>

<main>標簽包含我們絕大多數的內容, 我們應用了container容器來來使用柵格系統.

同時, 我們將內容用<section>標簽分為了4個部分. section之間還添加了分割線, 并且上下(my-5)都留了不少間距.
section標簽沒有任何具體的顯示效果, 我們使用它是為了代碼的干凈與可讀性.

另外, 你會發現每個section都設置了 ID, 我們將在頁面導航/跳轉時用到它.

注意: 在一個 HTML 文檔中, ID 用來標識某元素, 必須是唯一的. 多個元素如果使用相同的 ID 值將導致嚴重的問題.

提示: 目前為止, 你應該看到我們的代碼中有不少注釋, 這是一個非常好的習慣. 當項目變大或時間久遠時, 這些注釋對你自己或者你的小伙伴都無比有益. 請習得.

第一 section

下面我們為第一個章節Best Features添加如下內容:

<section id="best-features" class="text-center"><h2 class="mb-5">Best Features</h2><div class="row d-flex justify-content-center mb-4"><div class="col-md-8"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi voluptate hic provident nulla repellatfacere esse molestiae ipsa labore porro minima quam quaerat rem, natus repudiandae debitis estsit pariatur.</p></div></div><div class="row"><div class="col-md-4 mb-1"><i class="fas fa-camera-retro"></i><h4 class="my-4">Experience</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minimaassumenda deleniti hic.</p></div><div class="col-md-4 mb-1"><i class="fas fa-heart"></i><h4 class="my-4">Happiness</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minimaassumenda deleniti hic.</p></div><div class="col-md-4 mb-1"><i class="fas fa-bicycle"></i><h4 class="my-4">Adventure</h4><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam, aperiam minimaassumenda deleniti hic.</p></div></div></section>

該章節有三個部分: 標題和兩個div(第一行有一列, 第二行有三列).
整個代碼應該沒什么需要解釋的. 不過我們可以調整得更專業一些:

將標題再加粗一點

<h2 class="mb-5 font-weight-bold">Best Features</h2>

調整一下圖標的顏色和大小

將正文顏色變淡一點。

<p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi voluptate hic provident nulla repellat facere esse molestiae ipsa labore porro minima quam quaerat rem, natus repudiandae debitis est sit ariatur.</p>

5. 頁面主體- Example 章節

本section我們將應用一些圖片的效果. 我們將其分為2行3列的單元格, 每個單元顯示一張圖片及其介紹. 代碼如下:

<section id="examples" class="text-center"><h2 class="mb-5 font-weight-bold">Stunning Examples</h2><div class="row"><div class="col-lg-4 col-md-12 mb-4"><div class="view overlay z-depth-1-half"><img src="https://mdbootstrap.com/img/Photos/Others/images/48.jpg" class="img-fluid"><a href="#!"><div class="mask rgba-white-slight"></div></a></div><h4 class="my-4 font-weight-bold">Heading</h4><p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam,aperiam minimaassumenda deleniti hic.</p></div><div class="col-lg-4 col-md-6 mb-4"><div class="view overlay z-depth-1-half"><img src="https://mdbootstrap.com/img/Photos/Others/images/49.jpg" class="img-fluid"><a href="#!"><div class="mask rgba-white-slight"></div></a></div><h4 class="my-4 font-weight-bold">Heading</h4><p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam,aperiam minimaassumenda deleniti hic.</p></div><div class="col-lg-4 col-md-6 mb-4"><div class="view overlay z-depth-1-half"><img src="https://mdbootstrap.com/img/Photos/Others/images/50.jpg" class="img-fluid"><a href="#!"><div class="mask rgba-white-slight"></div></a></div><h4 class="my-4 font-weight-bold">Heading</h4><p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam,aperiam minimaassumenda deleniti hic.</p></div></div><div class="row"><div class="col-lg-4 col-md-12 mb-4"><div class="view overlay z-depth-1-half"><img src="https://mdbootstrap.com/img/Photos/Others/images/51.jpg" class="img-fluid"><a href="#!"><div class="mask rgba-white-slight"></div></a></div><h4 class="my-4 font-weight-bold">Heading</h4><p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam,aperiam minimaassumenda deleniti hic.</p></div><div class="col-lg-4 col-md-6 mb-4"><div class="view overlay z-depth-1-half"><img src="https://mdbootstrap.com/img/Photos/Others/images/52.jpg" class="img-fluid"><a href="#!"><div class="mask rgba-white-slight"></div></a></div><h4 class="my-4 font-weight-bold">Heading</h4><p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam,aperiam minimaassumenda deleniti hic.</p></div><div class="col-lg-4 col-md-6 mb-4"><div class="view overlay z-depth-1-half"><img src="https://mdbootstrap.com/img/Photos/Others/images/53.jpg" class="img-fluid"><a href="#!"><div class="mask rgba-white-slight"></div></a></div><h4 class="my-4 font-weight-bold">Heading</h4><p class="grey-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit maiores nam,aperiam minimaassumenda deleniti hic.</p></div></div></section>

請注意, 我們在每張圖片的遮罩上都添加了超鏈接:

此外, 我們使用

z-depth-1-half 使圖片有陰影效果. 參見MDB Shadows文檔.

view overlay 點擊時有波紋效果. MDB 默認為遮罩/按鈕/導航條等提供波紋效果, 參見 MDB Waves Effect文檔.

mask rgba-white-slight 鼠標移上圖片時(hover)有變色效果. 參見 MDB Hover Effects文檔.

6. 頁面主體- Gallery 章節

我們將在Gallery章節使用輪播(Carousel)來進行類似幻燈片的展示. 該節除標題外還有包含兩列的行, 代碼如下:

<div class="col-md-6 mb-4"> <div id="carousel-example-2" class="carousel slide carousel-fade" data-ride="carousel"><ol class="carousel-indicators"><li data-target="#carousel-example-2" data-slide-to="0" class="active"></li><li data-target="#carousel-example-2" data-slide-to="1"></li><li data-target="#carousel-example-2" data-slide-to="2"></li></ol><div class="carousel-inner" role="listbox"><div class="carousel-item active"><div class="view"><img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(68).jpg"alt="First slide"><div class="mask rgba-black-light"></div></div><div class="carousel-caption"><h3 class="h3-responsive">Light mask</h3><p>First text</p></div></div><div class="carousel-item"><div class="view"><img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(6).jpg"alt="Second slide"><div class="mask rgba-black-strong"></div></div><div class="carousel-caption"><h3 class="h3-responsive">Strong mask</h3><p>Secondary text</p></div></div><div class="carousel-item"><div class="view"><img class="d-block w-100" src="https://mdbootstrap.com/img/Photos/Slides/img%20(9).jpg"alt="Third slide"><div class="mask rgba-black-slight"></div></div><div class="carousel-caption"><h3 class="h3-responsive">Slight mask</h3><p>Third text</p></div></div></div><a class="carousel-control-prev" href="#carousel-example-2" role="button" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="carousel-control-next" href="#carousel-example-2" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span></a> </div> </div>

有關輪播的使用, 請查看 MDB 輪播Carousel文檔, 相信大家依樣畫瓢應該沒有問題的.

但如果需要控制輪播的一些選項如: 間隔時間/輪播方向/是否循環等等則需要 JavaScrip 的支持. 下面我們簡單介紹一下.

基本思路是: 找到輪播元素(通過id), 傳遞相關參數對象給它. 將如下代碼添加到靠近底部自定義 JS 代碼塊中 :

<script type="text/javascript">// Carousel options$('#carousel-example-2').carousel({interval: 2000, // 間隔時間, 默認5000毫秒, 如果設置為false則不會自動播放pause: false, // 鼠標移上后是否暫停, 默認暫停wrap: false, // 是否循環輪播, 默認循環}) </script>

7. 頁面主體- Contact 章節

Contact章節是我們頁面主體的最后一個章節. 我們依然把它分為兩列, 左邊放置輸入表單(Form), 右邊放置一個在線地圖. 結構如下:

<section id="contact"><h2 class="mb-5 font-weight-bold text-center">Contact us</h2><div class="row"><div class="col-lg-5 col-md-12"></div><div class="col-lg-7 col-md-12"></div></div></section>

聯系表單
將以下代碼放在第一列(左邊):

<div class="col-lg-5 col-md-12"><form class="p-5 grey-text"><div class="md-form form-sm"> <i class="fas fa-user prefix"></i><input type="text" id="form1" class="form-control form-control-sm"><label for="form1">Your name</label></div><div class="md-form form-sm"> <i class="fas fa-envelope prefix"></i><input type="text" id="form2" class="form-control form-control-sm"><label for="form2">Your email</label></div><div class="md-form form-sm"> <i class="fas fa-tag prefix"></i><input type="text" id="form3" class="form-control form-control-sm"><label for="form3">Subject</label></div><div class="md-form form-sm"> <i class="fas fa-pencil-alt prefix"></i><textarea type="text" id="form4" class="md-textarea form-control form-control-sm" rows="4"></textarea><label for="form4">Your message</label></div><div class="text-center mt-4"><button class="btn btn-primary">Send <i class="far fa-paper-planeml-1"></i></button></div></form> </div>

我們通常使用表單(form)來收集用戶輸入的數據(一般會通過檢查后送到遠程服務器進一步處理, 目前我們不會涉及).
下面我們將表單中使用的樣式說明如下:

md-form 提供 Material Design 風格的輸入元素.
form-sm , form-control-sm 使得我們的輸入稍微小一點. 你可去掉試試.
prefix 使得圖標成為輸入元素的前綴, 當用戶點擊該元素時激活. 你可去掉試試.
label 是輸入元素的標簽, 相當于輸入提示(placeholder). 但請注意, 每個標簽都設置了for屬性對應其輸入元素的id, 如此, 當點擊標簽時它會平滑的上移并縮小. 你可去掉試試.

進一步學習, 可參考 MDB 提供的輸入Inputs文檔和表單Forms文檔.
在線地圖
接下來我們將在第二列(右邊)放置一些聯系信息及在線地圖. 代碼如下:

提示: 現在, 依托地圖的應用非常多. 最好用的首推地圖的鼻祖 Google Map. 但由于你懂的原因, 我不得不使用國內的地圖(以簡單點的Sogou為例).
仍然的, 此部分涉及 JS, 請簡單的跟隨好了.

注意代碼底部放置地圖的區域(<div id=“map-container” …>), 我們設置了其高度為400px.

接下來導入 Sogou地圖 API庫. 在頁面底部放置其它 JS文件的后面添加, 如下代碼所示:

<script type="text/javascript" src="js/jquery.min.js"></script>  <script type="text/javascript" src="js/popper.min.js"></script>  <script type="text/javascript" src="js/bootstrap.min.js"></script>  <script type="text/javascript" src="js/mdb.min.js"></script>  <script type="text/javascript" src="//api.map.sogou.com/maps/js/api_v2.5.1.js"></script>

然后在自定義 JS 腳本中新加入如下代碼:

8. 頁面底部及導航調整

頁面底部

現在我們來完成頁面的底部. 先替換為如下的代碼:

<footer class="page-footer font-small blue pt-4"><div class="container-fluid text-center text-md-left"><div class="row"><div class="col-md-6 mt-md-0 mt-3"><h5 class="text-uppercase">Footer Content</h5><p>Here you can use rows and columns here to organize your footer content.</p></div><hr class="clearfix w-100 d-md-none pb-3"><div class="col-md-3 mb-md-0 mb-3"><h5 class="text-uppercase">Links</h5><ul class="list-unstyled"><li><a href="#!">Link 1</a></li><li><a href="#!">Link 2</a></li><li><a href="#!">Link 3</a></li><li><a href="#!">Link 4</a></li></ul></div><div class="col-md-3 mb-md-0 mb-3"><h5 class="text-uppercase">Links</h5><ul class="list-unstyled"><li><a href="#!">Link 1</a></li><li><a href="#!">Link 2</a></li><li><a href="#!">Link 3</a></li><li><a href="#!">Link 4</a></li></ul></div></div></div><div class="footer-copyright text-center py-3">? 2018 Copyright:<a href="https://mdbootstrap.com/education/bootstrap/"> MDBootstrap.com</a></div></footer>

這是直接從 MDB Footer文檔的實例代碼中復制過來的. 目前有兩個部分, 一些假的鏈接和版權申明, 有藍色的底色. 它有改善的空間.

我們先將那些假的鏈接修正一下. 找到footer中的一個叫Footer Links的div, 替換為如下代碼:

<div class="container mt-5 mb-4 text-center text-md-left"><div class="row mt-3"><div class="col-md-3 col-lg-4 col-xl-3 mb-4"><h6 class="text-uppercase font-weight-bold"><strong>Company name</strong></h6><hr class="deep-purple accent-2 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;"><p>Here you can use rows and columns here to organize your footer content. Lorem ipsum dolor sitamet, consectetur adipisicing elit.</p></div><div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4"><h6 class="text-uppercase font-weight-bold"><strong>Products</strong></h6><hr class="deep-purple accent-2 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;"><p><a href="#!">MDBootstrap</a></p><p><a href="#!">MDWordPress</a></p><p><a href="#!">BrandFlow</a></p><p><a href="#!">Bootstrap Angular</a></p></div><div class="col-md-3 col-lg-2 col-xl-2 mx-auto mb-4"><h6 class="text-uppercase font-weight-bold"><strong>Useful links</strong></h6><hr class="deep-purple accent-2 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;"><p><a href="#!">Your Account</a></p><p><a href="#!">Become an Affiliate</a></p><p><a href="#!">Shipping Rates</a></p><p><a href="#!">Help</a></p></div><div class="col-md-4 col-lg-3 col-xl-3"><h6 class="text-uppercase font-weight-bold"><strong>Contact</strong></h6><hr class="deep-purple accent-2 mb-4 mt-0 d-inline-block mx-auto" style="width: 60px;"><p><i class="fas fa-home mr-3"></i> New York, NY 10012, US</p><p><i class="fas fa-envelope mr-3"></i> info@example.com</p><p><i class="fas fa-phone mr-3"></i> + 01 234 567 88</p><p><i class="fas fa-print mr-3"></i> + 01 234 567 89</p></div></div> </div>

新的鏈接部分內容更豐富, 我們分為了四列進行展示.

使用container替換了container-fluid容器, 使得內容不會擴展到邊界
總共給出四列來分別展示文字,產品,推薦和聯系方式
每一列都有一個突出的標題, 且其下給了一條紫色的分割線(給了固定寬度為:60px)
思考: 刷新頁面, 你應該會覺得標題小的分割線長度和標題不協調. 想想怎么改進一下.

我們還打算在footer中添加一個部分用于放置社交媒體鏈接. 也即, 現在頁面的footer由3個部分組成: 社交媒體鏈接, 公司信息, 版權信息.

將如下代碼添加到我們剛剛才改造過的 Footer Links 這個div前(注意添加的位置).

<div class="primary-color"><div class="container"><div class="row py-4 d-flex align-items-center"><div class="col-md-6 col-lg-5 text-center text-md-left mb-4 mb-md-0"><h6 class="mb-0 white-text">Get connected with us on social networks!</h6></div><div class="col-md-6 col-lg-7 text-center text-md-right"><a class="fb-ic ml-0"><i class="fab fa-facebook-f white-text mr-4"> </i></a><a class="tw-ic"><i class="fab fa-twitter white-text mr-4"> </i></a><a class="gplus-ic"><i class="fab fa-google-plus-g white-text mr-4"> </i></a><a class="li-ic"><i class="fab fa-linkedin-in white-text mr-4"> </i></a><a class="ins-ic"><i class="fab fa-instagram white-text mr-lg-4"> </i></a></div></div></div> </div>

刷新后, 你會覺得新添加的這部分不大和諧, 似乎是硬插入的, 文字也有點小. 簡單的修正如下即可:

<footer class="page-footer unique-color-dark">

下面, 我們進行最后的調整和提升.

導航調整

讓導航生效
你應該會發現導航條中的導航似乎與我們頁面的內容不匹配的, 將導航條中的Links部分用下面的代碼修正:

<ul class="navbar-nav mr-auto"><li class="nav-item"><a class="nav-link" href="#intro">Home</a></li><li class="nav-item"><a class="nav-link" href="#best-features">Features</a></li><li class="nav-item"><a class="nav-link" href="#examples">Examples</a></li><li class="nav-item"><a class="nav-link" href="#gallery">Gallery</a></li><li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li> </ul>

現在點擊各個導航, 頁面將跳到定義好的相應位置(即各section, 你應該知道這是通過 id進行的頁內導航).

滾動平滑
當點擊導航超鏈接時, 頁面瞬間定位到指定位置. 其實我們可以讓其優雅一點的. 簡單的使用smooth-scroll則OK:

<ul class="navbar-nav mr-auto smooth-scroll">

取消搜索

我們打算在導航條中搜索的位置放置社交圖標, 用下面的代碼替換form標簽:

<ul class="navbar-nav nav-flex-icons"><li class="nav-item"><a class="nav-link"><i class="fab fa-facebook-f"></i></a></li><li class="nav-item"><a class="nav-link"><i class="fab fa-twitter"></i></a></li><li class="nav-item"><a class="nav-link"><i class="fab fa-instagram"></i></a></li> </ul>

導航條透明及動感
最后, 我們讓導航條更動感一點. 添加scrolling-navbar類, 去掉primary-color類:

<nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">

刷新后, 你會發現導航條透明了, 也有一定的動畫效果(贊!). 不過當向上滾動時有問題.
打開我們自定義的樣式文件css/style.css, 添加如下樣式:

.top-nav-collapse {background-color: #24355C; }

我們為.top-nav-collapse自定義了樣式, 即設置了背景. 不過你找遍了整個 HTML, 也不會看到那個元素在使用這個樣式類.
那么, 我們定義它又怎么能生效呢? 解釋如下:

當我們沒有設置導航條的顏色如剛才去掉了primary-color, 那么導航條將是透明的
scrolling-navbar是 MDB 定義的一個特殊的樣式類. 當感知到用戶在滾動頁面時, MDB 將自動運行一段 JS 代碼, 將.top-nav-collapse這個樣式類添加給.navbar即導航條. 因此, 擁有這個樣式類的元素的背景顏色即刻發生改變.

提示: 不滾動時沒有這個樣式, 滾動時動態添加. 這是非常聰明的做法, 在現代前端中大量的應用了, 如 Angular.

大功告成

結語

到現在為止，我們已經學習了MDB相當多的內容，我們的目的是更加美觀，讓我們瀏覽網頁的時候有更好的體驗，但這還需要結合多方面的知識才能做到，例如JS，我們將在后面進行學習。

總結

以上是生活随笔為你收集整理的MDB基础知识二的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：运筹帷幄？
下一篇： RWEQ模型的土壤风蚀模数估算及其变化归