亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

目錄 搜尋
Getting started Accessibility(無(wú)障礙) Browsers and devices(瀏覽器和設(shè)備) Build tools(構(gòu)建工具) Contents(內(nèi)容) Download(下載) JavaScript Theming Bootstrap(主題Bootstrap) Webpack Components: Alerts Alerts(警報(bào)) Components: Badges Badges(徽章) Components: Breadcrumb Breadcrumb Components: Button group Button group(按鈕組) Components: Buttons Buttons(按鈕) Components: Cards Components: Carousel Cards(卡) Carousel(圓盤傳送帶) Components: Collapse Collapse(折疊) Components: Dropdowns Dropdowns(下拉菜單) Components: Forms Forms(表單) Components: Input group Input group(輸入群組) Components: Input group Jumbotron(廣告大屏幕) Components: List group List group(列表組) Components: Modal Modal(互動(dòng)視窗) Components: Navbar Navbar(導(dǎo)航欄) Components: Navs Navs(導(dǎo)航欄) Components: Pagination Pagination(分頁(yè)) Components: Popovers Popovers(彈出框) Components: Progress Progress(進(jìn)度條) Components: Scrollspy Scrollspy(滾動(dòng)監(jiān)聽) Components: Tooltips Tooltips(提示工具) Content Code(代碼) Figures(圖片區(qū)) Images(圖片) Reboot(重置) Tables(表格) Typography(排版) Layout Grid(網(wǎng)格) Layout(布局) Media object(多媒體對(duì)象) Utilities for layout(排版通用類別) Migration Migrating to v4(遷移到v4) Utilities Borders(邊框) Clearfix(清除浮動(dòng)) Close icon(關(guān)閉圖標(biāo)) Colors(顏色) Display property(顯示屬性) Embeds(內(nèi)嵌) Flex(彈性) Float(浮動(dòng)) Image replacement(圖像替換) Position(位置) Screenreaders(熒幕閱讀器) Sizing(尺寸) Spacing(間隔) Text(文本) Vertical alignment(垂直對(duì)齊) Visibility(能見度)
文字

布局您的 Bootstrap 項(xiàng)目的組件和選項(xiàng),包括包裝容器、強(qiáng)大的網(wǎng)格系統(tǒng)、靈活的媒體對(duì)象和響應(yīng)性實(shí)用工具類。

Containers

容器是 Bootstrap 中最基本的布局元素,在使用我們的默認(rèn)網(wǎng)格系統(tǒng)時(shí)必需的。選擇響應(yīng)式固定寬度的容器(意味著它max-width在每個(gè)斷點(diǎn)處的變化)或流體寬度(意味著它100%始終是寬的)。

雖然容器可以嵌套,但大多數(shù)布局不需要嵌套容器。

<div class="container">  <!-- Content here --></div>

利用特定于斷點(diǎn)的列類進(jìn)行簡(jiǎn)單的列調(diào)整,而不使用顯式編號(hào)類,例如.col-sm-6...

<div class="container-fluid">  ...</div>

響應(yīng)斷點(diǎn)

由于 Bootstrap 是首先開發(fā)為可移動(dòng)的,所以我們使用了以下幾個(gè)媒體查詢?yōu)槲覀兊牟季趾徒涌趧?chuàng)建合理的斷點(diǎn)。這些斷點(diǎn)主要基于最小視口寬度,允許我們隨著視口的變化而擴(kuò)展元素。

等寬列可以分成多行,但存在一個(gè) Safari flexbox 缺陷,如果沒有明確的flex-basis或無(wú)效的行為,border就可能無(wú)法工作。

有兩種解決方案已在 Bootstrap 外簡(jiǎn)化測(cè)試用例不過,如果瀏覽器是最新的,這就不應(yīng)該是必要的。

<div class="container">  <div class="row">    <div class="col">Column</div>    <div class="col">Column</div>    <div class="w-100"></div>    <div class="col">Column</div>    <div class="col">Column</div>  </div></div>

設(shè)置一列寬度

Flexbox 網(wǎng)格列的自動(dòng)布局還意味著您可以設(shè)置一列的寬度并讓兄弟列自動(dòng)調(diào)整其大小。您可以使用預(yù)定義的網(wǎng)格類(如下所示),網(wǎng)格混合或內(nèi)聯(lián)寬度。請(qǐng)注意,無(wú)論中央列的寬度如何,其他列都將調(diào)整大小。

<div class="container">  <div class="row">    <div class="col">      1 of 3    </div>    <div class="col-6">      2 of 3 (wider)    </div>    <div class="col">      3 of 3    </div>  </div>  <div class="row">    <div class="col">      1 of 3    </div>    <div class="col-5">      2 of 3 (wider)    </div>    <div class="col">      3 of 3    </div>  </div></div>

可變寬度內(nèi)容

使用col-{breakpoint}-auto類根據(jù)內(nèi)容的自然寬度調(diào)整列的大小。

<div class="container">  <div class="row justify-content-md-center">    <div class="col col-lg-2">      1 of 3    </div>    <div class="col-md-auto">
      Variable width content    </div>    <div class="col col-lg-2">      3 of 3    </div>  </div>  <div class="row">    <div class="col">      1 of 3    </div>    <div class="col-md-auto">
      Variable width content    </div>    <div class="col col-lg-2">      3 of 3    </div>  </div></div>

等寬多列

通過插入.w-100您希望這些列插入到新行的位置。通過混合.w-100和一些響應(yīng)顯示實(shí)用程序...

<div class="row">  <div class="col">col</div>  <div class="col">col</div>  <div class="w-100"></div>  <div class="col">col</div>  <div class="col">col</div></div>

響應(yīng)類

引導(dǎo)程序的網(wǎng)格包括五個(gè)預(yù)定義類,用于構(gòu)建復(fù)雜的響應(yīng)性布局。在您認(rèn)為合適的額外小、小、中、大或超大設(shè)備上自定義列的大小。

所有斷點(diǎn)

水平堆

上一篇: 下一篇: