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部分：
<!--Navbar--> <nav class="navbar navbar-expand-lg navbar-dark primary-color"><div class="container"><!-- Navbar brand --><a class="navbar-brand" href="#">Navbar</a><!-- Collapse button --><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><!-- Collapsible content --><div class="collapse navbar-collapse" id="basicExampleNav"><!-- Links --><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><!-- Dropdown --><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><!-- Links --><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><!-- Collapsible content --></div></nav> <!--/.Navbar-->我們稍微做點改變, 希望導航條能固定在頁面頂部, 簡單的添加==.fixed-top==類即可.
<!--Navbar--> <nav class="navbar navbar-expand-lg navbar-dark primary-color fixed-top">要加入一些內容后才能看到變化哦。
全屏幕圖像背景
我們現在來構建一個以圖片作為整個背景的頁面.
添加如下代碼在<header>標簽中,<nav>標簽之后(注意添加位置):
解釋如下:
.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"><!-- Heading --><h2 class="display-4 font-weight-bold white-text pt-5 mb-2">Travel</h2><!-- Divider --><hr class="hr-light"><!-- Description --><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 --><div class="d-flex align-items-center h-100"><!-- Heading --><h2 class="display-4 font-weight-bold white-text pt-5 mb-2">Travel</h2><!-- Divider --><hr class="hr-light"><!-- Description --><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"><!-- 添加了.container-fluid 容器以利用柵格進行布局 --><div class="container-fluid d-flex align-items-center justify-content-center h-100"><!-- 新添加的 div, 表示柵格中的行 --><div class="row d-flex justify-content-center text-center"><!-- 新添加的 div, 表示柵格中的列 --><div class="col-md-10"><!-- Heading --><h2 class="display-4 font-weight-bold white-text pt-5 mb-2">Travel</h2><!-- Divider --><hr class="hr-light"><!-- Description --><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>標簽包含我們絕大多數的內容, 我們應用了container容器來來使用柵格系統.
同時, 我們將內容用<section>標簽分為了4個部分. section之間還添加了分割線, 并且上下(my-5)都留了不少間距.
section標簽沒有任何具體的顯示效果, 我們使用它是為了代碼的干凈與可讀性.
另外, 你會發現每個section都設置了 ID, 我們將在頁面導航/跳轉時用到它.
注意: 在一個 HTML 文檔中, ID 用來標識某元素, 必須是唯一的. 多個元素如果使用相同的 ID 值將導致嚴重的問題.
提示: 目前為止, 你應該看到我們的代碼中有不少注釋, 這是一個非常好的習慣. 當項目變大或時間久遠時, 這些注釋對你自己或者你的小伙伴都無比有益. 請習得.
第一 section
下面我們為第一個章節Best Features添加如下內容:
<!--Section: Best Features--> <section id="best-features" class="text-center"><!-- Heading --><h2 class="mb-5">Best Features</h2><!--Grid row--><div class="row d-flex justify-content-center mb-4"><!--Grid column--><div class="col-md-8"><!-- Description --><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><!--Grid column--></div><!--Grid row--><!--Grid row--><div class="row"><!--Grid column--><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><!--Grid column--><!--Grid column--><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><!--Grid column--><!--Grid column--><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><!--Grid column--></div><!--Grid row--></section> <!--Section: Best Features-->該章節有三個部分: 標題和兩個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"><!-- heading --><h2 class="mb-5 font-weight-bold">Stunning Examples</h2><!--Grid row--><div class="row"><!--Grid column--><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><!--Grid column--><!--Grid column--><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><!--Grid column--><!--Grid column--><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><!--Grid column--></div><!--Grid row--><!--Grid row--><div class="row"><!--Grid column--><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><!--Grid column--><!--Grid column--><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><!--Grid column--><!--Grid column--><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><!--Grid column--></div><!--Grid row--></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)來進行類似幻燈片的展示. 該節除標題外還有包含兩列的行, 代碼如下:
<!--Grid column--> <div class="col-md-6 mb-4"><!--Carousel Wrapper--> <div id="carousel-example-2" class="carousel slide carousel-fade" data-ride="carousel"><!--Indicators--><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><!--/.Indicators--><!--Slides--><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"><!--Mask color--><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"><!--Mask color--><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><!--/.Slides--><!--Controls--><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><!--/.Controls--> </div> <!--/.Carousel Wrapper--></div> <!--Grid column-->有關輪播的使用, 請查看 MDB 輪播Carousel文檔, 相信大家依樣畫瓢應該沒有問題的.
但如果需要控制輪播的一些選項如: 間隔時間/輪播方向/是否循環等等則需要 JavaScrip 的支持. 下面我們簡單介紹一下.
基本思路是: 找到輪播元素(通過id), 傳遞相關參數對象給它. 將如下代碼添加到靠近底部自定義 JS 代碼塊中 :
<!-- Your custom scripts (optional) --> <script type="text/javascript">// Carousel options$('#carousel-example-2').carousel({interval: 2000, // 間隔時間, 默認5000毫秒, 如果設置為false則不會自動播放pause: false, // 鼠標移上后是否暫停, 默認暫停wrap: false, // 是否循環輪播, 默認循環}) </script>7. 頁面主體- Contact 章節
Contact章節是我們頁面主體的最后一個章節. 我們依然把它分為兩列, 左邊放置輸入表單(Form), 右邊放置一個在線地圖. 結構如下:
<!--Section: Contact--> <section id="contact"><!-- Heading --><h2 class="mb-5 font-weight-bold text-center">Contact us</h2><!--Grid row--><div class="row"><!--Grid column--><div class="col-lg-5 col-md-12"></div><!--Grid column--><!--Grid column--><div class="col-lg-7 col-md-12"></div><!--Grid column--></div><!--Grid row--></section> <!--Section: Contact-->聯系表單
將以下代碼放在第一列(左邊):
我們通常使用表單(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文件的后面添加, 如下代碼所示:
<!-- jQuery --> <script type="text/javascript" src="js/jquery.min.js"></script> <!-- Bootstrap tooltips --> <script type="text/javascript" src="js/popper.min.js"></script> <!-- Bootstrap core JavaScript --> <script type="text/javascript" src="js/bootstrap.min.js"></script> <!-- MDB core JavaScript --> <script type="text/javascript" src="js/mdb.min.js"></script> <!-- 導入 Sogou Map API, 注意: 以上是已有的代碼,下面這句是新增的 --> <script type="text/javascript" src="//api.map.sogou.com/maps/js/api_v2.5.1.js"></script>然后在自定義 JS 腳本中新加入如下代碼:
function showMap() {var myLatlng = new sogou.maps.LatLng(29.4902, 106.5714);var myOptions = {zoom: 13,center: myLatlng,mapTypeId: sogou.maps.MapTypeId.ROADMAP};map = new sogou.maps.Map(document.getElementById("map-container"), myOptions);marker = new sogou.maps.Marker({position:myLatlng, map:map, title:"重慶交通大學"});}// 設置事件偵聽器, 當窗口加載時調用 showMap 函數sogou.maps.event.addDomListener(window, 'load', showMap);8. 頁面底部及導航調整
頁面底部
現在我們來完成頁面的底部. 先替換為如下的代碼:
<!-- Footer --> <footer class="page-footer font-small blue pt-4"><!-- Footer Links --><div class="container-fluid text-center text-md-left"><!-- Grid row --><div class="row"><!-- Grid column --><div class="col-md-6 mt-md-0 mt-3"><!-- Content --><h5 class="text-uppercase">Footer Content</h5><p>Here you can use rows and columns here to organize your footer content.</p></div><!-- Grid column --><hr class="clearfix w-100 d-md-none pb-3"><!-- Grid column --><div class="col-md-3 mb-md-0 mb-3"><!-- Links --><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><!-- Grid column --><!-- Grid column --><div class="col-md-3 mb-md-0 mb-3"><!-- Links --><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><!-- Grid column --></div><!-- Grid row --></div><!-- Footer Links --><!-- Copyright --><div class="footer-copyright text-center py-3">? 2018 Copyright:<a href="https://mdbootstrap.com/education/bootstrap/"> MDBootstrap.com</a></div><!-- Copyright --></footer> <!-- Footer -->這是直接從 MDB Footer文檔的實例代碼中復制過來的. 目前有兩個部分, 一些假的鏈接和版權申明, 有藍色的底色. 它有改善的空間.
我們先將那些假的鏈接修正一下. 找到footer中的一個叫Footer Links的div, 替換為如下代碼:
<!--Footer Links--> <div class="container mt-5 mb-4 text-center text-md-left"><div class="row mt-3"><!--First column--><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><!--/.First column--><!--Second column--><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><!--/.Second column--><!--Third column--><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><!--/.Third column--><!--Fourth column--><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><!--/.Fourth column--></div> </div> <!--/.Footer Links-->新的鏈接部分內容更豐富, 我們分為了四列進行展示.
使用container替換了container-fluid容器, 使得內容不會擴展到邊界
總共給出四列來分別展示文字,產品,推薦和聯系方式
每一列都有一個突出的標題, 且其下給了一條紫色的分割線(給了固定寬度為:60px)
思考: 刷新頁面, 你應該會覺得標題小的分割線長度和標題不協調. 想想怎么改進一下.
我們還打算在footer中添加一個部分用于放置社交媒體鏈接. 也即, 現在頁面的footer由3個部分組成: 社交媒體鏈接, 公司信息, 版權信息.
將如下代碼添加到我們剛剛才改造過的 Footer Links 這個div前(注意添加的位置).
<!-- Social buttons --> <div class="primary-color"><div class="container"><!--Grid row--><div class="row py-4 d-flex align-items-center"><!--Grid column--><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><!--Grid column--><!--Grid column--><div class="col-md-6 col-lg-7 text-center text-md-right"><!--Facebook--><a class="fb-ic ml-0"><i class="fab fa-facebook-f white-text mr-4"> </i></a><!--Twitter--><a class="tw-ic"><i class="fab fa-twitter white-text mr-4"> </i></a><!--Google +--><a class="gplus-ic"><i class="fab fa-google-plus-g white-text mr-4"> </i></a><!--Linkedin--><a class="li-ic"><i class="fab fa-linkedin-in white-text mr-4"> </i></a><!--Instagram--><a class="ins-ic"><i class="fab fa-instagram white-text mr-lg-4"> </i></a></div><!--Grid column--></div><!--Grid row--></div> </div> <!-- Social buttons -->刷新后, 你會覺得新添加的這部分不大和諧, 似乎是硬插入的, 文字也有點小. 簡單的修正如下即可:
<!-- Footer --><footer class="page-footer unique-color-dark">下面, 我們進行最后的調整和提升.
導航調整
讓導航生效
你應該會發現導航條中的導航似乎與我們頁面的內容不匹配的, 將導航條中的Links部分用下面的代碼修正:
現在點擊各個導航, 頁面將跳到定義好的相應位置(即各section, 你應該知道這是通過 id進行的頁內導航).
滾動平滑
當點擊導航超鏈接時, 頁面瞬間定位到指定位置. 其實我們可以讓其優雅一點的. 簡單的使用smooth-scroll則OK:
取消搜索
我們打算在導航條中搜索的位置放置社交圖標, 用下面的代碼替換form標簽:
<!-- Social Icon --> <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類:
刷新后, 你會發現導航條透明了, 也有一定的動畫效果(贊!). 不過當向上滾動時有問題.
打開我們自定義的樣式文件css/style.css, 添加如下樣式:
我們為.top-nav-collapse自定義了樣式, 即設置了背景. 不過你找遍了整個 HTML, 也不會看到那個元素在使用這個樣式類.
那么, 我們定義它又怎么能生效呢? 解釋如下:
當我們沒有設置導航條的顏色如剛才去掉了primary-color, 那么導航條將是透明的
scrolling-navbar是 MDB 定義的一個特殊的樣式類. 當感知到用戶在滾動頁面時, MDB 將自動運行一段 JS 代碼, 將.top-nav-collapse這個樣式類添加給.navbar即導航條. 因此, 擁有這個樣式類的元素的背景顏色即刻發生改變.
提示: 不滾動時沒有這個樣式, 滾動時動態添加. 這是非常聰明的做法, 在現代前端中大量的應用了, 如 Angular.
大功告成
結語
到現在為止，我們已經學習了MDB相當多的內容，我們的目的是更加美觀，讓我們瀏覽網頁的時候有更好的體驗，但這還需要結合多方面的知識才能做到，例如JS，我們將在后面進行學習。
總結
- 上一篇： 运筹帷幄？
- 下一篇： RWEQ模型的土壤风蚀模数估算及其变化归