1、按鈕組任務(wù)6.1使用按鈕組和下拉菜單2、Bootstrap下拉菜單1、將按鈕放在同一行上2、設(shè)置按鈕組大小3、設(shè)置垂直方向的按鈕組4、內(nèi)嵌按鈕組及下拉菜單5、拆分按鈕下拉菜單6、垂直按鈕及下拉菜單1、單一按鈕的下拉菜單2、分裂式按鈕下拉菜單按鈕組主要包括基本按鈕組（水平按鈕組）、垂直按鈕組、內(nèi)嵌按鈕組及下拉菜單、按鈕組大小等方面的內(nèi)容將按鈕放在同一行上可以在<div>元素上添加.btn-group類(lèi)來(lái)創(chuàng)建按鈕組，如圖6-1所示。<divclass="btn-group"><buttonclass="btnbtn-primary">Apple</button><buttonclass="btnbtn-primary">Samsung</button><buttonclass="btnbtn-primary">Sony</button></div>6.1.1按鈕組使用.bth-group-lglsm來(lái)控制按鈕組的大小，如下圖所示。6.1.1.2設(shè)置按鈕組大小垂直方向的按鈕組可以通過(guò).btn-group-vertical設(shè)置，如圖6-3所示。<divclass="container"> <h2>垂直按鈕組</h2> <p>可以使用.btn-group-vertical類(lèi)來(lái)創(chuàng)建垂直的按鈕組：</p> <divclass="btn-group-vertical"> <buttontype=“button”class="btnbtn-primary">Apple</button> <buttontype=“button”class="btnbtn-primary">Samsung</button> <buttontype=“button”class="btnbtn-primary">Sony</button> </div></div>6.1.1.3設(shè)置垂直方向的按鈕組我們可以在按鈕組內(nèi)設(shè)置下拉菜單，如圖6-4所示。。<divclass="container"> <h2>內(nèi)嵌按鈕組</h2> <p>按鈕組設(shè)置下拉菜單:</p> <divclass="btn-group"> <buttontype=“button”class="btnbtn-primary">Apple</button> <buttontype=“button”class="btnbtn-primary">Samsung</button> <divclass="btn-group"> <buttontype=“button”class="btnbtn-primarydropdown-toggle"data-toggle="dropdown">Sony</button> <divclass="dropdown-menu"> <aclass="dropdown-item"href="#">Tablet</a> <aclass="dropdown-item"href="#">Smartphone</a> </div> </div> </div></div> <scriptsrc="bootstrap-4.1.3/js/jquery.min.js"></script> <scriptsrc="bootstrap-4.1.3/js/popper.min.js"></script> <scriptsrc="bootstrap-4.1.3/js/bootstrap.min.js"></script>6.1.1.4內(nèi)嵌按鈕組及下拉菜單類(lèi).dropdown-toggle的作用時(shí)展示下拉的小三角，屬性data-toggle="dropdown"，data-toggle的意思是設(shè)置觸發(fā)器，相當(dāng)于告訴瀏覽器你是一個(gè)什么組件，以什么形式展示，常用的如dropdown、modal、popover、tooltips等。下拉菜單通過(guò)點(diǎn)擊觸發(fā)，而不是通過(guò)鼠標(biāo)懸停懸浮觸發(fā)，下拉菜單控件依賴(lài)于第三方Popper.js插件，使用時(shí)請(qǐng)確保popper.min.js文件放在bootstrap.js之前，或者使用bootstrap.bundle.min.js、bootstrap.bundle.js文件，因?yàn)檫@兩個(gè)文件中包含了Popper.js。上述主要代碼部分也可以寫(xiě)成如下代碼<divclass="btn-group"> <buttontype=“button”class="btnbtn-primary">Apple</button> <buttontype=“button”class="btnbtn-primary">Samsung</button> <buttontype=“button”class="btnbtn-primarydropdown-toggle"data-toggle="dropdown">Sony</button> <divclass="dropdown-menu"> <aclass="dropdown-item"href="#">Tablet</a> <aclass="dropdown-item"href="#">Smartphone</a> </div></div>6.1.1.4內(nèi)嵌按鈕組及下拉菜單<divclass="container"> <h2>拆分按鈕下拉菜單</h2> <divclass="btn-group"> <buttontype=“button”class="btnbtn-primary">Sony</button> <buttontype=“button”class="btnbtn-primarydropdown-toggledropdown-toggle-split"data- toggle="dropdown"></button> <divclass="dropdown-menu"> <aclass="dropdown-item"href="#">Tablet</a> <aclass="dropdown-item"href="#">Smartphone</a> </div></div></div>6.1.1.5拆分按鈕下拉菜單其中類(lèi).dropdown-toggle-split可以使下拉小三角的內(nèi)外邊距變得更小。<divclass="container"><h2>垂直按鈕組及下拉菜單</h2><divclass="btn-group-vertical"> <buttontype=“button”class="btnbtn-primary">Apple</button> <buttontype=“button”class="btnbtn-primary">Samsung</button><divclass="btn-group"> <buttontype=“button”class="btnbtn-primarydropdown-toggle"data-toggle="dropdown">Sony</button><divclass="dropdown-menu"> <aclass="dropdown-item"href="#">Tablet</a> <aclass="dropdown-item"href="#">Smartphone</a></div></div></div></div>6.1.1.6垂直按鈕組及下拉菜單6.1.2Bootstrap下拉菜單創(chuàng)建一個(gè)下拉菜單主要分成兩部分，一部分是使用.dropdown類(lèi)用來(lái)聲明一個(gè)下拉菜單，另一部分就是使用按鈕<button>或超鏈接<a>來(lái)打開(kāi)一個(gè)下拉菜單，按鈕<button>或超鏈接<a>需要添加.dropdown-toggle類(lèi)和data-toggle=“dropdown”屬性。要使用dropdown-menu類(lèi)來(lái)設(shè)置實(shí)際下拉菜單，下拉菜單的選項(xiàng)中添加.dropdown-item類(lèi)。下拉菜單組件主要包括標(biāo)簽、對(duì)齊方式、彈出方向、禁用、激活等方面的內(nèi)容。1、單一按鈕的下拉菜單2、分裂式按鈕下拉菜單下面演示單一按鈕的下拉菜單示例，其中按鈕可以是button也可以是超鏈接a，，效果如圖6-7所示?？梢宰杂梢?btn-primry等顏色及樣式類(lèi)來(lái)定義下拉菜單的外在表現(xiàn)。<divclass="dropdown"> <buttontype="button"class="btnbtn-primarydropdown-toggle"data-toggle="dropdown">菜單</button> <divclass="dropdown-menu"> <aclass="dropdown-item"href="#">子菜單1</a> <aclass="dropdown-item"href="#">子菜單2</a> </div></div>6.1.2.1單一按鈕的下拉菜單分裂式按鈕就是前邊學(xué)習(xí)的拆分按鈕下拉菜單，效果如圖6-8所示。<divclass="btn-group"> <buttontype=“button”class="btnbtn-primary">Sony</button> <buttontype=“button”class="btnbtn-primarydropdown-toggle"data-toggle="dropdown"> </button> ……</div>6.1.2.2分裂式按鈕下拉菜單除此之外，下拉菜單中可以添加標(biāo)題和分割線(xiàn)，使用.dropdown-header類(lèi)創(chuàng)建下拉菜單標(biāo)題，使用.dropdown-divider類(lèi)創(chuàng)建下拉菜單中的水平分割線(xiàn)。下拉菜單中還可以設(shè)置的可用項(xiàng)與禁用項(xiàng)，.active類(lèi)會(huì)讓下拉菜單的選項(xiàng)高亮顯示(添加藍(lán)色背景)，顯示為可用項(xiàng)，如果要禁用下拉菜單的選項(xiàng)，可以使用.disabled類(lèi)。6.1.2.2分裂式按鈕下拉菜單下拉菜單默認(rèn)的對(duì)齊方式是自動(dòng)從頂部和左側(cè)的父級(jí)100％定位。添加.dropdown-menu-right到.dropdown-menu就會(huì)右側(cè)輕松對(duì)齊下拉菜單。如圖6-10所示。<divclass="btn-group"> <buttontype=“button”class="btnbtn-primary">Sony</button> <buttontype=“button”class="btnbtn-primarydropdown-toggle"data-toggle="dropdown"> </button> <divclass="dropdown-menudropdown-menu-right"> …… </div></div>6.1.2.2分裂式按鈕下拉菜單下拉菜單默認(rèn)的對(duì)齊方式是自動(dòng)從頂部和左側(cè)的父級(jí)100％定位。添加.dropdown-menu-right到.dropdown-menu就會(huì)右側(cè)輕松對(duì)齊下拉菜單。如圖6-10所示。下拉菜單彈出方向設(shè)置，下拉菜單彈出方向默認(rèn)為向下，可以用.dropup、.dropright、.dropleft改變下拉菜單的指向，設(shè)置不同的彈出方向，向上彈出的子菜單，可以在div元素上添加"dropup"類(lèi)，向左邊彈出的下拉菜單，可以在div元素上添加"dropleft"類(lèi)，向右彈出，可以在div元素上添加"dropright"類(lèi)，讀者自己可以嘗試代碼。響應(yīng)式對(duì)齊，如果想使用響應(yīng)式對(duì)齊，通過(guò)添加data-display="static"屬性禁用動(dòng)態(tài)定位，并使用響應(yīng)式變體類(lèi)。為了下拉菜單左/右對(duì)齊和給定斷點(diǎn)或更大的斷點(diǎn),加上.dropdown-menu-{sm|-md|-lg|-xl}-left/right。不需要添加data-display="static"屬性設(shè)置為導(dǎo)航欄中的下拉按鈕，因?yàn)閷?dǎo)航條中不使用popper.js。6.1.2.2分裂式按鈕下拉菜單1、Bootstrap導(dǎo)航任務(wù)6.2使用Bootstrap導(dǎo)航、導(dǎo)航欄、面包屑導(dǎo)航2、Bootstrap導(dǎo)航欄3、面包屑導(dǎo)航如果想創(chuàng)建一個(gè)簡(jiǎn)單的水平導(dǎo)航，可以在<ul>元素上添加.nav類(lèi)，在每個(gè)<li>選項(xiàng)上添加.nav-item類(lèi)，在每個(gè)鏈接上添加.nav-link類(lèi)來(lái)完成。主要代碼示例如下，效果如圖6-11所示。<ulclass="nav"> <liclass="nav-item"> <aclass="nav-linkactive"href="#">選項(xiàng)1</a> </li> <liclass="nav-item"> <aclass="nav-link"href="#">選項(xiàng)2</a> </li> <liclass="nav-item"> <aclass="nav-link"href="#">選項(xiàng)3</a> </li> <liclass="nav-item"> <aclass="nav-linkdisabled"href="#">Disabled</a> </li></ul>6.2.1Bootstrap導(dǎo)航.nav的class可以使用在很多地方，所以標(biāo)簽可以非常靈活，比如使用在<ul>列表，或者自定義一個(gè)<nav>組件那次導(dǎo)航還可以使用<nav>，因?yàn)?nav基于display:flex定義，導(dǎo)航鏈接的行為與導(dǎo)航項(xiàng)目相同，不需要額外的標(biāo)記。如下代碼效果與上面一樣。<navclass="nav"> <aclass="nav-linkactive"href="#">選項(xiàng)1</a> <aclass="nav-link"href="#">選項(xiàng)2</a> <aclass="nav-link"href="#">選項(xiàng)3</a> <aclass="nav-linkdisabled"href="#">Disabled</a></nav>6.2.1Bootstrap導(dǎo)航使用柵格系統(tǒng)的flexbox工具可以更改導(dǎo)航的水平對(duì)齊方式。默認(rèn)情況下導(dǎo)航左對(duì)齊，但可以用.justify-content-center改為居中對(duì)齊，或使用.justify-content-end改為右對(duì)齊。 使用.flex-column類(lèi)用于創(chuàng)建垂直導(dǎo)航，寫(xiě)法<ulclass="navflex-column">或者<navclass="navflex-column">，如在特定的viewport屏幕下需要堆疊，可使用響應(yīng)式定義（如.flex-sm-column樣式）。從上面了解的基本導(dǎo)航，如果加入.nav-tabs就可以生成選項(xiàng)卡導(dǎo)航（滑動(dòng)門(mén)，同時(shí)結(jié)合tabJavaScript插件來(lái)構(gòu)建tabs滑動(dòng)門(mén)。如果加入.nav-pills就成為膠囊式導(dǎo)航。效果如圖6-12和圖6-13所示<p>選項(xiàng)卡導(dǎo)航:</p><ulclass="navnav-tabs"> <liclass="nav-item"> <aclass="nav-linkactive"href="#">Active</a> </li> <liclass="nav-item"> <aclass="nav-link"href="#">Link</a> </li> <liclass="nav-item"> <aclass="nav-link"href="#">Link</a> </li> <liclass="nav-item"> <aclass="nav-linkdisabled"href="#">Disabled</a> </li></ul>6.2.1Bootstrap導(dǎo)航<p>膠囊式導(dǎo)航:</p><ulclass="navnav-pills"> ……</ul>.nav內(nèi)容有兩種寬度擴(kuò)展用的類(lèi)，其中一個(gè)類(lèi)是使用.nav-fill，<ulclass="navnav-pillsnav-fill">，它會(huì)將.nav-item按照比例分配空間。注意：這會(huì)占用所有的水平空間，但不是每個(gè)導(dǎo)航項(xiàng)目的寬度相同。如果是使用<nav>做導(dǎo)航時(shí)，請(qǐng)確保包含.nav-item在A超鏈接上。另一個(gè)類(lèi)就是對(duì)于等寬元素，請(qǐng)使用.nav-justified，<ulclass="navnav-pillsnav-justified">，所有水平空間將被導(dǎo)航鏈接占用，但與上述.nav-fill不同，每個(gè)導(dǎo)航項(xiàng)目將具有相同的寬度。與.nav-fill的例子近似，使用基于<nav>的導(dǎo)航，確保在鏈接上包含.nav-item子項(xiàng)定義。演示效果如圖6-14所示。6.2.1Bootstrap導(dǎo)航不論是選項(xiàng)卡導(dǎo)航還是膠囊式導(dǎo)航，我們可以設(shè)置成動(dòng)態(tài)可切換的，可以在每個(gè)鏈接上添加data-toggle="tab"屬性或data-toggle="pill"屬性，然后在每個(gè)選項(xiàng)對(duì)應(yīng)的內(nèi)容的上添加.tab-pane類(lèi)，即可啟動(dòng)動(dòng)態(tài)選項(xiàng)卡或膠囊式導(dǎo)航，無(wú)需編寫(xiě)任何JavaScript，就可在.nav-tabs或.nav-pills使用這些數(shù)據(jù)屬性。要使標(biāo)簽淡入淡出，請(qǐng)?zhí)砑?fade到每個(gè).tab-pane，第一個(gè)選項(xiàng)卡窗格還必須定義.show使默認(rèn)初始內(nèi)容可見(jiàn)。主要代碼如下，效果如圖6-15所示。6.2.1Bootstrap導(dǎo)航代碼

