导航:

<!--
nav 导航的基础样式
-->
<div class="container">
<div class="row">
<ul class="nav nav-tabs">
<li><a href="#">雪碧图</a></li>
<li class="active"><a href="#">可乐</a></li>
<li><a href="#">coffee</a></li>
</ul>
</div> <!-- 胶囊式 nav-pills-->
<div class="row" style="margin-top:20px">
<ul class="nav nav-pills">
<li><a href="#">雪碧图</a></li>
<li class="active"><a href="#">可乐</a></li>
<li><a href="#">coffee</a></li>
</ul>
</div> <!-- 竖着排 nav-stacked-->
<div class="row" style="margin-top:20px">
<ul class="nav nav-pills nav-stacked">
<li><a href="#">雪碧图</a></li>
<li class="active"><a href="#">可乐</a></li>
<li><a href="#">coffee</a></li>
</ul>
</div> <!-- 两端对齐 nav-justified-->
<div class="row" style="margin-top:20px">
<ul class="nav nav-pills nav-justified">
<li><a href="#">雪碧图</a></li>
<li class="active"><a href="#">可乐</a></li>
<li><a href="#">coffee</a></li>
</ul>
</div> <!-- 导航中放下拉菜单-->
<div class="row" style="margin-top:20px">
<ul class="nav nav-tabs">
<li><a href="#">雪碧图</a></li>
<li class="active"><a href="#">可乐</a></li>
<li><a href="#">coffee</a></li>
<li>
<a href="#" data-toggle="dropdown">绿茶 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">html</a></li>
<li><a href="#">css</a></li>
<li><a href="#">js</a></li>
</ul>
</li>
</ul>
</div>
</div>

效果图:

选项卡:

<!--
1.导航对应的所有内容需要放在一个class为tab-content的层里;
2.对应的每个内容块都要加上tab-pane的class,且激活的内容块加上active的class
3.给每一个导航的a标签添加data-toggle="tab";
4.给每一个内容块添加一个id,和选项卡的锚点对应
-->
<div class="container">
<div class="row">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">雪碧图</a></li>
<li><a href="#tab2" data-toggle="tab">可乐</a></li>
<li><a href="#tab3" data-toggle="tab">coffee</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane active">html</div>
<div id="tab2" class="tab-pane">css</div>
<div id="tab3" class="tab-pane">js</div>
</div>
</div>
</div>

效果图:

bootstrap-导航、选项卡的更多相关文章

  1. Bootstrap导航

    前面的话 导航对于一位前端人员来说并不陌生.可以说导航是一个网站重要的元素组件之一,便于用户查找网站所提供的各项功能服务.本文将详细介绍Bootstrap导航 基础样式 Bootstrap框架中制作导 ...

  2. bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现

    bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现 $(document).ready(function() { $('.dropdown').hover(funct ...

  3. BootStrap导航栏的使用

    默认的导航栏 创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default. 向上面的元素添加 role="naviga ...

  4. Bootstrap 导航 标题栏

    Bootstrap 导航 标题栏: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  5. 自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏

    有人说前端发展太快,框架太多,各有所需,各有所长.看看这幅图,估计都知道这些框架,但是大部分公司中实际要用到的也就那么几个. 发展再快,框架再多.还是得回到原点,不就是Html+Css+JavaScr ...

  6. Bootstrap -- 导航栏样式、分页样式、标签样式、徽章样式

    Bootstrap -- 导航栏样式.分页样式.标签样式.徽章样式 1. 使用图标的导航栏 使用导航栏样式: <!DOCTYPE html> <html> <head&g ...

  7. Bootstrap 导航元素(标签页)

    [Bootstrap 导航元素] 1.基本的导航元素:标签导航.基于ul.li而来,给ul添加 class="nav nav-tabs" 即可.选中的li添加 class=&quo ...

  8. Bootstrap学习笔记(5)--实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单

    实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单 微笑的鱼 2014-01-03 Bootstrap 5,281 次围观 11条评论 使用Bootstrap导航条组件时,如果你的导航条带有下拉 ...

  9. Bootstrap 导航条理解

    以下理论内容copy自Bootstrap中文网 (一个不错的bootstrap学习网站) 导航条 默认样式的导航条 导航条是在您的应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并 ...

  10. Bootstrap导航栏实例讲解

    导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏是响应式元组件就,作为应用程序或网站的导航标题.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开. ...

随机推荐

  1. ADS1110/ADS1271

    ADS1110 1.初始化 软件:设置p任意2个为GPIO口 硬件:设置p0.2,p0.3为SDA,SCL 输入.输出 ADS1110的I2C地址(1001aaa)例如ADS1110A0的地址是100 ...

  2. 在OCR文字识别软件选项卡中怎么设置图像和文字

    PDF是广泛使用的文档格式.在ABBYY Finereader中,PDF文档的显示不会因电脑不同而有差异,可加密保护,非常适合在电子存档中进行保存.下面给 大家讲解如何在PDF选项设置图像和文字. 图 ...

  3. 【转】C#程序打包安装部署之添加注册表项

    今天为大家整理了一些怎样去做程序安装包的具体文档,这些文档并不能确保每个人在做安装包的时候都能正确去生成和运行,但是这些文档的指导作用对于需要的朋友来说还是很有必要的,在实际产品的安装部署过程中可能有 ...

  4. Saiku OLAP

    简介 Saiku成立于2008年,由Tom Barber和Paul Stoellberger研发.最初叫做Pentaho分析工具,起初是基于OLAP4J库用GWT包装的一个前端分析工具.经过多年的演化 ...

  5. kettle常见问题解决

    开源ETL工具kettle系列之常见问题 摘要:本文主要介绍使用kettle设计一些ETL任务时一些常见问题,这些问题大部分都不在官方FAQ上,你可以在kettle的论坛上找到一些问题的答案 1. J ...

  6. Maven 如何为不同的环境打包 —— 开发、测试和生产环境

    在开发过程中,我们的软件会面对不同的运行环境,比如开发环境.测试环境.生产环境,而我们的软件在不同的环境中,有的配置可能会不一样,比如数据源配置.日志文件配置.以及一些软件运行过程中的基本配置,那每次 ...

  7. SqlServer性能急剧下降,查看所有会话的状态及等待类型---Latch_Ex

    当某个数据库文件空间用尽,做自动增长的时候,同一时间点只能有一个用户人员可以做文件自动增长动作,其他任务必须等待,此时会出现Latch资源的等待.使用sp_helpdb查看业务数据库时发现:该数据库设 ...

  8. (四)文本编辑器Vim/Vi

    目录 前言 常用命令 扩展应用 总结 本系列先前的随笔位于新浪博客 前言 Vi和Vim都是文本编辑器,不同的是Vim是Vi的升级版本,它不仅兼容Vi的所有指令,而且还有一些新的特性在里面. Vim/V ...

  9. PHP使用1个crontab管理多个crontab任务

    http://www.binarytides.com/php-manage-multiple-cronjobs-with-a-single-crontab-entry/ In many php app ...

  10. Java 读Properties

    import java.io.*; import java.util.Properties; public class Study { public static void main(String[] ...