一. 整體架構
1. css-12柵格系統
把網頁寬度均分為12等分（保留15位精度）——這是bootstrap的核心功能。
2.基礎布局元件
包括排版、按鈕、**、布局、表單等等。
3.jquery
bootstrap外掛程式的基礎
4.響應式設計
相容多個終端。這是bootstrap的終極理念。
5.css外掛程式
提供豐富的樣式。
6.js外掛程式
二. 柵格系統
1.基本實現過程
定義容器的大小——跳轉邊距——媒詢
有以下要求：
（1）一行（row）資料必須包含在.container中。
.container預設居中。寬度分為4種，超小屏（100%），小屏（750px），中屏（970px），大屏（1170px）。row的邊距（左右margin，下同）是-15px。
（2）有了row，才能搭建列（col）。所有元件必須放在col內，只有col才能作為row的直接子元素。
.col的左右內邊距（padding-left,right）為15px。也就是說，最小的col有30px。
（3）在以上基礎上快速搭建布局
（4）col之間是木有邊距的，應當使用padding來產生col的視覺距離。這樣做會導致乙個row容不下12個col，這時應當用負的margin來抵消padding的影響。
（5）柵格系統是通過指定1-12的值來設定範圍的。對於col的規格，開發者指定了4個不同的螢幕
如圖，在
內包含若干個col-md-「1-12數字」>
效果是小結： col組合其實就用了兩個屬性：float:left和width%。
2. 實現方案
（1）偏移（.col-尺寸大小-offset-*）
把整個col向右邊偏移，在原始碼實現上，.col-尺寸大小-offset-x 就是margin-left:8.33333333333...*x；
情景一：頁面主體只佔據container的66%，而且居中。
解決方案：col-md-offset-2——向右偏移了2個col。
col-md8
情景二：寬度足夠的情況下，我不想所有的col緊緊挨在一起。兩個要有1個col的距離。
col-md8
col-md3
（2）巢狀
柵格系統的col是可以針對父級的row進一步再進行百分比的劃分，比如說：
我是整行
我是一半
我是6/12*6/12=1/4
（3）排序
強行把當前列向左或者向右推拉
只有兩個語句：col-尺寸大小-push-*（）和col-尺寸大小-pull-*（）
col3
col3被強行推了6格。同理
col3
是向左拉了一格。
效果相當於絕對定位。在原始碼實現上，也是做定位：
.col-md-pull-8
3.響應式柵格若干問題
看起來12列柵格布局實現得很死板，但是組合螢幕尺寸，方案就非常多了
（1）跨裝置組合
比如我要為自己的網頁做一適配小屏和中屏的版本，可以把類疊加到class上。
&www.cppcns.comlt;div class="col-sm-6 col-md-3" style="background: #abc">col3
深入理解BootStrap之柵格系統（布局）
1 柵格系統 布局 bootstrap內建了一套響應式 移動裝置優先的流式柵格系統，隨著螢幕裝置或視口 viewport 尺寸的增加，系統會自動分為最多12列。我在這裡是把bootstrap中的柵格系統叫做布局。它就是通過一系列的行 row 與列 column 的組合建立頁面布局，然後你的內容就可以...
深入理解List集合框架
前言 講講什麼是集合框架？集合框架是為表示和操作集合而規定的一種統一的標準的體系結構。任何集合框架都包含三大塊內容 對外的介面 介面的實現和對集合運算的演算法。沒學集合框架之前我們儲存多個資料是採用陣列實現的，但是我們要建立陣列的話先要初始化陣列容量 int arr new int 10 現在設定陣...
深入理解springboot日誌框架
一 springboot預設日誌框架 我們先檢視一下springboot專案的日誌jar包依賴 二 springboot日誌架構的切換 接下來介紹日誌框架的切換，以logback切換成log4j為例，我們看一下springboot官方提供的日誌使用圖 檢視右上角的流程，可以看出，我們面向slf4j ...