<h4>動(dòng)態(tài)選項(xiàng)卡導(dǎo)航</h4><ulclass="navnav-tabs""> <liclass="nav-item"> <aclass="nav-linkactive"data-toggle="tab"href="#option1">選項(xiàng)1</a> </li> <liclass="nav-item"> <aclass="nav-link"data-toggle="tab"href="#option2">選項(xiàng)2</a> </li> <liclass="nav-item"> <aclass="nav-link"data-toggle="tab"href="#option3">選項(xiàng)3</a> </li></ul><divclass="tab-content"> <divid="option1"class="tab-paneactive"><br> <h3>選項(xiàng)1</h3> <p>選項(xiàng)1的具體內(nèi)容</p> </div> <divid="option2"class="tab-pane"><br> <h3>選項(xiàng)2</h3> <p>選項(xiàng)2的具體內(nèi)容</p> </div> <divid="option3"class="tab-panefade"><br> <h3>選項(xiàng)3</h3> <p>選項(xiàng)3的具體內(nèi)容</p> </div></div><br><br><h4>動(dòng)態(tài)膠囊導(dǎo)航</h4>

<ulclass="navnav-pills"> <liclass="nav-item"> <aclass="nav-linkactive"data-toggle="pill"href="#pilloption1">膠囊選項(xiàng)1</a> </li> <liclass="nav-item"> <aclass="nav-link"data-toggle="pill"href="#pilloption2">膠囊選項(xiàng)2</a> </li> <liclass="nav-item"> <aclass="nav-link"data-toggle="pill"href="#pilloption3">膠囊選項(xiàng)3</a> </li></ul><divclass="tab-content"> <divid="pilloption1"class="tab-paneactive"><br> <h3>膠囊選項(xiàng)1</h3> <p>膠囊選項(xiàng)1的具體內(nèi)容</p> </div> ……</div>6.2.1Bootstrap導(dǎo)航不論是選項(xiàng)卡導(dǎo)航還是膠囊導(dǎo)航其中的選項(xiàng)都可以使用下拉菜單，下面以選項(xiàng)卡式的導(dǎo)航帶下拉菜單為例進(jìn)行演示。效果如圖6-16所示。<ulclass="navnav-tabs"> <liclass="nav-item"> <aclass="nav-linkactive"href="#">Active</a> </li> <liclass="nav-itemdropdown"> <aclass="nav-linkdropdown-toggle"data-toggle="dropdown"href="#">Dropdown</a> <divclass="dropdown-menu"> <aclass="dropdown-item"href="#">Link1</a> <aclass="dropdown-item"href="#">Link2</a> <aclass="dropdown-item"href="#">Link3</a> </div> </li> ……</ul>6.2.1Bootstrap導(dǎo)航如果需要響應(yīng)式的導(dǎo)航變化，需要使用一系列的flexbox彈性布局類(lèi)別，這些通用類(lèi)別能提供不同的彈性布局，比如下例中代碼，導(dǎo)航將會(huì)堆疊在最小的屏幕上，然后從小斷點(diǎn)開(kāi)始填充可用寬度的水平布局。<navclass="navnav-pillsflex-columnflex-sm-row"> <aclass="flex-sm-filltext-sm-centernav-linkactive"href="#">Active</a> <aclass="flex-sm-filltext-sm-centernav-link"href="#">Link</a> <aclass="flex-sm-filltext-sm-centernav-link"href="#">Link</a> <aclass="flex-sm-filltext-sm-centernav-linkdisabled"href="#">Disabled</a></nav>6.2.1Bootstrap導(dǎo)航1一般導(dǎo)航欄導(dǎo)航欄一般放在頁(yè)面的頂部?？梢允褂?navbar類(lèi)來(lái)創(chuàng)建一個(gè)標(biāo)準(zhǔn)的導(dǎo)航欄，后面緊跟:.navbar-expand-xl|lg|md|sm類(lèi)來(lái)創(chuàng)建響應(yīng)式的導(dǎo)航欄，就是大屏幕水平鋪開(kāi)，小屏幕垂直堆疊，同時(shí)還可以使用一些配色方案的類(lèi)。導(dǎo)航欄上的選項(xiàng)可以使用<ul>元素并添加class="navbar-nav"類(lèi)，然后在<li>元素上添加.nav-item類(lèi)，<a>元素上使用.nav-link類(lèi)。導(dǎo)航欄中菜單項(xiàng)的活動(dòng)狀態(tài)：用.active表示當(dāng)前頁(yè)面，可直接應(yīng)用于.nav-link或.nav-item上。激活和禁用狀態(tài)，可以在<a>元素或者<li>元素上添加.active類(lèi)來(lái)高亮顯示選中的選項(xiàng)，.disabled類(lèi)用于設(shè)置該鏈接是不可點(diǎn)擊的。導(dǎo)航欄默認(rèn)內(nèi)容是流式的，使用container容器限制它們的水平寬度。navbar導(dǎo)航欄內(nèi)置支持少量子組件。根據(jù)需要從以下選擇：.navbar-brand品牌，一般是是產(chǎn)品或項(xiàng)目名稱(chēng)或者logo，可以是文字也可以是圖片。.navbar-brand可以用于大多數(shù)元素，但對(duì)于鏈接最有效，因?yàn)橐话阌迷?lt;a>標(biāo)簽。.navbar-nav提供完整和輕便的導(dǎo)航（包括對(duì)下拉菜單的支持）。.navbar-toggler用于折疊插件和其他navigationtoggling行為。.form-inline用于任何表單控件和操作。.navbar-text用于添加垂直居中的文本字符串。.collapse.navbar-collapse用于通過(guò)父斷點(diǎn)進(jìn)行分組和隱藏導(dǎo)航列內(nèi)容。6.2.2Bootstrap導(dǎo)航欄下面的代碼呈現(xiàn)的是一個(gè)在小屏幕就會(huì)垂直顯示的導(dǎo)航欄，并且導(dǎo)航欄中使用了.navbar-brand，代碼如下，效果如圖6-18所示。<divclass="container"><navclass="navbarbg-darknavbar-darknavbar-expand-sm"> <!--<aclass="navbar-brand"href="#">Logo</a>--> <aclass="navbar-brand"href="#"> <imgsrc="../img/navbar/bird.jpg"width="40px"/> </a> <ulclass="navbar-nav"> <liclass="nav-item"> <aclass="nav-link"href="#">Link1</a> </li> <liclass="nav-item"> <aclass="nav-link"href="#">Link2</a> </li> <liclass="nav-item"> <aclass="nav-link"href="#">Link3</a> </li> </ul></nav></div>6.2.2Bootstrap導(dǎo)航欄-一般導(dǎo)航欄在上面的導(dǎo)航欄中，小屏幕時(shí)導(dǎo)航欄由水平改為垂直方向，但通常小屏幕上我們都會(huì)折疊導(dǎo)航欄，通過(guò)點(diǎn)擊再顯示導(dǎo)航選項(xiàng)。要?jiǎng)?chuàng)建折疊導(dǎo)航欄，可以添加一個(gè)漢堡包按鈕，按鈕上添加類(lèi)class="navbar-toggler",并且增加屬性data-toggle="collapse"與data-target="#目標(biāo)名稱(chēng)"，如<buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-target="#target1">，然后在設(shè)置了class="collapsenavbar-collapse"類(lèi)的div上包裹導(dǎo)航內(nèi)容（鏈接）,div元素上的id匹配按鈕data-target的上指定的id，代碼如下所示。6.2.2Bootstrap導(dǎo)航欄-折疊導(dǎo)航欄<navclass="navbarnavbar-expand-smbg-darknavbar-dark"> <aclass="navbar-brand"href="#">Navbar</a> <buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-target="#target1"><spanclass="navbar-toggler-icon"></span> </button> <divclass="collapsenavbar-collapse"id="target1"> <ulclass="navbar-nav"> <liclass="nav-item"> <aclass="nav-link"href="#">Link</a> </li> <liclass="nav-item"> <aclass="nav-link"href="#">Link</a> </li> <liclass="nav-item"> <aclass="nav-link"href="#">Link</a> </li> </ul> </div></nav>6.2.2Bootstrap導(dǎo)航欄-折疊導(dǎo)航欄<divclass="collapsenavbar-collapse"id="target1"> <divclass="navbar-nav”><aclass="nav-itemnav-link"href="#">Link</a><aclass="nav-itemnav-link"href="#">Link</a><aclass="nav-itemnav-link"href="#">Link</a></div></div>導(dǎo)航中的無(wú)序列表也可以使用如下結(jié)構(gòu)。注意：要加上響應(yīng)式的類(lèi)如.navbar-expand-sm，倘若刪除.navbar-expand-sm類(lèi)，漢堡按鈕會(huì)一直顯示。當(dāng)然導(dǎo)航欄的菜單項(xiàng)需要下拉菜單的時(shí)候也可以添加下拉菜單，部分代碼如下。<liclass="nav-itemdropdown"> <aclass="nav-linkdropdown-toggle"href="#"data-toggle="dropdown"> Dropdownlink </a> <divclass="dropdown-menu"> <aclass="dropdown-item"href="#">Link1</a> <aclass="dropdown-item"href="#">Link2</a> <aclass="dropdown-item"href="#">Link3</a> </div></li>6.2.2Bootstrap導(dǎo)航欄-導(dǎo)航欄的菜單項(xiàng)加下拉菜單導(dǎo)航欄中l(wèi)ogo的位置一般是在左側(cè)切換元素的漢堡包按鈕在右側(cè)，當(dāng)然也可以logo在右側(cè)切換元素的漢堡包按鈕在左側(cè)。如果切換元素的漢堡包按鈕在左側(cè)，右側(cè)是品牌名稱(chēng)呢，品牌logo的代碼要放在button按鈕后面，部分代碼如下，效果如圖6-20所示。<navclass="navbarnavbar-expand-smnavbar-lightbg-light"> <button…….><spanclass="navbar-toggler-icon"></span></button> <aclass="navbar-brand"href="#">Navbar</a> <divclass="collapsenavbar-collapse"id="navbarTogglerDemo01"> <ulclass="navbar-navmr-auto">……</ul> </div></nav>6.2.2Bootstrap導(dǎo)航欄-導(dǎo)航欄中l(wèi)ogo的位置以及顯示和隱藏如果導(dǎo)航欄中的navbar-brand也要被隱藏，把<aclass="navbar-brand"href="#">Navbar</a>代碼放置在<divclass="collapsenavbar-collapse"id="target1">中。效果如圖6-19所示。6.2.2Bootstrap導(dǎo)航欄-導(dǎo)航欄中l(wèi)ogo的位置以及顯示和隱藏可以使用bootstrap提供的間隙間距和flex布局類(lèi)來(lái)定義導(dǎo)航欄中元素的間距和對(duì)齊方式。我們可以設(shè)置<ul>元素的.ml-auto類(lèi)，讓ul標(biāo)簽中的內(nèi)容在導(dǎo)航欄右對(duì)齊，當(dāng)然也可以設(shè)置.mr-auto類(lèi)，讓ul的內(nèi)容在導(dǎo)航欄左對(duì)齊。如果導(dǎo)航欄除了<ul>元素，還有一些其他的表單元素，并且表單內(nèi)容在導(dǎo)航欄的右側(cè)，我們可以設(shè)置<ul>元素.ml-auto，這樣表單內(nèi)容實(shí)現(xiàn)右對(duì)齊的效果。<navclass="navbarnavbar-expand-smnavbar-lightbg-light"> <button…….><spanclass="navbar-toggler-icon"></span></button> <divclass="collapsenavbar-collapse"id="navbarTogglerDemo01"> <aclass="navbar-brand"href="#">Hiddenbrand</a> <ulclass="navbar-navml-auto">……</ul> </div></nav>6.2.2Bootstrap導(dǎo)航欄-導(dǎo)航欄中菜單右對(duì)齊擴(kuò)展導(dǎo)航區(qū)內(nèi)容，代碼如下，效果如圖6-23所示。<divclass="collapse"id="zhedie"> <divclass="bg-darkp-4"> <h4class="text-white">折疊的內(nèi)容</h4> <spanclass="text-muted">通過(guò)navbarlogo進(jìn)行切換</span> </div></div><navclass="navbarnavbar-darkbg-dark"> <buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-target="#zhedie"> <spanclass="navbar-toggler-icon"></span> </button></nav>6.2.2Bootstrap導(dǎo)航欄-擴(kuò)展導(dǎo)航區(qū)內(nèi)容導(dǎo)航欄中如果有表單，<form>元素使用class="form-inline"類(lèi)來(lái)排版各種表單控制元件和組件，還可以引用input-group輸入框組控件，如.input-group-addon類(lèi)用于在輸入框前添加小標(biāo)簽。如果表單元素在右邊，在ul標(biāo)簽要使用mr-auto類(lèi)<ulclass="navbar-navmr-auto">。<navclass="navbarnavbar-lightbg-light"><formclass="form-inline"> <divclass="input-group"> <div