當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

MDB基础知识二

發(fā)布時(shí)間：2023/12/20 编程问答 27 豆豆

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

MDB基礎(chǔ)知識(shí)二

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

1.概述

本此學(xué)習(xí)將構(gòu)建一個(gè)所謂的單頁(yè)應(yīng)用SPA(Single Page App), 即內(nèi)容都在一個(gè)頁(yè)面, 不會(huì)發(fā)生跳轉(zhuǎn)。
原出處棋哥教學(xué)網(wǎng).
我們將涉及以下內(nèi)容:

全屏頁(yè)面
遮罩和陰影
動(dòng)畫(huà)
字體
Sogou/Google/高德地圖
圖標(biāo)/表單
輪播/幻燈片
使用自定義樣式

2. 導(dǎo)航及全屏圖片背景

導(dǎo)航條

具體過(guò)程前面說(shuō)過(guò)了，這里不再贅述。
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>

我們稍微做點(diǎn)改變, 希望導(dǎo)航條能固定在頁(yè)面頂部, 簡(jiǎn)單的添加==.fixed-top==類即可.

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

要加入一些內(nèi)容后才能看到變化哦。

全屏幕圖像背景

我們現(xiàn)在來(lái)構(gòu)建一個(gè)以圖片作為整個(gè)背景的頁(yè)面.
添加如下代碼在<header>標(biāo)簽中,<nav>標(biāo)簽之后(注意添加位置):

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

解釋如下:

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

不過(guò), 如果你刷新頁(yè)面看不到任何改變, 因?yàn)槲覀儧](méi)有引入圖片. 添加如下 CSS 代碼到css/style.css文件中.

提示: 除了大量使用 MDB 預(yù)定義的樣式類外, 我們也可以使用自定義的樣式, 一般放在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; /* 針對(duì)Chrome, Safari, Edge等瀏覽器 */-moz-background-size: cover; /* 針對(duì)Firefox瀏覽器 */-o-background-size: cover; /* 針對(duì)Operallq */background-size: cover; /* 通用 */ }

說(shuō)明:

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

提示: 背景圖片一般需要 1920px * 1280px以上的分辨率, 最好采用JPG, Webp等壓縮格式, 因?yàn)槠涫菍儆谥亓考?jí)元素!

提示: 圖片壓縮可考慮CompresJPG, TinyFY, Website Planet等等. 另外, 請(qǐng)一定關(guān)注 Goolge 提出的新的圖片格式 Webp, 有非常高的壓縮率且質(zhì)量上乘, 當(dāng)前已被主流瀏覽器支持了. 請(qǐng)?jiān)L問(wèn)Webp官網(wǎng)

3.遮罩和彈性盒子布局

遮罩 Mask

雖然一個(gè)全屏的圖像讓人印象不錯(cuò), 但它不是我們的重點(diǎn). 它應(yīng)該暗淡一點(diǎn), 應(yīng)該有些文字.
簡(jiǎn)單的添加一個(gè)強(qiáng)暗黑遮罩效果rgba-black-strong就好了.

刷新瀏覽器即可看到不同的效果. 進(jìn)一步學(xué)習(xí), 請(qǐng)參考MDB的 mask文檔.

暗黑的背景上當(dāng)然需要添加一些東西. 添加如下代碼在.mask .rgba-black-strong元素內(nèi):

<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>

我們添加了一個(gè)二級(jí)標(biāo)題, 一條分割線, 一點(diǎn)描述文字和一個(gè)按鈕在頁(yè)面上.
說(shuō)明:

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

彈性盒子布局 Flexbox

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

<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>

說(shuō)明:

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

當(dāng)前你應(yīng)該看到如此結(jié)果

所有內(nèi)容雖然垂直居中了, 似乎水平還沒(méi)有, 且顯得擁擠, 不怎么美觀, 下面我們進(jìn)一步進(jìn)行調(diào)整.

為避免出錯(cuò), 請(qǐng)將整個(gè)

的內(nèi)容替換如下:

<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>

上面代碼出現(xiàn)了些新的樣式, 也有一些新的div, 下面我們進(jìn)行解釋.

添加了.container-fluid 容器以利用柵格進(jìn)行布局. 我們使用柵格系統(tǒng)的構(gòu)建方式一般為.container or .container-fluid > .row > column. 另外我們添加了justify-content-center來(lái)保證元素水平居中.
根據(jù)上面的規(guī)則, 我們將四個(gè)元素(標(biāo)題, 分割線, 文字, 按鈕)再用兩個(gè)div(分別是行和列)進(jìn)行包裹.
在行元素.row上, 我們?cè)俅螒?yīng)用了彈性布局及其justify-content-center樣式來(lái)保證行內(nèi)的列元素水平居中. 同時(shí)我們使用了text-center樣式保證個(gè)元素內(nèi)的文本居中.

