Bootstrap 基礎(chǔ)教程
Bootstrap 環(huán)境安裝
Bootstrap 教程
Bootstrap CSS
Bootstrap CSS 概覽
Bootstrap 按鈕
Bootstrap 表單
Bootstrap 表格
Bootstrap 代碼
Bootstrap 輔助類
Bootstrap 排版
Bootstrap 圖片
Bootstrap 網(wǎng)格系統(tǒng)
Bootstrap 網(wǎng)格系統(tǒng)實例：堆疊的水平
Bootstrap 網(wǎng)格系統(tǒng)實例：手機、平板電腦、臺式電腦
Bootstrap 網(wǎng)格系統(tǒng)實例：中型和大型設(shè)備
Bootstrap 響應(yīng)式實用工具
Bootstrap 布局組件
Bootstrap Well
Bootstrap 按鈕下拉菜單
Bootstrap 按鈕組
Bootstrap 標簽
Bootstrap 超大屏幕（Jumbotron）
Bootstrap 導(dǎo)航欄
Bootstrap 導(dǎo)航元素
Bootstrap 多媒體對象（Media Object）
Bootstrap 分頁
Bootstrap 徽章（Badges）
Bootstrap 進度條
Bootstrap 警告（Alerts）
Bootstrap 列表組
Bootstrap 面板（Panels）
Bootstrap 面包屑導(dǎo)航（Breadcrumbs）
Bootstrap 輸入框組
Bootstrap 縮略圖
Bootstrap 下拉菜單（Dropdowns）
Bootstrap 頁面標題（Page Header）
Bootstrap 字體圖標(Glyphicons)
Bootstrap 插件
Bootstrap 按鈕（Button）
Bootstrap 標簽頁（Tab）
Bootstrap 插件概覽
Bootstrap 彈出框（Popover）
Bootstrap 附加導(dǎo)航（Affix）
Bootstrap 滾動監(jiān)聽（Scrollspy）
Bootstrap 過渡效果（Transition）
Bootstrap 警告框（Alert）
Bootstrap 輪播（Carousel）
Bootstrap 模態(tài)框（Modal）插件
Bootstrap 提示工具（Tooltip）
Bootstrap 下拉菜單（Dropdown）
Bootstrap 折疊（Collapse）
Bootstrap 附錄
Bootstrap CSS編碼規(guī)范
Bootstrap HTML編碼規(guī)范
Bootstrap UI 編輯器
?
This document uses PHP Chinese website manual Release
characters
Bootstrap 網(wǎng)格系統(tǒng)實例：手機、平板電腦、臺式電腦
我們已經(jīng)看過 中型和大型設(shè)備 。現(xiàn)在，讓我們一起看另一個實例，我們將讓它同樣適用于小型手機。我們要把平板電腦的列分割為 25%/75%，我們將添加如下選項：
<div?class="col-sm-3?col-md-6?col-lg-4">....</div> <div?class="col-sm-9?col-md-6?col-lg-8">....</div>
現(xiàn)在，給我們提供了 3 中不同的列布局，分別適用于三種設(shè)備。在手機上，它將是左邊 25% 右邊 75% 的布局。在平板電腦上，它將是 50%/50% 的布局。在大型視口的設(shè)備上，它將是 33%/66% 的布局。請查看下面的實例進行驗證。（在這里，為每個列分別定義了樣式，您可以避免這么做。）
<!DOCTYPE?html> <html> <head> ???<title>Bootstrap?實例?-?手機、平板電腦、臺式電腦</title> ???<link?href="/bootstrap/css/bootstrap.min.css"?rel="stylesheet"> ???<script?src="/scripts/jquery.min.js"></script> ???<script?src="/bootstrap/js/bootstrap.min.js"></script> </head> <body> <div?class="container"> ???<h1>Hello,?world!</h1> ???<div?class="row"> ??????<div?class="col-sm-3?col-md-6?col-lg-8"?? ?????????style="background-color:?#dedef8;? ?????????box-shadow:?inset?1px?-1px?1px?#444,? ?????????inset?-1px?1px?1px?#444;"> ?????????<p>Lorem?ipsum?dolor?sit?amet,?consectetur?adipisicing?elit,?sed?do? ????????????eiusmod?tempor?incididunt?ut?labore?et?dolore?magna?aliqua.?Ut? ????????????enim?ad?minim?veniam,?quis?nostrud?exercitation?ullamco?laboris? ????????????nisi?ut?aliquip?ex?ea?commodo?consequat.? ?????????</p> ?????????<p>Sed?ut?perspiciatis?unde?omnis?iste?natus?error?sit?voluptatem? ????????????accusantium?doloremque?laudantium,?totam?rem?aperiam,?eaque?ipsa? ????????????quae?ab?illo?inventore?veritatis?et?quasi?architecto?beatae?vitae? ????????????dicta?sunt?explicabo.? ?????????</p> ??????</div> ??????<div?class="col-sm-9?col-md-6?col-lg-4"? ?????????style="background-color:?#dedef8; ?????????box-shadow:?inset?1px?-1px?1px?#444,? ?????????inset?-1px?1px?1px?#444;"> ?????????<p>Sed?ut?perspiciatis?unde?omnis?iste?natus?error?sit?voluptatem? ????????????accusantium?doloremque?laudantium. ?????????</p> ?????????<p>?Neque?porro?quisquam?est,?qui?dolorem?ipsum?quia?dolor?sit?amet,? ????????????consectetur,?adipisci?velit,?sed?quia?non?numquam?eius?modi? ????????????tempora?incidunt?ut?labore?et?dolore?magnam?aliquam?quaerat? ????????????voluptatem.? ?????????</p> ???</div> </div> </body> </html>
結(jié)果如下所示：
