bootstarp组件

来源：互联网发布：电脑数据删除怎么恢复编辑：程序博客网时间：2024/05/17 09:23

- glyphicon字体图标
- 图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。
- 图标类只能应用在不包含任何文本内容或子元素的元素上。
- 可以这样写：

     <button type="button" class="btn btn-default">        <span class="glyphicon glyphicon-log-in"></span>        login    </button>

DropDown下拉菜单

<div class="dropdown">    <button type="button" class="dropdown-toggle btn btn-primary" data-toggle="dropdown" id="username">员工列表        <span class="caret"></span>    </button>    <ul class="dropdown-menu" >        <li class="dropdown-header">员工姓名</li>        <li class="divider"></li>        <!--分割线-->        <li><a href="#" class="text-center">王二麻子</a></li>        <li><a href="#" class="text-center">王尼玛</a></li>        <li id="name"><a href="#" class="text-center">张全蛋</a></li>        <li><a href="#" class="text-center">赵铁柱</a></li>    </ul></div>

默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐。
下拉菜单可以添加标题/分割线
添加disabled类来禁用某个菜单

按钮式下拉菜单

把任意一个按钮放入 .btn-group 中，然后加入适当的菜单标签，就可以让按钮作为菜单的触发器了。
给父元素添加 .dropup 类就能使触发的下拉菜单朝上方打开

<!--单按钮式-->    <div class="btn-group">        <button type="button" class="dropdown-toggle btn btn-warning" data-toggle="dropdown">            <span>father</span>            <span class="caret"></span>        </button>        <ul class="dropdown-menu">            <li class="text-center"><a href="">son</a></li>            <li class="text-center"><a href="">son</a></li>            <li class="text-center"><a href="">son</a></li>            <li class="text-center"><a href="">son</a></li>            <li class="text-center"><a href="">son</a></li>        </ul>    </div>    <!--分列式按钮菜单-->    <div class="btn-group">        <button type="button" class="btn btn-warning" >father</button>        <button type="button" class="dropdown-toggle btn btn-warning" data-toggle="dropdown">            <span class="caret"></span>        </button>        <ul class="dropdown-menu">            <li class="text-center"><a href="">son</a></li>            <li class="text-center"><a href="">son</a></li>            <li class="text-center"><a href="">son</a></li>            <li class="text-center"><a href="">son</a></li>            <li class="text-center"><a href="">son</a></li>        </ul>    </div>    <div class="btn-group">        <button type="button" class="btn btn-warning"  data-toggle="dropdown">father</button>        <button type="button" class="dropdown-toggle btn btn-warning" data-toggle="dropdown">            <span class="caret"></span>        </button>        <ul class="dropdown-menu">            <li class="text-center"><a href="">son</a></li>            <li class="text-center"><a href="">son</a></li>            <li class="text-center"><a href="">son</a></li>            <li class="text-center"><a href="">son</a></li>            <li class="text-center"><a href="">son</a></li>        </ul>    </div>    <br/>    <br/>    <br/>    <br/>    <!--向上弹入式菜单-->    <header class="page-header">        <h1>向上弹入式菜单</h1>    </header>    <div class="btn-group dropup">        <button type="button" class="btn btn-danger">father</button>        <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">            <span class="caret"></span>        </button>        <ul class="dropdown-menu" role="menu">            <li class="text-center"><a href="">son</a></li>            <li class="text-center"><a href="">son</a></li>            <li class="text-center"><a href="">son</a></li>            <li class="text-center"><a href="">son</a></li>            <li class="text-center"><a href="">son</a></li>        </ul>    </div>

导航条

<nav class="navbar  navbar-inverse navbar-fixed-top">    <div class="container">        <div class="navbar-header">            <div class="navbar-brand">导航条</div>            <button  data-target="#subUl" type="button" class="navbar-toggle" data-toggle="collapse">                <span class="icon-bar"></span>                <span class="icon-bar"></span>                <span class="icon-bar"></span>            </button>        </div>        <div class="collapse navbar-collapse" id="subUl">            <ul class="navbar-nav nav " >                <li><a href="" class="glyphicon glyphicon-home"> 首页</a></li>                <li><a href="" class="glyphicon glyphicon-cloud"> 第一页</a></li>                <li><a href="" class="glyphicon glyphicon-book"> 第二页</a></li>            </ul>            <ul class="navbar-nav nav navbar-right">                <li><a href="" class="glyphicon glyphicon-envelope"> 邮件</a></li>                <li><a href="" class="glyphicon glyphicon-phone"> 电话</a></li>                <li>                    <form class="navbar-form navbar-left" role="search">                        <div class="form-group">                            <input type="text" class="form-control" placeholder="Search">                        </div>                        <button type="submit" class="btn btn-default">Submit</button>                    </form>                </li>                <li class="dropdown">                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉<span class="caret"></span></a>                    <ul class="dropdown-menu">                        <li><a href="#">111</a></li>                        <li><a href="#">111</a></li>                        <li><a href="#">111</a></li>                        <li><a href="#">111</a></li>                        <li><a href="#">111</a></li>                    </ul>                </li>            </ul>        </div>    </div></nav>

1 0