html視窗配置

initial-scale=1 初始比例

user-scalable=no是否可以手動縮放

導航

導航navbar  導航預設樣式navbar-default  導航固定頂部navbar-fixed-top   導航固定底部navbar-fixed-bottom   導航右對齊navbar-right

圖片自適應

img-responsive

濾鏡效果

背景圖片加濾鏡效果原理：背景圖片上加div, 給div一個背景顏色，給顏色降低不透明度

按鈕

 <button type="button" class="btn btn-default">預設按鈕樣式</button>

按鈕hover淡入效果

.btn{transition:all 0.3s;}

表單預設樣式

<input type="text" class="form-control" placeholder="輸入內容“/>

<textarea class="form-control" placeholder="輸入內容“ rows="4"></textarea>

<input type="submit" class="form-control" value="提交“/> //提交按鈕
 

按鈕css樣式   input[type="submit"]{background-color:#000;color:#fff;}

表單下拉選擇

<div class="from-group">
    <label for="xy">選擇 </label>
    <select id="xy" class="from-control">
        <option>...</option>
        <option>...</option>
        <option>...</option>
    </select
 
>

</div>

文字居中

<div class="text-center"></div>

在css中新增如下內容 可以分別定製不同螢幕的顯示樣式：

/* 大螢幕 ：大於等於1200px*/
@media (min-width: 1200px) { ... }

/*預設*/
@media (min-width: 980px){...}

/* 平板電腦和小屏電腦之間的解析度 */
@media (min-width: 768px) and (max-width: 979px) { ... }
 
/* 橫向放置的手機和豎向放置的平板之間的解析度 */
@media (max-width: 767px) { ... }
 
/* 橫向放置的手機及解析度更小的裝置 */
@media (max-width: 480px) { ... }

以下這些可以通過媒體查詢結合大型、小型和中型裝置，實現內容對裝置的顯示和隱藏