bootstarp组件
来源:互联网 发布:电脑数据删除怎么恢复 编辑:程序博客网 时间:2024/06/10 17:34
- 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
- bootstarp组件
- bootstarp
- Bootstarp学习教程(12) 导航组件
- Bootstarp学习教程(10) 按钮组组件
- Bootstarp学习教程(11) 输入框组组件
- Bootstarp学习教程(13) 其他相关组件(1)
- Bootstarp学习教程(14) 其他相关组件(2)
- Bootstarp学习教程(15) 其他组件(3)
- bootstarp-sass
- bootstarp入门
- bootstarp table
- bootstarp-按钮
- Bootstarp和Raphael
- Bootstrap学习--认识Bootstarp
- Bootstarp 列偏移
- bootstarp简明教程
- bootstarp 使用例子~~
- Bootstarp-table入门
- Jmeter性能测试指标
- js与小数点有关的几个函数
- Py第十二问 CommandError: App 'books' has migrations. Only the sqlmigrate and sqlflush
- Stability of the C++ ABI: Evolution of a Programming Language
- MIPI-CSI2
- bootstarp组件
- ssh-keygen.exe openssl.exe
- HTML第六章上机练习5
- 数据库的一级缓存和二级缓存的区别
- 常用 Java 静态代码分析工具的分析与比较
- Python网络爬虫之模拟登录(以知乎为例)
- Mysql学习总结(38)——21条MySql性能优化经验
- iOS - 设置TabBarItem被选中时的背景
- linux常用命令—进程(jps\ps\top)