Bootstrap基础5(各类型导航)

<!DOCTYPE html><html lang="en"><head>    <head>        <meta charset="UTF-8">        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">        <title>Bootstrap导航</title>        <link rel="stylesheet" href="css/bootstrap.css">        <script src="js/jquery-3.2.1.js"> </script>        <script src="js/bootstrap.js"></script>    </head></head><body>    <div class="container">       <h2 class="page-header">标签页导航</h2>        <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>    </div>    <h3 class="page-header">胶囊式导航</h3>    <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>

<h3 class="page-header">胶囊式垂直导航</h3>    <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>    </ul>    <h3 class="page-header">胶囊式自适应导航</h3>    <ul class="nav nav-pills nav-justified">        <li class="active"><a href="">守望先锋</a></li>        <li ><a href="">虚幻争霸</a></li>        <li ><a href="">神之浩劫</a></li>        <li ><a href="">枪火游侠</a></li>    </ul>    <h3 class="page-header">多级下拉菜单导航(二级导航)</h3>    <ul class="nav nav-pills nav-justified">      <!--胶囊导航-->        <li class="active"><a href="">虚幻争霸</a></li>        <li ><a href="#" class="dropdown-toggle" data-toggle="dropdown">守望先锋<span class="caret"></span></a>             <ul class="dropdown-menu nav-justified">   <!--隐藏的下拉菜单-->                 <li><a href="#">网易游戏</a></li>                 <li><a href="#">腾讯游戏</a></li>                 <li><a href="#">畅游在线</a></li>                 <li><a href="#">世纪天成</a></li>             </ul>        </li>        <li ><a href="">神之浩劫</a></li>        <li ><a href="">枪火游侠</a></li>    </ul>    </div>

</body></html>
时间: 2024-10-05 10:44:18

Bootstrap基础5(各类型导航)的相关文章

Bootstrap基础6(路径导航)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>路径导航<

Bootstrap&lt;基础十七&gt;导航栏

导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏在您的应用或网站中作为导航页头的响应式基础组件.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开.在 Bootstrap 导航栏的核心中,导航栏包括了站点名称和基本的导航定义样式. 默认的导航栏 创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default. 向上面的元素添加 role="navigation",有助

Bootstrap&lt;基础十六&gt; 导航元素

Bootstrap 提供的用于定义导航元素的一些选项.它们使用相同的标记和基类 .nav.Bootstrap 也提供了一个用于共享标记和状态的帮助器类.改变修饰的 class,可以在不同的样式间进行切换. 表格导航或标签 创建一个标签式的导航菜单: 以一个带有 class .nav 的无序列表开始. 添加 class .nav-tabs. 下面的实例演示了这点: <!DOCTYPE html> <html> <head> <title>Bootstrap 实

bootstrap基础学习【菜单、按钮、导航】(四)

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>bootstrap基础学习[菜单.按钮.导航](四)</title> <link rel="stylesheet" href="css/bootstrap.min.css" /> <script src="http://libs.

玩转Bootstrap(基础) -- (6.导航条基础)

1.导航条样例 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>导航条</title> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/b

Bootstrap&lt;基础二十七&gt; 多媒体对象(Media Object)

Bootstrap 中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐.媒体对象可以用更少的代码来实现媒体对象与文字的混排. 媒体对象轻量标记.易于扩展的特性是通过向简单的标记应用 class 来实现的.你可以在 HTML 标签中添加以下两种形式来设置媒体对象: .media:该 class 允许将媒体对象里的多媒体(图像.视频.音频)浮动到内容区块的左边或者右边. .media-list

Bootstrap&lt;基础九&gt;辅助类

Bootstrap 中的一些可能会派上用场的辅助类. 文本 以下不同的类展示了不同的文本颜色.如果文本是个链接鼠标移动到文本上会变暗: 类 描述   .text-muted "text-muted" 类的文本样式 .text-primary "text-primary" 类的文本样式 .text-success "text-success" 类的文本样式 .text-info "text-info" 类的文本样式 .text-

Bootstrap&lt;基础一&gt; CSS 概览

原文:Bootstrap<基础一> CSS 概览 HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性.为了让这些正常工作,您需要使用 HTML5 文档类型(Doctype). 因此,请在使用 Bootstrap 项目的开头包含下面的代码段. <!DOCTYPE html> <html> .... </html> 如果在 Bootstrap 创建的网页开头不使用 HTML5 的文档类型(Doctype),

Bootstrap &lt;基础二十五&gt;警告(Alerts)

警告(Alerts)以及 Bootstrap 所提供的用于警告的 class.警告(Alerts)向用户提供了一种定义消息样式的方式.它们为典型的用户操作提供了上下文信息反馈. 您可以为警告框添加一个可选的关闭按钮.为了创建一个内联的可取消的警告框,请使用 警告(Alerts) jQuery 插件. 您可以通过创建一个 <div>,并向其添加一个 .alert class 和四个上下文 class(即 .alert-success..alert-info..alert-warning..ale

Bootstrap &lt;基础二十六&gt;进度条

Bootstrap 进度条.在本教程中,你将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet Explorer 9 及之前的版本和旧版的 Firefox 不支持该特性,Opera 12 不支持动画. 默认的进度条 创建一个基本的进度条的步骤如下: 添加一个带有 class .progress 的 <div>. 接着,在上面的 <div> 内,添加一个带有 class .prog