-
下拉菜單會(huì)向上彈起（接下來一個(gè)小節(jié)會(huì)介紹），這個(gè)時(shí)候我們的三角方向需要朝上顯示，實(shí)現(xiàn)方法：需要在“.btn-group”類上追加“dropup”類名（這也是做向上彈起下拉菜單要用的類名）。 <div class="btn-group dropup"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按鈕下拉菜單<span class="caret"></span></button> <ul class="dropdown-menu"> <li><a查看全部
-
在制作等分按鈕組時(shí)，請(qǐng)盡量使用<a>標(biāo)簽元素來制作按鈕，因?yàn)槭褂?amp;lt;button>標(biāo)簽元素時(shí)，使用display:table在部分瀏覽器下支持并不友好。查看全部
-
等分按鈕的效果在移動(dòng)端上特別的實(shí)用。整個(gè)按鈕組寬度是容器的100%，而按鈕組里面的每個(gè)按鈕平分整個(gè)容器寬度。例如，如果你按鈕組里面有五個(gè)按鈕，那么每個(gè)按鈕是20%的寬度，如果有四個(gè)按鈕，那么每個(gè)按鈕是25%寬度，以此類推。 等分按鈕也常被稱為是自適應(yīng)分組按鈕，其實(shí)現(xiàn)方法也非常的簡(jiǎn)單，只需要在按鈕組“btn-group”上追加一個(gè)“btn-group-justified查看全部
-
在實(shí)際運(yùn)用當(dāng)中，總會(huì)碰到垂直顯示的效果。在Bootstrap框架中也提供了這樣的風(fēng)格。我們只需要把水平分組的“btn-group”類名換成“btn-group-vertical”即可查看全部
-
我們常把下拉菜單和普通的按鈕組排列在一起，實(shí)現(xiàn)類似于導(dǎo)航菜單的效果,只需要把當(dāng)初制作下拉菜單的“dropdown”的容器換成“btn-group”，并且和普通的按鈕放在同一級(jí)。如下所示：查看全部
-
<div class="btn-toolbar"> <div class="btn-group btn-group-lg"> … </div> <div class="btn-group"> … </div> <div class="btn-group btn-group-sm"> … </div> <div class="btn-group btn-group-xs"> … </div> </div>查看全部
-
? .btn-group-lg:大按鈕組 ? .btn-group-sm:小按鈕組 ? .btn-group-xs:超小按鈕組查看全部
-
<div class="btn-toolbar"> <div class="btn-group"> … </div> <div class="btn-group"> … </div> <div class="btn-group"> … </div> <div class="btn-group"> … </div> </div>查看全部
-
下拉菜單項(xiàng)的默認(rèn)的狀態(tài)（不用設(shè)置）有懸浮狀態(tài)（:hover）和焦點(diǎn)狀態(tài)（:focus）： 下拉菜單項(xiàng)除了上面兩種狀態(tài)，還有當(dāng)前狀態(tài)（.active）和禁用狀態(tài)（.disabled）。查看全部
-
同時(shí)一定要為.dropdown添加float:leftcss樣式。 .dropdown{ float: left; }查看全部
-
Bootstrap框架中下拉菜單默認(rèn)是左對(duì)齊，如果你想讓下拉菜單相對(duì)于父容器右對(duì)齊時(shí)，可以在“dropdown-menu”上添加一個(gè)“pull-right”或者“dropdown-menu-right”類名查看全部
-
<li role="presentation" class="dropdown-header">第一部分菜單頭部</li> class="dropdown-header"查看全部
-
在Bootstrap框架中的下拉菜單還提供了下拉分隔線，假設(shè)下拉菜單有兩個(gè)組，那么組與組之間可以通過添加一個(gè)空的<li>，并且給這個(gè)<li>添加類名“divider”來實(shí)現(xiàn)添加下拉分隔線的功能查看全部
-
使用方法： 在使用Bootstrap框架中的下拉菜單組件時(shí)，其結(jié)構(gòu)運(yùn)用的正確與否非常的重要，如果結(jié)構(gòu)和類名未使用正確，直接影響組件是否能正常運(yùn)用。我們來簡(jiǎn)單的看看： 1、使用一個(gè)名為“dropdown”的容器包裹了整個(gè)下拉菜單元素，示例中為: <div class="dropdown"></div> 2、使用了一個(gè)<button>按鈕做為父菜單，并且定義類名“dropdown-toggle”和自定義“data-toggle”屬性，且值必須和最外容器類名一致，此示例為: data-toggle="dropdown" 3、下拉菜單項(xiàng)使用一個(gè)ul列表，并且定義一個(gè)類名為“dropdown查看全部
-
因?yàn)锽ootstrap的組件交互效果都是依賴于jQuery庫(kù)寫的插件，所以在使用bootstrap.min.js之前一定要先加載jquery.min.js才會(huì)生效果查看全部
舉報(bào)
0/150
提交
取消