bootstrap-导航条

<body style="padding-top:50px">

<!--

    navbar              导航条的基础样式

    nav navbar-nav        导航条里菜单的固定样式组合class

    navbar-default        导航条的默认样式

    navbar-static-top    导航条为直角

    navbar-fixed-top    导航条固定在上面,一般这时候要给body设置padding值或margin

    navbar-fixed-bottom    导航条固定在下面

 -->

<div class="container">

    <!-- 默认样式的导航条 -->

    <nav class="navbar navbar-default">

        <ul class="nav navbar-nav">

            <li class="active"><a href="#">W3School</a></li>

            <li><a href="#">雪碧</a></li>

            <li><a href="#">果汁</a></li>

        </ul>

    </nav>

    <!-- 黑色的导航条 -->

    <nav class="navbar navbar-inverse">

        <ul class="nav navbar-nav">

            <li class="active"><a href="#">W3School</a></li>

            <li><a href="#">雪碧</a></li>

            <li><a href="#">果汁</a></li>

        </ul>

    </nav>

    <!-- 直角的导航条 -->

    <nav class="navbar navbar-inverse navbar-static-top">

        <ul class="nav navbar-nav">

            <li class="active"><a href="#">W3School</a></li>

            <li><a href="#">雪碧</a></li>

            <li><a href="#">果汁</a></li>

        </ul>

    </nav>

    <!-- 固定在下面/上面的导航条 -->

    <nav class="navbar navbar-inverse navbar-fixed-top">

        <ul class="nav navbar-nav">

            <li class="active"><a href="#">W3School</a></li>

            <li><a href="#">雪碧</a></li>

            <li><a href="#">果汁</a></li>

        </ul>

    </nav>

</div>

<script type="text/javascript" src="jquery/jquery.min.js"></script>

<script type="text/javascript" src="bootstrap/bootstrap.min.js"></script>

</body>

效果：

导航条的其他样式：

<!--

    navbar-header            导航的头部，一般情况下放logo

    navbar-brand            用来放logo的，需要配合navbar-header

 -->

<!-- 一般情况下都会把nav包在container外面 -->

<nav class="navbar navbar-default">

    <div class="container">

        <div class="navbar-header">

            <a href="#" class="navbar-brand">

                <img src="user_photo.png" height="20"/>

            </a>

        </div>

        <ul class="nav navbar-nav">

            <li class="active"><a href="#">W3School</a></li>

            <li><a href="#">雪碧</a></li>

            <li><a href="#">果汁</a></li>

        </ul>

    </div>

</nav>

<!-- 对齐方式的导航条 -->

<nav class="navbar navbar-default">

    <div class="container">

        <div class="navbar-header">

            <a href="#" class="navbar-brand">logo</a>

        </div>

        <!-- navbar-left表示内容以左边对齐 -->

        <ul class="nav navbar-nav navbar-left">

            <li class="active"><a href="#">W3School</a></li>

            <li><a href="#">雪碧</a></li>

            <li><a href="#">果汁</a></li>

        </ul>

        <!-- navbar-right表示内容以右边对齐 -->

        <ul class="nav navbar-nav navbar-right">

            <li><a href="#">登陆</a></li>

            <li><a href="#">注册</a></li>

        </ul>

    </div>

</nav>

<!-- 有链接与文字的导航条 -->

<nav class="navbar navbar-default">

    <div class="container">

        <div class="navbar-header">

            <a href="#" class="navbar-brand">logo</a>

        </div>

        <!-- navbar-left表示内容以左边对齐 -->

        <ul class="nav navbar-nav navbar-left">

            <li class="active"><a href="#">W3School</a></li>

            <li><a href="#">雪碧</a></li>

            <li><a href="#">果汁</a></li>

        </ul>

        <a href="#" class="navbar-link navbar-text">链接</a>

        <p class="navbar-text">这里是一段文字</p>

        <!-- navbar-right表示内容以右边对齐 -->

        <ul class="nav navbar-nav navbar-right">

            <li><a href="#">登陆</a></li>

            <li><a href="#">注册</a></li>

        </ul>

    </div>

</nav>

<!-- 有表单的导航条 -->