試一試: 請(qǐng)將行元素上的justify-content-center樣式去掉看看發(fā)生什么?
沒(méi)有居中。

在列元素.col-md-10上, 我們沒(méi)有使用全部寬度(你應(yīng)該還記得10/12), 這會(huì)使得在大屏幕上內(nèi)容不會(huì)被拉得很長(zhǎng).

刷新瀏覽器, 現(xiàn)在你應(yīng)該可以看到一個(gè)較好的有全屏圖像背景的頁(yè)面.
接下來(lái), 我們將進(jìn)一步添加一下新的元素到我們的頁(yè)面.

4. 頁(yè)面主體-結(jié)構(gòu)及 Best Features章節(jié)

主體結(jié)構(gòu)
現(xiàn)在是時(shí)候添加頁(yè)面的具體內(nèi)容了. 將標(biāo)簽用如下代碼替換:

<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>標(biāo)簽包含我們絕大多數(shù)的內(nèi)容, 我們應(yīng)用了container容器來(lái)來(lái)使用柵格系統(tǒng).

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

另外, 你會(huì)發(fā)現(xiàn)每個(gè)section都設(shè)置了 ID, 我們將在頁(yè)面導(dǎo)航/跳轉(zhuǎn)時(shí)用到它.

注意: 在一個(gè) HTML 文檔中, ID 用來(lái)標(biāo)識(shí)某元素, 必須是唯一的. 多個(gè)元素如果使用相同的 ID 值將導(dǎo)致嚴(yán)重的問(wèn)題.

提示: 目前為止, 你應(yīng)該看到我們的代碼中有不少注釋, 這是一個(gè)非常好的習(xí)慣. 當(dāng)項(xiàng)目變大或時(shí)間久遠(yuǎn)時(shí), 這些注釋對(duì)你自己或者你的小伙伴都無(wú)比有益. 請(qǐng)習(xí)得.

第一 section

下面我們?yōu)榈谝粋€(gè)章節(jié)Best Features添加如下內(nèi)容:

<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>

該章節(jié)有三個(gè)部分: 標(biāo)題和兩個(gè)div(第一行有一列, 第二行有三列).
整個(gè)代碼應(yīng)該沒(méi)什么需要解釋的. 不過(guò)我們可以調(diào)整得更專業(yè)一些:

將標(biāo)題再加粗一點(diǎn)

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

調(diào)整一下圖標(biāo)的顏色和大小

將正文顏色變淡一點(diǎn)。

<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. 頁(yè)面主體- Example 章節(jié)

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

<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>

請(qǐng)注意, 我們?cè)诿繌垐D片的遮罩上都添加了超鏈接:

此外, 我們使用

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

view overlay 點(diǎn)擊時(shí)有波紋效果. MDB 默認(rèn)為遮罩/按鈕/導(dǎo)航條等提供波紋效果, 參見(jiàn) MDB Waves Effect文檔.

mask rgba-white-slight 鼠標(biāo)移上圖片時(shí)(hover)有變色效果. 參見(jiàn) MDB Hover Effects文檔.

6. 頁(yè)面主體- Gallery 章節(jié)

我們將在Gallery章節(jié)使用輪播(Carousel)來(lái)進(jìn)行類似幻燈片的展示. 該節(jié)除標(biāo)題外還有包含兩列的行, 代碼如下:

<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>

有關(guān)輪播的使用, 請(qǐng)查看 MDB 輪播Carousel文檔, 相信大家依樣畫(huà)瓢應(yīng)該沒(méi)有問(wèn)題的.

但如果需要控制輪播的一些選項(xiàng)如: 間隔時(shí)間/輪播方向/是否循環(huán)等等則需要 JavaScrip 的支持. 下面我們簡(jiǎn)單介紹一下.

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

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

7. 頁(yè)面主體- Contact 章節(jié)

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

<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>

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

<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)來(lái)收集用戶輸入的數(shù)據(jù)(一般會(huì)通過(guò)檢查后送到遠(yuǎn)程服務(wù)器進(jìn)一步處理, 目前我們不會(huì)涉及).
下面我們將表單中使用的樣式說(shuō)明如下:

