資訊專欄INFORMATION COLUMN
摘要：通過閱讀發現了不少知識的盲點和誤解，對有了更深入的理解。總結幾點印象較深的體會，分享給大家。但是通過閱讀源碼改變了這種認識模塊化很簡單靈活，這是其優點，同時也是一個缺點。
歡迎到個人博客參觀: 點擊這里
bootstrap已經使用了很長時間，但是從來沒有好好研究過其設計結構，春節期間閑來無事就閱讀了源碼。通過閱讀發現了不少知識的盲點和誤解，對css有了更深入的理解。總結幾點印象較深的體會，分享給大家。
1. 移動優先在移動互聯網時代，很多公司都堅持移動端優先的原則，bootstrap也迎合了這種需求，具體表現在如下方面:
相對單位: %、rem的大量使用
grid系統: 為了使用不同的設備，grid系統對xs、sm、md、lg、xl進行了響應式設計，通過media query做到適配
支持flexbox: mobile應該很快就可以使用flexbox
2. 代碼結構 2.1 從less到saas使用sass作為bootstrap的css預處理器，以前對預處理器不是很感冒，認為將簡單問題復雜化了。但是通過閱讀源碼改變了這種認識:
css模塊化: css很簡單、靈活，這是其優點，同時也是一個缺點。通過sass預處理器，可以根據功能將css模塊化，便于css的管理
復用: 變量、mixin、function等技術，可以方便地進行代碼復用
簡潔: 支持each、if等語法，動態輸出內容，例如繁瑣的grid系統，是通過少量的sass代碼做到的
2.2 代碼層次根據代碼的層次，sass的源碼分為如下幾部分:
支撐部分: 包括變量定義、大量的mixin文件，這是整個bootstrap的基礎代碼，也是進行個性化定制的其實位置
全局部分: normalize.scss用于覆蓋各種瀏覽器的默認行為，保證起始樣式的一致性
基礎樣式部分: 包含了reboot、typography、images、code、table、forms、buttons等，主要是一些常用的基礎html元素
grid部分: 選擇性支持flexbox，默認情況下是關閉的，只要將$enable-flex=true就可以使用flexbox完成頁面的柵格布局
組件部分: 包含大量常用的基礎組件，有些需要添加jQuery plugin
工具類部分: 常用的簡單樣式，例如間距、文本對齊、字體加粗等
3. GridGrid用于頁面的整體布局，同時css3也在起草grid布局模塊。Grid也可以多帶帶使用，bootstrap4提供了一個多帶帶的文件(bootstrap-grid.scss)來實現柵格系統，具體來說Grid有如下特點:
默認情況下是12柵格
柵格可以嵌套使用
支持5種尺寸下的響應式樣式
5個尺寸可以組合使用，適配不同終端下終端
支持使用flexbox
4. flexboxflexbox目前還處于草案階段，不過高級瀏覽器已經開始支持，如果只考慮高版本瀏覽器的話，可以啟動通過$enable-flex=true來啟動flexbox。
flexbox是未來布局的趨勢，尤其是在復雜頁面布局上，總得來說具有如下幾個優點:
可伸縮性: 通過flex來實現空間的伸縮，在響應式設計中更加靈活(無需關注margin、padding、border等)
順序定制: flexbox的一大亮點，通過order指定元素的顯示順序
輕松對齊: 通過jsutify-content、align-items可以方便實現元素的對齊
方向性: 通過flex-flow方便確定布局的方向
5. 組件設計bootstrap里面提供了大量的常用組件，可以直接使用或者簡單進行二次開發，加快日常業務的開發速度。同時，有些組件需要跟js(jQuery)配合，實現組件的交互效果。
里面的組件按是否需要js，可以分為兩類:
無需js配合: Button系列、Form、Input系列、DropDown、Jumbotron、Label、Alert、Cards、Nav系列、Breadcrumb、Pagination、Progress、List
需js配合: Modal、Tooltips、Popovers、Carousels
需要注意的是Cards是bootstrap4新增的組件。
6. 參考http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/115037.html
摘要：對于非前后端分離應用來說，應該是目前的最佳前端框架之一了。所以下文中默認使用的語法。可以使用的組件特性，來擴展，這樣會在編輯的源碼，更加的有結構引用引用編譯自定義源碼編譯自定義源碼參考參考摘要 因為打算寫一個小網站，而個人時間又不是那么充裕，所以沒有選擇前后端分離的架構。 對于非前后端分離應用來說，Bootstrap應該是目前的最佳前端框架之一了。 而Bootstrap4，是Bootstra...
摘要：在這里面有一個新定義的類，它這個嵌入式展開后是，從結構可以看出來，它就是加在元素上的，可以取消列的默認間距。在這里我提供一個自定義的，名字也很簡單。寫的時候注意順序，要按照升序排列，小的放在上面，即在上面，寫反了將失效。 本文所引用的版本為Bootstrap 4 Beta版，閱讀者請先下載好相關源文件。 時光荏苒，若后續版本代碼發生變化，將看心情進行更新補充。如果你覺得本文不錯，歡迎...
摘要：前面說了的下載和簡單使用，現在我們接著往下學習，的響應式布局主要依靠柵格系統來實現的。好了，柵格系統暫時先介紹到這了，有什么不懂的可以給老留言哦。前面說了Bootstrap4的下載和簡單使用，現在我們接著往下學習，Bootstrap4的響應式布局主要依靠柵格系統來實現的。面老K先來講解一下Bootstrap4的柵格系統，讓你能夠更快的了解Bootstrap4.（PS：更詳細的介紹請訪問原K先...
摘要：使用，已改為使用，所以首先解決編譯問題。編譯與無關，需要在系統中安裝編譯環境。使用編譯源碼結構簡單分析源碼，其中文件夾包含了所有樣式文件源碼，部件和工具都是單獨的文件，很清晰。可以看到命令已成功運行，及文件已經生成。 環境： macOS 10.13.6 node.js 8.11.3 sass 1.10.3 bootstrap 4.1.3 vs code 1.25.1 ...
摘要：歷經三年開發，前端框架正式發布了。支持發布時，曾放棄了對版本的支持，給很多用戶造成了麻煩，同樣的錯誤不會犯第二次。在不久的將來，開發團隊還會繼續修復的，改進文檔。最終發布之后，的文檔也不會下線。除了發布外，官方還發布了主題。 歷經三年開發，前端框架Bootstrap 4正式發布了。然而今天的Web世界已經和當初Mark Otto發布Bootstrap時的情況大為不同，一些開發者由此質疑...
閱讀 1788·2023-04-26 01:41
閱讀 3088·2021-11-23 09:51
閱讀 2749·2021-10-09 09:43
閱讀 9067·2021-09-22 15:13
閱讀 2465·2021-09-07 09:59
閱讀 2636·2019-08-30 15:44
閱讀 1142·2019-08-30 12:45
閱讀 2628·2019-08-30 12:43
