bootstrap-全局css樣式

bootstrap-全局css樣式

 

1.bootstrap是一個前端框架

2.基本模板：viewport視口能夠解決移動端設備網頁自適應問題

3.版心（.container）  流式版心（.container-fluid）寬度100%（遊覽器的寬度）

4.柵格系統 （一行分紅12分，每一列均可以在行中佔據相應的分數，根據屏幕的大小，改變佔據的分數）

             

   .col-xs 手機   .col-sm 平板  .col-md 電腦屏幕  .col-lg 超大屏幕

 eg:

  <div class=「contanier」>

    <div class="row">

           <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>

 

       </div>

   </div>

5列偏移

使用 .col-md-offset-offset 至關於偏移 好像是給列增長了left-marign

6 列排序

 經過使用 .col-md-push 和 .col-md-pull類就能夠很容易 的改變列（column）的順序。push 是日後面移動多少單位，不會影響其餘列

 

 

 

 

 

 

7表單

 

（1）.form-group 可以給帶lable、表單控件提供更好的佈局，paddding

（2）.form-control能讓input\select\textarea能widtt 100%

8表格(.table)

 條紋狀表格(.table-striped)

 帶邊框的表格(.table-bordered)

 鼠標懸停(.table-hover)

 緊縮表格(.table-condensed)

 

 顏色設置用 .danger .warning .success .info

 響應式表格:響應式表格

 將任何 .table 元素包裹在 .table-responsive 元素內，便可創 建響應式表格，其會在小屏幕設備上（小於768px）水平滾動。當屏 幕大於 768px 寬度時，水平滾動條消失。

  eg:   

    <div class="table-responsive">

          <table class="table">

        ...

     </table>

    </div>

 

9文字對齊

.text-center

.text-left

 

10浮動

.pull-left  左浮動

.pull-right 右浮動

 

11隱藏顯示

.hidden

.hidden-md

 

.visible

.visible-md-inline-block 在md狀況下以行級塊級標籤形式顯示

 

12被刪除的文本

對於被刪除的文本使用  <del> 標籤。

無用文本

對於沒用的文本使用  <s> 標籤

插入文本

額外插入的文本使用  <ins> 標籤。

帶下劃線的文本

爲文本添加下劃線，使用  <u> 標籤

 

小號文本

，使用  <small> 標籤包裹 .small 也能夠 <small> 元素。

着重

能夠經過增長 font-weight 值強調一段文本。也能夠使用 <strong>包裹

斜體

用斜體強調一段文本。也能夠 <em>包裹

 

改變大小寫

經過這幾個類能夠改變文本的大小寫。小寫（ text-lowercase）大寫（ text-uppercase）開頭字母大寫（ text-capitalize）

水平排列的描述

.dl-horizontal 能夠讓  <dl> 內的短語及其描述排在一行