md-form 提供 Material Design 風(fēng)格的輸入元素.
form-sm , form-control-sm 使得我們的輸入稍微小一點(diǎn). 你可去掉試試.
prefix 使得圖標(biāo)成為輸入元素的前綴, 當(dāng)用戶點(diǎn)擊該元素時(shí)激活. 你可去掉試試.
label 是輸入元素的標(biāo)簽, 相當(dāng)于輸入提示(placeholder). 但請(qǐng)注意, 每個(gè)標(biāo)簽都設(shè)置了for屬性對(duì)應(yīng)其輸入元素的id, 如此, 當(dāng)點(diǎn)擊標(biāo)簽時(shí)它會(huì)平滑的上移并縮小. 你可去掉試試.

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

提示: 現(xiàn)在, 依托地圖的應(yīng)用非常多. 最好用的首推地圖的鼻祖 Google Map. 但由于你懂的原因, 我不得不使用國(guó)內(nèi)的地圖(以簡(jiǎn)單點(diǎn)的Sogou為例).
仍然的, 此部分涉及 JS, 請(qǐng)簡(jiǎn)單的跟隨好了.

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

接下來(lái)導(dǎo)入 Sogou地圖 API庫(kù). 在頁(yè)面底部放置其它 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. 頁(yè)面底部及導(dǎo)航調(diào)整

頁(yè)面底部

現(xiàn)在我們來(lái)完成頁(yè)面的底部. 先替換為如下的代碼:

<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文檔的實(shí)例代碼中復(fù)制過(guò)來(lái)的. 目前有兩個(gè)部分, 一些假的鏈接和版權(quán)申明, 有藍(lán)色的底色. 它有改善的空間.

我們先將那些假的鏈接修正一下. 找到footer中的一個(gè)叫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>

新的鏈接部分內(nèi)容更豐富, 我們分為了四列進(jìn)行展示.

使用container替換了container-fluid容器, 使得內(nèi)容不會(huì)擴(kuò)展到邊界
總共給出四列來(lái)分別展示文字,產(chǎn)品,推薦和聯(lián)系方式
每一列都有一個(gè)突出的標(biāo)題, 且其下給了一條紫色的分割線(給了固定寬度為:60px)
思考: 刷新頁(yè)面, 你應(yīng)該會(huì)覺(jué)得標(biāo)題小的分割線長(zhǎng)度和標(biāo)題不協(xié)調(diào). 想想怎么改進(jìn)一下.

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

將如下代碼添加到我們剛剛才改造過(guò)的 Footer Links 這個(gè)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>

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

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

下面, 我們進(jìn)行最后的調(diào)整和提升.

導(dǎo)航調(diào)整

讓導(dǎo)航生效
你應(yīng)該會(huì)發(fā)現(xiàn)導(dǎo)航條中的導(dǎo)航似乎與我們頁(yè)面的內(nèi)容不匹配的, 將導(dǎo)航條中的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>

現(xiàn)在點(diǎn)擊各個(gè)導(dǎo)航, 頁(yè)面將跳到定義好的相應(yīng)位置(即各section, 你應(yīng)該知道這是通過(guò) id進(jìn)行的頁(yè)內(nèi)導(dǎo)航).

滾動(dòng)平滑
當(dāng)點(diǎn)擊導(dǎo)航超鏈接時(shí), 頁(yè)面瞬間定位到指定位置. 其實(shí)我們可以讓其優(yōu)雅一點(diǎn)的. 簡(jiǎn)單的使用smooth-scroll則OK:

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

取消搜索

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

<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>

導(dǎo)航條透明及動(dòng)感
最后, 我們讓導(dǎo)航條更動(dòng)感一點(diǎn). 添加scrolling-navbar類, 去掉primary-color類:

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

刷新后, 你會(huì)發(fā)現(xiàn)導(dǎo)航條透明了, 也有一定的動(dòng)畫(huà)效果(贊!). 不過(guò)當(dāng)向上滾動(dòng)時(shí)有問(wèn)題.
打開(kāi)我們自定義的樣式文件css/style.css, 添加如下樣式:

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

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

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

提示: 不滾動(dòng)時(shí)沒(méi)有這個(gè)樣式, 滾動(dòng)時(shí)動(dòng)態(tài)添加. 這是非常聰明的做法, 在現(xiàn)代前端中大量的應(yīng)用了, 如 Angular.

大功告成

結(jié)語(yǔ)

到現(xiàn)在為止，我們已經(jīng)學(xué)習(xí)了MDB相當(dāng)多的內(nèi)容，我們的目的是更加美觀，讓我們?yōu)g覽網(wǎng)頁(yè)的時(shí)候有更好的體驗(yàn)，但這還需要結(jié)合多方面的知識(shí)才能做到，例如JS，我們將在后面進(jìn)行學(xué)習(xí)。

總結(jié)

以上是生活随笔為你收集整理的MDB基础知识二的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

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