bootstrap 概括

1.窗口和設備的窗口保持一致,初始縮放100%,禁止用戶縮放css

<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">html

2.css 佈局api

<div class="container">內容</div>      固定寬段1170px佈局

<div class="container-fluid">內容</div>      固定寬段100%ui

3.排版spa

h1   36pxscala

h2   30pxcode

h3   24pxorm

h4   18pxhtm

h5   14px

h6   12px

.page-header   設置頁面的頭部  給標題加一個分割線

<small></small>   副標題   小一號

<big></big>   副標題  大一號

<strong></strong>   建議使用

<em></em>    建議使用

<del></del>   刪除線

4.文本對齊方式

.text-left     左對齊

.text-center   居中

.text-right    右對齊

.text-uppercase  英文所有大寫

.text-lowercase    所有英文小寫

.text-capitalize    首字母大寫

5.列表

.list-unstyled    ul 去遠點 去掉原有的格式

.list-inline        變成行內樣式 

自定義列表   橫向排列

<dl class="dl-horizontal"> 

  <dt> 標題</dt>

  <dd>標題解釋</dd>

 

</dl>

6.表格

.table   是一個基類  若是要加樣式必需要有

.table-bordered   表格的外邊框

.table-hover   鼠標懸停效果

.table-striped   各行換色

.table-condensed  變緊湊  主要是padding值減半

.table-responsive   給table的父元素加   變成響應性的表格  以移動設備爲優先  

7.響應式圖片

.img-responsive  響應式

.img-circle   橢圓形

.img-rounded   圓角矩形

.img- thumbnail   圓角邊框 

8.柵格系統

柵格系統必定要放在容器中    .container  .container-fluid

 

9.偏移

.col-md-offset-*  只能向右偏移   

10.排序

.col-md-push-*     向左排序

.col-md-pull-*  向右排序

11.表單

.form-group 一組

.form-control  圓角輸入框   給輸入框加

 .checkbox-inline 或 .radio-inline 類應用到一系列的多選框(checkbox)或單選框(radio)控件上,是給label  加

.disabled  禁止 

.input-group-addon  搜索框的樣式

.form-horizontal  給表單加 變成響應式效果   必須結合柵格系統

相關文章
相關標籤/搜索