Bootstrap输入框和导航组件
2017-07-15 21:34
525 查看
输入框组件
文本输入框就是可以在input元素前后加上文字或按钮,可以实现对表单控件的扩展<!--在左侧添加文字--> <div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control"> </div>
<!--在右侧添加文字--> <div class="input-group"> <input type="text" class="form-control"> <span class="input-group-addon"></span> </div>
<!--在两侧添加文字--> <div class="input-group"> <span class="input-group-addon">$</span> <input type="text" class="form-control"> <span class="input-group-addon">.00</span> </div>
<!--设置尺寸,另外三种分别是默认、xs、sm--> <div class="input-group input-group-lg">
<!--左侧使用复选框和单选框--> <div class="input-group"> <span class="input-group-addon"><input type="checkbox"></span> <input type="text" class="form-control"> </div> <div class="input-group"> <span class="input-group-addon"><input type="radio"></span> <input type="text" class="form-control"> </div>
<!--左侧使用按钮--> <div class="input-group"> <span> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">首页</a></li> <li><a href="#">咨询</a></li> <li><a href="#">产品</a></li> <li><a href="#">关于</a></li> </ul> </span> <input type="text" class="form-control"> </div>
导航组件
Bootstrap提供了一组导航组件,用于实现Web页面的栏目操作<!--基本导航栏标签页--> <ul class="nav nav-tabs"> <li class="active"><a href="#">首页</a></li> <li><a href="#">咨询</a></li> <li><a href="#">产品</a></li> <li><a href="#">关于</a></li> </ul>
<!--胶囊式导航--> <ul class="nav nav-pills"> <li class="active"><a href="#">首页</a></li> <li><a href="#">咨询</a></li> <li><a href="#">产品</a></li> <li><a href="#">关于</a></li> </ul>
<!--垂直胶囊式导航--> <ul class="nav nav-pills nav-stacked"> <!--导航两端对齐--> <ul class="nav nav-tabs nav-justified"> <!--禁用导航中的项目--> <li class="disabled"><a href="#">关于</a></li>
<!--带下拉菜单的导航--> <ul class="nav nav-tabs"> <li class="active"><a href="#">首页</a></li> <li><a href="#">咨询</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#">菜单一</a></li> <li><a href="#">菜单二</a></li> </ul> </li> <li><a href="#">关于</a></li> </ul>
导航条组件
作为导航页头的响应式基本组件<!--基本格式--> <nav class="navbar navbar-default"> ... </nav> <!--反色调导航--> <nav class="navbar navbar-inverse"> ... </nav>
<!-- 基本导航条,包含标题和列表 --> <nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <a href="#" class="navbar-brand">标题</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">首页</a></li> <li><a href="#">咨询</a></li> <li><a href="#">产品</a></li> <li class="disabled"><a href="#">关于</a></li> </ul> </div> </nav>
<!-- 导航条中使用表单 --> <nav class="navbar navbar-default"> <div class="container"></div> <div class="navbar-header"> <a href="#" class="navbar-brand">标题</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">首页</a></li> <li><a href="#">咨询</a></li> <li><a href="#">产品</a></li> <li class="disabled"><a href="#">关于</a></li> </ul> <form action="" class="navbar-form navbar-right"> <div class="input-group"> <input type="text" class="form-control"> <div class="input-group-btn"> <button class="btn btn-default" type="submit">提交</button> </div> </div> </form> <!-- 导航中使用按钮 --> <button class="btn btn-default navbar-btn navbar-left">按钮</button> <!-- 导航中使用对齐方式,left和right --> <button class="btn btn-default navbar-btn navbar-right">按钮</button> <!-- 导航中使用一段文本 --> <p class="navbar-text">我是一段文本</p> <!-- 非导航链接,一般需要置入文本区域内 --> <p class="navbar-text"><a href="#" class="navbar-link">非导航链接</a></p> </div>
<!-- 导航固定在顶部,下面的内容会自动上移 --> <nav class="navbar navbar-default navbar-fixed-top"> <!-- 导航补丁在底部 --> <nav class="navbar navbar-default navbar-fixed-bottom"> <!-- 静态导航,和页面等宽的导航条,去掉了圆角 --> <nav class="navbar navbar-default navbar-static-top">
相关文章推荐
- Bootstrap输入框和导航组件
- 学习使用Bootstrap输入框、导航、分页等常用组件
- Bootstrap输入框和导航组件
- Bootstrap 输入框和导航组件(六)
- bootstrap输入框导航组件input,nav
- bootstrap输入框和导航组件
- Bootstrap组件(小图标、下拉菜单、输入框、导航和导航条、媒体对象、列表组、分页导航、缩略图)
- BootStrap的导航组件
- Bootstrap输入框组件简单实现代码
- Bootstrap CSS组件之面包屑导航(breadcrumb)
- Bootstrap每天必学之导航组件
- Bootstrap CSS组件之导航(nav)
- Bootstrap每天必学之导航组件
- bootstrap——组件(五、导航)
- Bootstrap组件之导航
- bootstrap-输入框/导航
- MUI组件三:列表、遮罩蒙版、数字输入框、侧滑导航和弹出菜单
- Bootstrap基本组件学习笔记之input输入框组(9)
- BootStrap--CSS组件--输入框组(input-group)
- Bootstrap基本组件学习笔记之导航(10)