国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

目錄 搜尋
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(圓盤(pán)傳送帶) 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)聽(tīng)) Components: Tooltips Tooltips(提示工具) Content Code(代碼) Figures(圖片區(qū)) Images(圖片) Reboot(重置) Tables(表格) Typography(排版) Layout Grid(網(wǎng)格) Layout(布局) Media object(多媒體對(duì)象) Utilities for layout(排版通用類(lèi)別) 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(能見(jiàn)度)
文字

有關(guān)如何使用 Bootstrap 包含的導(dǎo)航組件的文檔和示例。

基本導(dǎo)航

在Bootstrap中分享一些導(dǎo)航中可用的標(biāo)記和風(fēng)格, 從基礎(chǔ)的 .nav 類(lèi)中通過(guò)切換修飾符類(lèi)以在可用和禁用狀態(tài)之間切換。

基礎(chǔ)的.nav 組件是用fiexbox組建的,為組建各種類(lèi)型的導(dǎo)航組件提供堅(jiān)實(shí)的基礎(chǔ)。其包含一些樣式的覆蓋(用于處理列表),一些link有更大的padding并且禁用了一些基礎(chǔ)樣式。

基礎(chǔ)的.nav 組件不包含任何.active 狀態(tài)。 下面的例子就使用了這個(gè)類(lèi), 主要是證明這個(gè)特定的類(lèi)不會(huì)觸發(fā)任何特殊的樣式。

舉個(gè)例子

<ul class="nav">  <li class="nav-item">    <a class="nav-link active" href="#">Active</a>  </li>  <li class="nav-item">    <a class="nav-link" href="#">Link</a>  </li>  <li class="nav-item">    <a class="nav-link" href="#">Link</a>  </li>  <li class="nav-item">    <a class="nav-link disabled" href="#">Disabled</a>  </li></ul>

類(lèi)在整個(gè)頁(yè)面中生效,因此你可以非常靈活的使用。像上面使用 <ul>, 或者用你自己的<nav> 標(biāo)簽。因?yàn)檫@個(gè) .nav 標(biāo)簽使用了 display: flex, 導(dǎo)航鏈接的動(dòng)過(guò)和導(dǎo)航的動(dòng)作是相同的,只是沒(méi)有額外標(biāo)記出而已。

舉個(gè)例子

<nav class="nav">  <a class="nav-link active" href="#">Active</a>  <a class="nav-link" href="#">Link</a>  <a class="nav-link" href="#">Link</a>  <a class="nav-link disabled" href="#">Disabled</a></nav>

可用樣式

通過(guò)改變修飾符和組件來(lái)改變.nav 的樣式。根據(jù)需要自行搭配,或者使用自己創(chuàng)建的樣式。

水平對(duì)齊

通過(guò)使用Flexbox來(lái)更改導(dǎo)航的水平對(duì)齊方式。默認(rèn)情況下,導(dǎo)航是左對(duì)齊的,但您可以很容易地將它們更改為居中或右對(duì)齊。

居中 .justify-content-center:

舉個(gè)荔枝

<ul class="nav justify-content-center">  <li class="nav-item">    <a class="nav-link active" href="#">Active</a>  </li>  <li class="nav-item">    <a class="nav-link" href="#">Link</a>  </li>  <li class="nav-item">    <a class="nav-link" href="#">Link</a>  </li>  <li class="nav-item">    <a class="nav-link disabled" href="#">Disabled</a>  </li></ul>

優(yōu)對(duì)齊 .justify-content-end:

舉個(gè)栗子

<ul class="nav justify-content-end">  <li class="nav-item">    <a class="nav-link active" href="#">Active</a>  </li>  <li class="nav-item">    <a class="nav-link" href="#">Link</a>  </li>  <li class="nav-item">    <a class="nav-link" href="#">Link</a>  </li>  <li class="nav-item">    <a class="nav-link disabled" href="#">Disabled</a>  </li></ul>

垂直對(duì)齊

Stack your navigation by changing the flex item direction with the .flex-column utility. Need to stack them on some viewports but not others? Use the responsive versions (e.g., .flex-sm-column).

舉個(gè)梨子

<ul class="nav flex-column">  <li class="nav-item">    <a class="nav-link active" href="#">Active</a>  </li>  <li class="nav-item">    <a class="nav-link" href="#">Link</a>  </li>  <li class="nav-item">    <a class="nav-link" href="#">Link</a>  </li>  <li class="nav-item">    <a class="nav-link disabled" href="#">Disabled</a>  </li></ul>

當(dāng)然,不用 <ul>也可以做到。

舉個(gè)

上一篇: 下一篇: