亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

玩轉Bootstrap基礎——網格系統、下拉菜單

標簽:
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">

點擊查看更多內容
6人點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

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

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消