[学习笔记] bootstrap(五) : 输入框组和简单导航元素
来源:互联网 发布:淘宝会员名叫什么好呢 编辑:程序博客网 时间:2024/06/05 18:03
输入框组
简单版
<div class="input-group"> <span class="input-group-addon">@</span> <input type="text" placeholder="Email" class="form-control"></div><div class="input-group"> <span class="input-group-addon">$</span> <input type="number" step="0.1" placeholder="Money" class="form-control"> <span class="input-group-addon">.00</span></div>
按钮版
<div class="input-group"> <span class="input-group-btn"> <button class="btn">^_^</button> </span> <input placeholder="UserName" class="form-control"> <span class="input-group-btn"> <button class="btn">GO</button> </span></div>
下拉按钮版(以及分割按钮)
<div class="input-group"> <div class="input-group-btn"> <button class="btn btn-default">下拉菜单</button> <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"/></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> </ul> </div> <input placeholder="Type Words" class="form-control"></div>
阐述一下最后这个复杂版:由一个输入框组为最大容器,里面包含了一个按钮组和一个input输入框,其中按钮组由2个按钮(其中一个用于触发下拉),一个下拉菜单构成!
导航元素
tabs:
<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> <li> <a href="#" > 帮助 </a> </li> <li> <a href="#" > 关于 </a> </li> <li> <a href="#" > 联系我们 </a> </li></ul>
pills胶囊式:
<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> <li> <a href="#" > 帮助 </a> </li> <li> <a href="#" > 关于 </a> </li> <li> <a href="#" > 联系我们 </a> </li></ul>
一个样式变成垂直的(.nav-stacked)
<ul class="nav nav-pills nav-stacked"> <li class="active"> <a href="#" > 首页 </a> </li> <li> <a href="#" > 分类 </a> </li> <li> <a href="#" > 服务 </a> </li> <li> <a href="#" > 广告 </a> </li> <li> <a href="#" > 帮助 </a> </li> <li> <a href="#" > 关于 </a> </li> <li> <a href="#" > 联系我们 </a> </li></ul>
带下拉,禁用,real tabs(Tab切换)
<ul class="nav nav-tabs"> <li class="active"> <a data-toggle="tab" href="#home" > 首页 </a> </li> <li> <a data-toggle="dropdown" href="#" > 分类 <span class="caret"></span> </a> <ul class="dropdown-menu"> <li> <a href="#" > 分类一 </a> </li> <li> <a href="#" > 分类2 </a> </li> <li> <a href="#" > 分类3 </a> </li> <li> <a href="#" > 分类4 </a> </li> </ul> </li> <li class="disabled"> <a href="#" > 服务 </a> </li> <li> <a data-toggle="tab" href="#adv" > 广告 </a> </li> <li> <a data-toggle="tab" href="#help" > 帮助 </a> </li> <li> <a data-toggle="tab" href="#about" > 关于 </a> </li> <li> <a data-toggle="tab" href="#phone" > 联系我们 </a> </li></ul><div class="tab-content"> <div id="home" class="tab-pane fade in active"> <h3>说出来你不信,我是主页</h3> <p>我是主页内容</p> </div> <div id="help" class="tab-pane fade"> <h3>说出来你不信,我是帮助</h3> <p>我是帮助:求人不如求几!谷歌一下你就知道!</p> </div> <div id="about" class="tab-pane fade"> <h3>说出来你不信,我不是帮助</h3> <p>我是关于:关于我是个好人的问题!已经有...</p> </div> <div id="phone" class="tab-pane fade"> <h3>说出来你不信,我是联系方式</h3> <p>我是联系方式:求人不如求几!谷歌一下你就知道!</p> </div></div>
上面的导航栏由一个.nav-tabs的ul构成;其中有首页(默认激活),分类(下拉按钮):直接在li中添加一个下拉菜单,用a标签触发即可; 而对于可切换的tab:使用.tab-content和.tab-pane配合实现:由.tab-content的div中有多个带id的div,每个div必须带有样式.tab-pane,对应导航中a标签的href指向
0 0
- [学习笔记] bootstrap(五) : 输入框组和简单导航元素
- bootstrap学习笔记-导航和导航条
- Bootstrap学习:导航元素
- Bootstrap输入框和导航组件
- bootstrap输入框和导航组件
- Bootstrap输入框和导航组件
- Bootstrap输入框和导航组件
- bootstrap-输入框/导航
- Bootstrap学习笔记(五)菜单、按钮及导航
- [学习笔记] bootstrap(六): nav导航栏和面包屑导航
- Bootstrap组件学习笔记(二)——按钮组和输入框组
- bootstrap 学习笔记 - 6 (输入框组 + )
- Bootstrap学习:输入框组
- Bootstrap学习笔记(五)
- Bootstrap导航元素
- Bootstrap 导航元素
- Bootstrap—导航元素
- Bootstrap 导航元素
- java深克隆浅克隆
- MySql语句------------------更新
- PostgreSQL中特殊语句
- java.util.ConcurrentModificationException 解决方案
- 带你理解beta分布
- [学习笔记] bootstrap(五) : 输入框组和简单导航元素
- Linux 服务器安全运维
- FFmpeg 3.0 版发布
- stm32 数据类型的定义(常用的U8,U16,U32到底代表什么)
- Android性能优化编码规范
- web 服务器功能模块设计
- [Qt配置指南—5]Qt 5.4.2 Configure Options---Qt for Embeded Linux嵌入式Linux
- 【数据库SQL】游标使用案例
- Hadoop机架感知原理