資訊專欄INFORMATION COLUMN
摘要：本文的目的就是介紹如何使用搭建常用的布局，并保證布局具有合理的結(jié)構(gòu)。所以，上面例子的正確結(jié)構(gòu)如下這是我工作過程中見過的最多的一種錯誤，必須格外注意。
前言
Bootstrap 的成功不僅在于其簡單易用，更在于其樣式的規(guī)范性以及 HTML 結(jié)構(gòu)的合理性。但是很多人在使用 Bootstrap 時只是依照文檔盲目的復(fù)制黏貼，并沒有仔細(xì)考慮每個類的用處，也沒有考慮 HTML 結(jié)構(gòu)搭建的是否合理。在平時的工作中，我一直和同事強(qiáng)調(diào)，一定要挖掘框架的精髓，盡可能的使用框架本身具有的類實(shí)現(xiàn)布局，幾乎所有的 UI 布局都可以使用框架本身完成而不需要編寫額外的冗余的樣式。本文的目的就是介紹如何使用 Bootstrap 搭建常用的布局，并保證布局具有合理的 HTML 結(jié)構(gòu)。不管是傳統(tǒng)開發(fā)，還是使用框架，搭建布局的思想是不會變的。本文所有案例均以 Bootstrap 3 為例， Bootstrap 4 變化較大，但也基本適用，需要讀者仔細(xì)比對，不可盲目照抄。
合理利用柵格 保證合理嵌套Bootstrap 柵格類的隨意嵌套是造成 HTML 結(jié)構(gòu)混亂的主要原因，雖然 Bootstrap 的柵格類在隨意嵌套時并不會出現(xiàn)嚴(yán)重問題，但會引發(fā)潛在的問題，對于細(xì)節(jié)控是無法容忍的。比如下面的這種常見錯誤嵌套：
.col-md-8.col-md-4.col-md-6
表面看并沒有大問題，但是如果將柵格描邊，就會看出不同，見下面的 CodePen：
See the Pen Bootstrap-demo
我們必須明白每個 Bootstrap 柵格類的作用。其中 .row 和 .col-* 必須要搭配使用，缺一不可，因?yàn)?.row 是為了抵消 .col-* 的 margin 負(fù)值，所以并不是可有可無的類。所以，上面例子的正確結(jié)構(gòu)如下：
.col-md-8.col-md-4.col-md-6
這是我工作過程中見過的最多的一種錯誤，必須格外注意。
靈活利用柵格偏移柵格的列偏移 .col-{breakpoint}-offset-* 應(yīng)該也算是比較常用的布局類，但是我們往往忽視它在大塊版面布局的作用。舉個例子，比如一個登錄框在右側(cè)的登錄頁面：
對于表單在右側(cè)的布局，實(shí)現(xiàn)方式有很多，比如多帶帶使用 float 實(shí)現(xiàn)偏移，或者使用絕對/相對定位實(shí)現(xiàn)。但是更好的方式應(yīng)該是使用柵格的列偏移實(shí)現(xiàn)，因?yàn)闁鸥裰С猪憫?yīng)式布局。
以下是響應(yīng)式登錄頁的例子：
See the Pen Bootstrap-demo
建議在 CodePen 中打開查看效果，因?yàn)槲业牟┛蛢?nèi)容區(qū)較窄，所以只能看到響應(yīng)式布局的小屏斷點(diǎn)。
雖然柵格布局很好，但在工作中一定要謹(jǐn)慎使用，因?yàn)楹芏嗖欢岸说脑O(shè)計(jì)師或產(chǎn)品會對前端人員吹毛求疵，這樣的話也只能根據(jù)具體要求做一些調(diào)整了。
水平表單排列表單中的橫向柵格布局非常常見，Bootstrap 官網(wǎng)也給出了案例，但是對于多列的橫向表單布局會稍顯復(fù)雜，過多的柵格嵌套讓人抓狂。但是只要記住一點(diǎn)，布局就會游刃有余。
通過添加 .form-horizontal 類，表單就可以橫向排布，此時的 .form-group 類就相當(dāng)于 .row 類，兩者的行為是一樣的，所以此時無需再添加 .row 類。
注意，在 Bootstrap 4 中， .row 類不能省略，需要寫成這樣 .form-group row 才行。其實(shí)也沒有什么區(qū)別，都是為了形成 .row > .col-* > .row > .col-* 這種結(jié)構(gòu)。
以下是 Bootstrap 3 橫向表單布局的例子：
See the Pen Bootstrap-demo
上面的例子比官網(wǎng)多了一層?xùn)鸥?，只有在大屏中才能看到效果，這種柵格內(nèi)的表單嵌套在不熟悉 Bootstrap 的情況下很容易寫亂，但只要記住了上面提到的規(guī)則，就可以輕而易舉的寫出來。
靜態(tài)表單排列很多人在看到上面的結(jié)構(gòu)時，幾乎二話不說，就寫出 ul>li 這樣的布局，而且添加諸如 .list .item 這些無意義的類。依然是開篇提到的，我們必須始終堅(jiān)持一個原則，盡可能不要隨意添加樣式，而是探索框架本身具有的類，幾乎都可以找到解決方法。
仔細(xì)想想，上面的例子中的布局方式無非就是柵格內(nèi)的行內(nèi)表單。所以實(shí)現(xiàn)方法非常簡單，完全不用自己編寫樣式。
以下是實(shí)時演示，建議在大屏查看效果：
See the Pen Bootstrap-demo
表格結(jié)構(gòu)關(guān)于表格可以說的并不多，只是建議全部采用響應(yīng)式表格結(jié)構(gòu)，也就是添加 .table-responsive 元素。因?yàn)樵趯?shí)際工作中，表格的列數(shù)一般比較多，響應(yīng)式表格應(yīng)該是更通用的方案。
先排列，再排行...
這條規(guī)則只是建議，因?yàn)?HTML 的塊級元素默認(rèn)是占一行，所以先排列可以減少 HTML 的結(jié)構(gòu)，使結(jié)構(gòu)更簡潔。另一方面，對于高度不同的元素，哪怕是很小的差距，都會出現(xiàn)布局的錯位，見下面的 CodePen：
See the Pen Bootstrap-demo
為了解決這個問題，必須在每一行都添加?.row 。不過在某些時候，我們也不得不這樣寫。
...............
如果是先排列，就不用擔(dān)心上面的問題，這種排列方式有點(diǎn)像瀑布流。
... ...... ...
這條建議需要根據(jù)實(shí)際的需求調(diào)整，需要和設(shè)計(jì)師以及產(chǎn)品做好溝通，不然肯定面臨返工的危險。只能說從結(jié)構(gòu)上而言，先排列會好一些。假如使用 Flex 布局的話，就可以很好地解決這個問題了。
總結(jié)先說點(diǎn)題外話，我一直覺得優(yōu)秀的網(wǎng)頁作品不是或者不全是設(shè)計(jì)師決定的，甚至不應(yīng)該由設(shè)計(jì)師決定，因?yàn)閲鴥?nèi)的設(shè)計(jì)師真正懂前端的還是少數(shù)，而且設(shè)計(jì)風(fēng)格難以緊跟潮流。設(shè)計(jì)師和產(chǎn)品經(jīng)常將交互掛在嘴邊，但是他們提出的很多交互形式在我們前端人員看來都是網(wǎng)頁必備的基本要素，并不是一個亮點(diǎn)。反觀國外，設(shè)計(jì)師懂前端甚至很精通，前端開發(fā)者也是設(shè)計(jì)師或者交互設(shè)計(jì)師，每個人都是復(fù)合型人才，這是值得我們學(xué)習(xí)的方面。
言歸正傳，本文主要介紹了在使用 Bootstrap 時如何搭建更合理的結(jié)構(gòu)，然而在實(shí)際工作中，不管我們用不用框架，都應(yīng)該盡可能的精簡并規(guī)范化 HTML 結(jié)構(gòu)，這是前端開發(fā)人員應(yīng)該養(yǎng)成的良好習(xí)慣。另外說明一點(diǎn)，因?yàn)榭蚣苁呛芏鄦栴}的抽象，所以在通用性的前提下，不可避免的會有一些冗余的 HTML 結(jié)構(gòu)。
我在開篇就強(qiáng)調(diào)盡量不要編寫冗余的樣式，但是如果真的不能滿足布局要求時，我們首先應(yīng)該使用 helper 解決，Bootstrap 3 的 helper 并不豐富，而 Bootstrap 4 則添加了大量的 helper 輔助類。我在之前也寫了一篇關(guān)于 helper 的文章《如何編寫通用的 Helper Class》，感興趣的話可以看一看。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/51862.html
摘要：事實(shí)上，的依賴包已經(jīng)包含了，因此準(zhǔn)確地說，只用即可。這個文件的內(nèi)容初始是空的，表示全部使用的默認(rèn)值。的自動刷新很久之前提到的依賴包終于派上用場了。修改任意文件后，按執(zhí)行，瀏覽器就會在編譯完成后自動刷新。 引言 說起用Java語言來搭建Web項(xiàng)目，那么最令人熟知，也應(yīng)用最廣的框架就是Spring MVC了。不過，Spring MVC的Web項(xiàng)目搭建起來并不是一件簡單的事，而如果你也像我這...
摘要：此篇文章并未如何教你怎么面試的時候吹逼，而是給一點(diǎn)點(diǎn)建議，如何更聰明地達(dá)到目的。據(jù)不完全統(tǒng)計(jì)，基本都是做管理后臺改。不要太沉溺和糾結(jié)于技術(shù)，把重心移到業(yè)務(wù)能力上，踏踏實(shí)實(shí)做事。 前言 ??對于很多剛畢業(yè)或者大四的同學(xué)，都會有個困惑，我如何學(xué)PHP,為什么知識會那么雜，然后實(shí)習(xí)中公司大概需要哪些要求。此篇文章并未如何教你怎么面試的時候吹逼，而是給一點(diǎn)點(diǎn)建議，如何更聰明地達(dá)到目的。 實(shí)習(xí)可...
上一章我們的網(wǎng)站頁面實(shí)在太粗糙，你肯定不會拿來做真正的博客首頁。因此這章我們要借助Bootstrap的力量，改寫一個大氣的博客。 配置Bootstrap 4 Bootstrap是用于網(wǎng)站開發(fā)的開源前端框架（前端指的是展現(xiàn)給最終用戶的界面），它提供字體排印、窗體、按鈕、導(dǎo)航及其他各種組件，旨在使動態(tài)網(wǎng)頁和Web應(yīng)用的開發(fā)更加容易。 Bootstrap有幾個版本都比較流行，我們選擇最新版本的Boots...
摘要：場景為了更清晰的安排年前年后的工作和值班，現(xiàn)在要對過年期間人員請假的情況進(jìn)行統(tǒng)計(jì)，并且進(jìn)行一個簡單的管理。我們現(xiàn)在來訂閱一個名為的事件，用來表示表格中需要展示每條數(shù)據(jù)。 前言 React 導(dǎo)讀（一）React 導(dǎo)讀（二） 在之前 2 篇文章中中學(xué)習(xí)到了寫第一個 Web 組件以及常用的生命周期函數(shù)的使用，這篇文章將繼續(xù)之前的目錄，開始新的知識點(diǎn)補(bǔ)充： [x] React 如何編寫 He...
摘要：此項(xiàng)目前端使用框架，加上這些常用擴(kuò)展后的其中還加入了加載器解析工具前端動畫等，不需要的可以自行刪除。沒有的，需要設(shè)置淘寶鏡像，下載的是國外的鏡像，速度慢而且可能出現(xiàn)下載失敗的問題。 本篇只是實(shí)現(xiàn)了 基礎(chǔ) 的功能，對于實(shí)際的項(xiàng)目中的權(quán)限等還未涉及，這些會在后期逐步完善。相關(guān)項(xiàng)目 laravel-vue-iview 的 GitHub 地址 戳這里，此項(xiàng)目基本可用于實(shí)際開發(fā)工作。 Lara...
閱讀 2856·2023-04-26 01:02
閱讀 1884·2021-11-17 09:38
閱讀 808·2021-09-22 15:54
閱讀 2912·2021-09-22 15:29
閱讀 903·2021-09-22 10:02
閱讀 3456·2019-08-30 15:54
閱讀 2021·2019-08-30 15:44
閱讀 1607·2019-08-26 13:46
