Bootstrap 导航标题栏

Bootstrap 导航标题栏：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css">
</head>

<body style="margin:50px 0">
    <div class="container">
        <ul class="nav nav-tabs">
            <li class="active"><a href="">01</a>
            </li>
            <li><a href="">02</a>
            </li>
            <li><a href="">03</a>
            </li>
            <li><a href="">04</a>
            </li>
        </ul>
        <ul class="nav nav-pills">
            <li class="active"><a href="">01</a>
            </li>
            <li><a href="">02</a>
            </li>
            <li><a href="">03</a>
            </li>
            <li><a href="">04</a>
            </li>
        </ul>
        <ul class="nav nav-pills nav-stacked">
            <li class="active"><a href="">01</a>
            </li>
            <li><a href="">02</a>
            </li>
            <li><a href="">03</a>
            </li>
            <li><a href="">04</a>
            </li>
        </ul>
        <ul class="nav nav-pills nav-justified">
            <li class="active"><a href="">01</a>
            </li>
            <li><a href="">02</a>
            </li>
            <li><a href="">03</a>
            </li>
            <li><a href="">04</a>
            </li>
        </ul>
    </div>
    <nav class=‘navbar navbar-default‘>asdf</nav>
    <nav class=‘navbar navbar-inverse‘>asdf</nav>
    <nav class=‘navbar navbar-default‘>
        <div class="container">
            <div class="navbar-head">
                <a href="" class="navbar-brand">标题名称</a>
            </div>
        </div>
    </nav>
    <nav class=‘navbar navbar-default‘>
        <div class="container">
            <div class="navbar-head">
                <a href="" class="navbar-brand">标题名称</a>
            </div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="">001</a>
                </li>
                <li><a href="">002</a>
                </li>
                <li class="disabled"><a href="">003</a>
                </li>
                <li><a href="">004</a>
                </li>
            </ul>
        </div>
    </nav>
    <nav class=‘navbar navbar-default navbar-fixed-top‘>
        <div class="container">
            <div class="navbar-head">
                <a href="" class="navbar-brand">标题名称</a>
            </div>
            <form action="" class="navbar-form navbar-right">
                <input type="text" class="form-control">
            </form>
            <button class="btn btn-default navbar-btn">button</button>
        </div>
    </nav>
    <nav class=‘navbar navbar-default navbar-fixed-bottom‘>
        <div class="container">
            <div class="navbar-head">
                <a href="" class="navbar-brand">标题名称</a>
            </div>
            <form action="" class="navbar-form navbar-right">
                <input type="text" class="form-control">
            </form>
            <button class="btn btn-default navbar-btn">button</button>
        </div>
    </nav>
    <nav class=‘navbar navbar-default navbar-static-tops‘>
        <div class="container">
            <div class="navbar-head">
                <a href="" class="navbar-brand">标题名称</a>
            </div>
            <form action="" class="navbar-form navbar-right">
                <input type="text" class="form-control">
            </form>
            <button class="btn btn-default navbar-btn">button</button>
        </div>
    </nav>
    <p>001</p>
    <p>002</p>
    <p>003</p>
    <p>004</p>
    <p>005</p>
    <p>006</p>
    <p>007</p>
    <p>008</p>
    <p>009</p>
    <p>010</p>
    <p>011</p>
    <p>012</p>
    <p>013</p>
    <p>014</p>
    <p>015</p>
    <p>016</p>
    <p>017</p>
    <p>018</p>
    <p>019</p>
</body>

</html>

时间： 2024-10-19 06:28:47

Bootstrap 导航标题栏的相关文章

bootstrap导航

导航 Bootstrap 中的导航组件都依赖同一个 .nav 类,状态类也是共用的.改变修饰类可以改变样式. 标签页注意 .nav-tabs 类依赖 .nav 基类代码如下 <!DOCTYPE html> <html ng-app="UserInfoCtrl"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible"

前面的话导航条(navbar)和导航(nav),就相差一个字,多了一个“条”字.其实在Bootstrap框架中他们还是明显的区别.在导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式.本文将详细介绍Bootstrap导航条基础导航条在Bootstrap框架中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多. 导航条是在应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并且可开

bootstrap 导航元素

<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 带有下拉菜单的胶囊</title> <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <script src="/scripts/jquery.min.js"><

Bootstrap导航悬浮顶部,stickUp

stickUp 一个 jQuery 插件这是一个简单的jQuery插件,它能让页面目标元素 "固定" 在浏览器窗口的顶部,即便页面在滚动,目标元素仍然能出现在设定的位置.此插件可以在多页面的网站上工作,也能在单页面上面实现导航功能.滚动当前页面看看导航条的效果吧. 首先我们去下载我们需要的js和css文件 https://github.com/LiranCohen/stickUp 经研究必要的js和css为 bootstrap.min.css stickup.css jquery.j

网站导航标题栏下面有一小色块跟随鼠标移动特效

可能很多人看标题不是很明白这个特效,下面简述一下这个特效: 看到很多网站上的导航栏下面有一个小的色块,一开始小色块是处在第一个标题下面的,当鼠标移动到另一个标题时,这个小色块就会悠悠地跑到对应的标题下面. 这里截图只能看到色块是移动了,但显示不出色块是从Home下面平滑移动到Product下面的.反正就是这个意思了.大家看我上面的解释就知道了,不行看下面代码或者把代码拷贝运行一下就看到效果了这个特效很好玩,正好朋友写了这方面的特效代码,我拿过来看了下,这才发现其实很简单,就是几个jquery封

Bootstrap导航栏实例讲解

导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏是响应式元组件就,作为应用程序或网站的导航标题.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开.在 Bootstrap 导航栏的核心中,导航栏包括了为站点名称和基本的导航定义样式. 1.默认的导航栏创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default(白底黑字),navbar-inverse(黑底白字) 向上面的元素添加 ro

实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单

使用Bootstrap导航条组件时,如果你的导航条带有下拉菜单,那么这个带下拉菜单的导航在点击时只会浮出下拉菜单,它本身的href属性会失效,也就是失去了超链接功能,这并不是我想要的,我希望导航条的链接可以正常打开它的链接,但又需要下拉菜单功能,开始折腾~ 首先解决带下拉菜单的导航条可以点击问题,下拉菜单效果是JS实现的,分析bootstrap.js文件发现,Bootstrap把下拉菜单写成了一个JQuery插件,在dropdown代码段中找到了关键的几句: // APPLY TO STANDA

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

1. 使用图标的导航栏使用导航栏样式: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My Test bootstrap</title> <link rel="stylesheet" href="

浅谈Bootstrap——导航条起步

不多说,直接上代码. <div class="navbar navbar-default"> <div class="container"> <div class="navbar-header"> <a href="#" class="navbar-brand"> <span class="logo"></span>

Bootstrap 导航 标题栏

Bootstrap 导航 标题栏的相关文章

Bootstrap 导航标题栏

Bootstrap 导航标题栏的相关文章