柵格系統分為12列布局,超過12列會自動跳轉到下一行,
對於大屏,1200px以上的col-lg-
對於中屏:992px~1200px col-md-
對於小屏:768px~992px;
對於超小屏:<768px;
他是響應式的
3.css的基本架構
1。基礎樣式
btn alert btn-info btn-success btn-warning btn-danger btn-lg btn-sm btn-ns
狀態樣式:active disabled
特殊元素樣式:dropdown-menu>li>a:hover
並列元素樣式:btn-group .btn+btn
巢狀元素樣式btn-group.btn
動畫樣式 progress active
下面從標題講起
h1~h6標籤,bootstrap自己定義了乙個副標題標籤
主要設定行高是h1~h6顯示的65%,顏色為深灰色,並列顯示.
2**
**乙個基礎類 table 加上下面幾個類修飾作用的table-hover table-striped table-bordered 具體自己查手冊
列表 ul ol dl三種列表形式
bootstrap預設對ul ol樣式進行很小的更改,給li設定了border-bottom:20px,將其padding設定為0
list-unstyled
list-inline
第乙個取消專案編號,第二是讓其水平排列
dl主要是個其中dl加上乙個font-weight:bold效果,想要水平排列的話,就加上dl-horizontal樣式
標題
我是副標題
4 **
解析其中一部分的**
單行內聯**要用code包含
bootstrap對於code的設定
code
表示使用者輸入的**,
多行**塊,具體見手冊
4文字
dasdadasdasdadsdsdada溼噠
主要bootstrap提供了一些標籤用來強調的
dasda
dasdad
3.6按鈕
按鈕 1.按鈕的樣式
按鈕的基礎類和table一樣必須要加上btn btn-primary
btn-success btn-warning btn-danger btn-link
2 按鈕的大小
btn-lg btn-sm btn-xs
3。多標籤支援
按鈕 按鈕
4.活動的狀態,主要給其加上active 或者disabled倆個類,改變狀態
按鈕 表示禁用了
按鈕預設就新增了active的樣式。
5影象
提供縮圖
主要給設定100%的寬度height:auto ;這樣的話隨瀏覽器視窗縮小而縮小了.
img-rounded
img-circle:
6。輔助樣式
文字 text-muted text-primary text-danger text-warning text-success text-info
文字背景樣式
bg-success bg-danger bg-primary bg-warning bg-info
關閉圖示 × ×
其中close主要設定圖示的位置在右上方
7下拉箭頭
8內容浮動
pull-right :float:right;
pull-left:float:left;
9隱藏與現實
隱藏:bootstrap提供了樣式hidden invisible
顯示:show;
10.表單
使用者登入
登入賬戶
內聯:給form加上form-inline 橫向表單form-horizontal
使用者名稱
表單這塊比較重要,控制項較多,就不講了,自己查閱手冊.
Bootstrap學習總結
1.bootstap的使用模板 自己的樣式檔案要放在下面才會覆蓋生效 href css index.css rel stylesheet head 你好,世界!h1 src script src script body html 2.禁止響應式布局 bootstrap會自動幫你針對不同的螢幕尺寸調整...
Bootstrap學習總結
1.bootstap的使用模板 zh cn 複製 2.禁止響應式布局 bootstrap會自動幫你針對不同的螢幕尺寸調整你的頁面,使其在各個尺寸的螢幕上表現良好。下面我們列出了如何禁用這一特性,就像這個非響應式布局例項頁面一樣。禁止響應式布局有如下幾步 移除 此 css 文件中提到的設定瀏覽器視口 ...
Bootstrap學習總結
1.bootstap的使用模板 zh cn 複製 2.禁止響應式布局 bootstrap會自動幫你針對不同的螢幕尺寸調整你的頁面,使其在各個尺寸的螢幕上表現良好。下面我們列出了如何禁用這一特性,就像這個非響應式布局例項頁面一樣。禁止響應式布局有如下幾步 移除 此 css 文件中提到的設定瀏覽器視口 ...