Bootstrap 關於背景影象的自適應和行的柵格化
阿新 • • 發佈：2019-01-25
Bootstrap 是基於列來柵格化網頁的，因此使用它，麻煩就在於行座標難以確定，bootstrap 是根據列座標來實現頁面編輯的。
Bootstrap 在初次使用時的一些感受
它在行編輯的同時，實現了背景圖片的預設自適應、文字與所在區域的自適應，文字在各個區塊 div 之間的串擾，以及瀏覽器工作框改變尺度時內容的正常顯示。
但是，在瀏覽器大規模的比例縮放時，背景圖片和圖片之上的元件容易分離。不過這種只是兩個部分分離的結果，要比不使用 Bootstrap 編輯網頁結構要好很多。
行的間距調整 ———— 且暫理解為行的格柵化吧
使用Bootstrap的時候，首先一個問題是調整與上邊界的距離，往往採用 top 去實現就比較捉急，在position屬性為absolute的時候，不論是 top 結合畫素還是結合百分比來表示一個div，都會出現無法正常柵格化的問題。為了滿足佈局上的間距要求，常常可以使用換行符<br>實現文字的間距調整。
在頁面內容比較少的時候，為了在頁面底部實現頁尾的資料編寫，比較無賴的一個方法就是使用margin-top:一個比較大的畫素值；實現文字的顯示沉底。
使用container與不使用container的區別
使用容器時，在容器兩端，會給容器中的內容預留兩個列寬，在容器中間將會實現 12 個格柵的等分。
不使用容器時，會給出佔滿整個頁面的佈局內容，也適用12個列寬的佈局。
container 和 row 的使用
一般 container 類在外，row 類在內，實現對格柵頁面的編輯。
一個模組的整行寫完，再寫下一個整行的模組，每次模組的最外兩層，就是容器和行的類。
為了讓元件在頁面中間或者偏移中間顯示，比較方便的是採用 col-sm 和 col-sm-offset 使用偏移常常需要結合瀏覽器不斷地在html檔案之中除錯。
Bootstrap 在初次使用時的一些感受
它在行編輯的同時，實現了背景圖片的預設自適應、文字與所在區域的自適應，文字在各個區塊 div 之間的串擾，以及瀏覽器工作框改變尺度時內容的正常顯示。
但是，在瀏覽器大規模的比例縮放時，背景圖片和圖片之上的元件容易分離。不過這種只是兩個部分分離的結果，要比不使用 Bootstrap 編輯網頁結構要好很多。
行的間距調整 ———— 且暫理解為行的格柵化吧
使用Bootstrap的時候，首先一個問題是調整與上邊界的距離，往往採用 top 去實現就比較捉急，在position屬性為absolute的時候，不論是 top 結合畫素還是結合百分比來表示一個div，都會出現無法正常柵格化的問題。為了滿足佈局上的間距要求，常常可以使用換行符<br>實現文字的間距調整。
在頁面內容比較少的時候，為了在頁面底部實現頁尾的資料編寫，比較無賴的一個方法就是使用margin-top:一個比較大的畫素值；實現文字的顯示沉底。
使用container與不使用container的區別
使用容器時，在容器兩端，會給容器中的內容預留兩個列寬，在容器中間將會實現 12 個格柵的等分。
不使用容器時，會給出佔滿整個頁面的佈局內容，也適用12個列寬的佈局。
container 和 row 的使用
一般 container 類在外，row 類在內，實現對格柵頁面的編輯。
一個模組的整行寫完，再寫下一個整行的模組，每次模組的最外兩層，就是容器和行的類。
為了讓元件在頁面中間或者偏移中間顯示，比較方便的是採用 col-sm 和 col-sm-offset 使用偏移常常需要結合瀏覽器不斷地在html檔案之中除錯。