<nav class="navbar navbar-default">

    <div class="container">

        <div class="navbar-header">

            <a href="#" class="navbar-brand">logo</a>

        </div>

        <!-- navbar-left表示内容以左边对齐 -->

        <ul class="nav navbar-nav navbar-left">

            <li class="active"><a href="#">W3School</a></li>

            <li><a href="#">雪碧</a></li>

            <li><a href="#">果汁</a></li>

        </ul>

        <button class="btn btn-success navbar-btn">搜索</button>        

        <!-- 如果导航里有form，需要给form添加navbar-form,如果让他们在一行显示添加navbar-left -->

        <form action="aaa.html" class="navbar-form navbar-left">

            <input type="text" class="form-control"/>

            <button class="btn btn-default">搜索</button>

        </form>

        <!-- navbar-right表示内容以右边对齐 -->

        <ul class="nav navbar-nav navbar-right">

            <li><a href="#">登陆</a></li>

            <li><a href="#">注册</a></li>

        </ul>

    </div>

</nav>

效果：

bootstrap-导航条的更多相关文章

bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现
bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现 $(document).ready(function() { $('.dropdown').hover(funct ...
Bootstrap学习笔记（5）--实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单
实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单微笑的鱼 2014-01-03 Bootstrap 5,281 次围观 11条评论使用Bootstrap导航条组件时,如果你的导航条带有下拉 ...
Bootstrap 导航条理解
以下理论内容copy自Bootstrap中文网 (一个不错的bootstrap学习网站) 导航条默认样式的导航条导航条是在您的应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并 ...
bootstrap课程8 bootstrap导航条在不同设备上的显示效果如何
bootstrap课程8 bootstrap导航条在不同设备上的显示效果如何(多去看参考手册) 一.总结一句话总结:在手机端或者平板端或者显示不够的话就缩起来了.(多去看参考手册) 二.bootst ...
浅谈Bootstrap——导航条起步
不多说,直接上代码. <div class="navbar navbar-default"> <div class="container"&g ...
bootstrap导航条+模态对话框+分页样式
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
Bootstrap——导航条（navbar）
导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多. 导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航).表单以及表单和导航一起结合等多种形式. 在制作一个基 ...
bootstrap导航条组件
一.导航条模板(官方文档) <nav class="navbar navbar-default"> <div class="container-flui ...
bootstrap导航条等样例持续更新》。。
1.导航条  <nav class="navbar navbar-static-top navbar-inverse"> <d ...
bootstrap导航条相关知识
在导航条(navbar)中有一个背景色.而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式. 为导航条添加标题.二级菜单及状态 <div class=&quo ...

随机推荐

jedis,spring-redis-data 整合使用，版本问题异常以及解决。
最近整合使用redis spring-redis 出现了一下问题 spring:3.2.4.RELEASE jedis: jedis 2.4.2 spring-data-redis: 1.5.2.R ...
xcodebuild
xcodebuild -workspace /path/union/moon-ios/Moon.xcworkspace -scheme Moon ONLY_ACTIVE_ARCH=NO TARGETE ...
C++ / CLI 调用 C++ /Native 随记
C# 封装原生C++ 方法:1.C++ CLR(托管) 调用 C++(原生)2.C#调用C++ CLR , 注意各个平台编译版本需一致.3.C# 默认编绎生成版本是 any cpu , 需修改成 ...
Invoke-WebRequest Invoke-RestMethod 乱码研究
powershell Invoke-WebRequest Invoke-RestMethod 乱码 encoding sharset CharacterSet Invoke-WebRequest和In ...
C++二进制文件中读写bitset
这个比较简单,直接上代码: bitset< > *b = >(); bitset< > *c = >(); ofstream out("I:\\test. ...
三部曲二（基本算法、动态规划、搜索）-1006-The Same Game
The Same Game Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 4585 Accepted: 1699 Des ...
Mybatis开篇以及配置教程
MyBatis来源~: MyBatis本是apache的一个开源的项目,原来称为iBatis,2010年这个项目由apache softwarefoundation迁移到了google code,并改 ...
C# 计算时间差用timespan函数
TimeSpan 结构表示一个时间间隔. 命名空间:System 程序集:mscorlib(在 mscorlib.dll 中) 1.DateTime值类型代表了一个从公元0001年1月1日0点0分 ...
UWP/Win10新特性系列—App Service
Win10中,新增了一个很实用的新特性叫做App Service,App Service允许App不在前台运行的情况下提供出一个或多个对外服务供其他App使用,这看起来就好像Web开发中的Web Ap ...
修改LR自带的示例程序端口号
问题:LoadRunner的HP Web Tours 应用程序服务启动不了,提示1080端口被占用的问题解决方法: 查看占用1080端口的进程 Cmd 窗口输入netstat –ano 找到占用该 ...

bootstrap-导航条

bootstrap-导航条的更多相关文章

随机推荐

热门专题