一、基礎(chǔ)知識

1.整體架構(gòu) 以響應(yīng)式設(shè)計為理念，css組件、js插件+jquery、基礎(chǔ)布局組件和12柵格系統(tǒng)搭建。 1.1響應(yīng)式設(shè)計：結(jié)合media query查詢，適應(yīng)更多設(shè)備，自動適應(yīng)用戶的設(shè)備環(huán)境，不必為每個終端做一個特定的版本。 2.css12柵格系統(tǒng) 將容器平分12份，行（row）必須包含在.container中，只有列（column）可作為行的直接子元素。ps：如果要充滿屏幕100%顯示，那就不能用container樣式了，因為該樣式針對4種不同的屏幕大小固定了尺寸，可自己定義一個樣式，注意修復container的-15px的外邊距。 3.基本用法 3.1列組合：使用數(shù)字來合并，有點類似colspan，col-md-4，其中col指的是列，md指的是中型屏幕，4指的是12列中占4列的寬度，實現(xiàn)方式為左浮動加寬度百分比 3.2列偏移：使用offset來定義，具體樣式如：.col-md-offset-*，實現(xiàn)原理是利用1/12的margin-left 3.3列排序：通過push（推）和pull（拉）來改變左右浮動，以左為基準 4.響應(yīng)式柵格 4.1跨設(shè)備組合定義：md-中屏，超小-xs，小型-sm，大屏-lg。向大兼容，不支持向小兼容。 4.2清除浮動：在定義支持多個設(shè)備的樣式時，比如：col-xs-6 col-sm-3，在超小屏有可能會發(fā)生錯位，需要用clearfix來清除，比如：<div class="clearfix visible-xs"></div>，visible-xs是指當能夠在超小屏幕上顯示 5.css組件 原理：附加和覆蓋的原則，后邊的樣式覆蓋掉前面的樣式 5.1顏色樣式：默認為很多組件提供了5種顏色，分別是primary（重點藍）、success（成功綠）、info（信息藍）、warning（警告橙）、danger（危險紅） 5.2尺寸樣式：一般組件都有4種尺寸：超小（xs）、小型（sm）、普通（default也可以不寫，默認）、大型（lg）。 同一個組件的不同類型的樣式可以組合到一起使用，比如顏色樣式btn-success和尺寸樣式btn-lg，示例：btn btn-success btn-lg

轉(zhuǎn)載于:https://www.cnblogs.com/zinan/p/5809585.html

總結(jié)

以上是生活随笔為你收集整理的【分享】bootstrap学习笔记的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。