media 根據不同的螢幕大小,選擇不同的CSS檔案
<link rel="stylesheet" type="text/css" media="screen and (max-width:500px)" href="small.css" target="_blank" rel="external nofollow" >
<link rel="stylesheet" type="text/css" media="screen and (min-width:500px)" href="large.css" target="_blank" rel="external nofollow" >
Bootstrap----部分類名的應用
顔色類名: -danger紅 -warning黃 -success綠 -info資訊藍 -primary主要藍 (前面加上相關基本類名 eg: btn-danger 按鈕是紅色)
文本:
文本位置: 居中 text-center , 居右 text-right , 居左 text-left , 兩端對齊 text-justify (IE 支援的浏覽器不多)
大小寫: 大寫 text-uppercase 小寫 text-lowercase 首字元大寫 text-capitalize
突出強調 lead 不換行 text-nowrap
文本顔色: 紅色字型text-danger ...... 柔和灰 text-muted
背景顔色: bg-danger bg-warning bg-success bg-info bg-primary
清單:
無樣式 list-unstyled 行内 list-inline
table基本表格樣式:
每個類名是一種效果,它們之間需要組合使用
class=" table table-bordered table-striped table-hover " table-striped 表示隔行有條紋
按鈕:
類型大小: btn-lg 大 btn 基本按鈕樣式 btn-sm 小按鈕 btn-xs 小小按鈕
按鈕顔色: btn-danger ...... btn-link
按鈕分組: btn-group
活躍的 active 禁止點選 disabled 關閉 close(向右浮動) (×) × <button class="btn close"> × </button>
左右浮動: pull-left pull-right 清除浮動: clearfix
顯示與隐藏: show hidden
響應式: 大屏顯示 visible-lg-inline 大屏隐藏 hidden-lg 三種字尾: inline block inline-block
263個圖示的類:
要放圖示: glyphicon 哪個類型 :glyphicon-waining-sign 效果圖:
分頁: 用ul-li 标簽寫,
<ul class="pagination pagination-lg">
<li>标簽内部放<a>标簽 eg: <li><a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >⟨</a></li> <li><a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >1</a></li> <li><a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >⟩</a></li>
翻頁: 用ul-li 标簽寫,
<ul class="pager">
<li>标簽内部放<a>标簽 eg: <li><a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >上一頁</a></li>
對齊翻頁: 用ul-li 标簽寫,
<ul class="pager">
<li>标簽内部放<a>标簽 eg: <li class="previous"><a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >上一頁</a></li>
<li class="next"><a href="" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >上一頁</a></li>
徽章: badge
表單:
form 塊級 form-inline 行内 form-ground 分組
input标簽:
form-control input基本樣式 input-ground 分組 input-ground-addon将框外文字與輸入框結合在一起
在輸入框後添加圖示:
下拉菜單: (預設隐藏 點選顯示)
1.按鈕和菜單放在一個外層盒子中 類名為dropdown(下拉) 或 dropup(上拉) 其内部屬性和類都不變
2.按鈕需要設定一個屬性 data-toggle="dropdown"
3.菜單<ul>标簽設定類名 dropdown-menu
栅欄(格)系統:
把螢幕分為12列, 通過行row 列col 組合來配置設定格子
最外層盒子的類名為 container 固定寬度 或 container-fluid 100%寬度
大屏 lg >1200px 中屏 md >992px 小屏 sm >768px 特小屏 xs <768px
col 隻能作為 row的子标簽 eg: <div class="row"><div class="col-md-4"></div></div> 若另起一行,隻占設定的比例
如果每一份要使用栅格,就要使用外層類名為row的盒子
替換 col-md-pull-移動的列數 向左邊移動
col-md-push-移動的列數 向右邊移動
留白白 空白位置在中間,通過移動 col-md-offset-移動的列數
導航: ul-li
面包屑導航: (路徑導航) <ul>的類名為: breadcrumb 類似于這種效果: qq / 分組 / 同學
導航nav:
nav 導航樣式 nav-tabs 基本導航 nav-pills 膠囊 nav-stacked 豎向 nav-justify 兩端對齊
導覽列:
navbar 導覽列 navbar-default 基本導覽列 navbar-inverse 反色導覽列