第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定

玩轉(zhuǎn)Bootstrap基礎(chǔ)——網(wǎng)格系統(tǒng)、下拉菜單

標(biāo)簽:
Bootstrap

列偏移(offset):
只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数),那么具有这个类名的列就会向右偏移。例如,你在列元素上添加“col-md-offset-4”,表示该列向右移动4个列的宽度

<div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 col-md-offset-4">列向右移动四列的间距</div>
</div>

列排序(改变左右浮动 push pull):
改变列的方向,就是改变左右浮动,并且设置浮动的距离

<div class="container">
  <div class="row">
    <div class="col-md-4 col-md-push-8">.col-md-4</div>
    <div class="col-md-8 col-md-pull-4">.col-md-8</div>
  </div>
</div>

下拉菜单

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
    下拉菜单
    <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">下拉菜单1</a></li>
        <li><a href="#">下拉菜单2</a></li>
        <li><a href="#">下拉菜单3</a></li>
        <li><a href="#">下拉菜单4</a></li>
        <li class="divider"></li>
        <li><a href="#">下拉菜单5</a></li>
    </ul>
</div>

添加一个空的< li >,并且给这个< li >添加类名“divider”来实现添加下拉分隔线的功能

菜单标题:dropdown-header

<li class="dropdown-header">第一部分菜单头部</li>

下拉菜单 对齐方式:相对于父容器右对齐(默认左对齐)

  <ul class="dropdown-menu pull-right" >

或者

<ul class="dropdown-menu dropdown-menu-right">

同时一定要为.dropdown添加 float:left 的css样式。
.dropdown{
float: left;
}

菜单项状态:

下拉菜单项的默认的状态(不用设置)有悬浮状态(:hover)和焦点状态(:focus)
还有当前状态(.active)和禁用状态(.disabled)。这两种状态使用方法只需要在对应的菜单项上添加对应的类名:
<li class="active">
<li class="disabled">

點(diǎn)擊查看更多內(nèi)容
6人點(diǎn)贊

若覺得本文不錯(cuò),就分享一下吧!

評(píng)論

作者其他優(yōu)質(zhì)文章

正在加載中
感謝您的支持,我會(huì)繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開微信掃一掃,即可進(jìn)行掃碼打賞哦
今天注冊(cè)有機(jī)會(huì)得

100積分直接送

付費(fèi)專欄免費(fèi)學(xué)

大額優(yōu)惠券免費(fèi)領(lǐng)

立即參與 放棄機(jī)會(huì)
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

舉報(bào)

0/150
提交
取消