[学习笔记] bootstrap (四) : 布局组件1(下拉,按钮组[toolbar],上拉)

布局组件

下拉按钮

        <div class="dropdown">
            <button class="btn dropdown-toggle" id='drop1' data-toggle="dropdown">
                帮助<span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
                <li role="presentation">
                    <a role="menuitem" tabindex="-1" href="#"> 关于我们 </a>
                </li>
                <li role="presentation">
                    <a role="menuitem" href="#"> 关于我们 </a>
                </li>
                <li role="presentation">
                    <a role="menuitem" href="#"> 关于我们 </a>
                </li>
                <li role="presentation">
                    <a role="menuitem" href="#"> 关于我们 </a>
                </li>
            </ul>
        </div>

要构建一个下拉菜单,首先,需要一个div加class(dropdown)来包容所有代码(不然下拉菜单定位找不到),然后在加一个触发下拉菜单的按钮(或者a标签),再加一个下拉菜单ul

触发者样式: .dropdown-toggle ; 属性:data-toggle=”dorpdown”

菜单样式: .dropdown-menu 属性:role=”menu” aria-labelledby=’id’

其他:role=”presentation”; role=”menuitem”

样式: .divider 分割线; .dropdown-header:下拉菜单头部(不可点击); .dropdown-menu-right:向右对齐的菜单; .dropup:上拉样式(给父类容器添加)

按钮组

<div class="btn-group" role="toolbar">
    <div class="btn-group btn-group-lg">
        <button type="button" class="btn btn-default">按钮 1</button>
        <button type="button" class="btn btn-default">按钮 2</button>
        <button type="button" class="btn btn-default">按钮 3</button>
    </div>
        <div class="btn-group btn-group-sm">
        <button type="button" class="btn btn-default">按钮 4</button>
        <button type="button" class="btn btn-default">按钮 5</button>
        <button type="button" class="btn btn-default">按钮 6</button>
    </div>
        <div class="btn-group btn-group-xs">
        <button type="button" class="btn btn-default">按钮 7</button>
        <button type="button" class="btn btn-default">按钮 8</button>
        <button type="button" class="btn btn-default">按钮 9</button>
    </div>
</div>

由多个按钮组构成的一个toolbar!

每个按钮组由一个div容器加 .btn-group样式构成(同时可以搭配大小等其他样式)

每个按钮组中由几个按钮组成

利用按钮组和单独的下拉菜单构成分割下拉菜单

<div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle btn-lg" data-toggle="dropdown">默认
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li>
            <a href="#">功能</a>
        </li>
        <li>
            <a href="#">另一个功能</a>
        </li>
        <li>
            <a href="#">其他</a>
        </li>
        <li class="divider"></li>
        <li>
            <a href="#">分离的链接</a>
        </li>
    </ul>
</div>