顶部导航：nav-tabs

左边导航：nav-list

响应式布局：div嵌套 ~ container、row、ol-lg-X

效果：

源码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>1</title>

        <link rel="stylesheet" href="dist/css/bootstrap.css" />

        <link rel="stylesheet" href="dist/css/bootstrap-theme.css" />

    </head>

    <body>

        <div class="container">

            <!--顶部导航-->

            <div class="row">

                <div class="nav col-lg-12 navbar-brand">

                    <ul class="nav nav-tabs navbar-default ">

                        <li>

                            <a>首页</a>

                        </li>

                        <li class="active">

                            <a>水果</a>

                        </li>

                        <li>

                            <a>自我介绍</a>

                        </li>

                        <li>

                            <a>fuxk</a>

                        </li>

                    </ul>

                </div>

            </div>

            <br />

            <!--内容-->

            <div class="row">

                <div class="col-lg-1">

                    <ul class="nav nav-list navbar-default nav-pills ">

                        <li>

                            <a>XXXX</a>

                        </li>

                        <li class="active">

                            <a>XXXX</a>

                        </li>

                        <li>

                            <a>XXXX</a>

                        </li>

                        <li>

                            <a>XXXX</a>

                        </li>

                        <li>

                            <a>XXXX</a>

                        </li>

                        <li>

                            <a>XXXX</a>

                        </li>

                    </ul>

                </div>

                <div class="col-lg-11">

                    <table class="table table-hover">

                        <thead>

                            <tr class="alert-info active table-">

                                <td><b>名称</b></td>

                                <td><b>单价</b></td>

                                <td><b>库存</b></td>

                            </tr>

                        </thead>

                        <tbody>

                            <tr>

                                <td>番茄</td>

                                <td>1.1</td>

                                <td>3</td>

                            </tr>

                            <tr>

                                <td>苹果</td>

                                <td>2.5</td>

                                <td>10</td>

                            </tr>

                            <tr>

                                <td>哈密瓜</td>

                                <td>2.5</td>

                                <td>10</td>

                            </tr>

                            <tr>

                                <td>草莓</td>

                                <td>2.5</td>

                                <td>10</td>

                            </tr>

                        </tbody>

                    </table>

                </div>

            </div>

        </div>

        <script type="text/javascript" src="dist/js/jquery-3.1.1.js"></script>

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

    </body>

</html>

bootstrap做的导航的更多相关文章

  1. Bootstrap<基础十七>导航栏

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

  2. bootstrap做了一个表格

    花了一下午做了一个表格: 大致是这样: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf ...

  3. Bootstrap系列 -- 42. 导航条中的按钮、文本和链接

    Bootstrap框架的导航条中除了使用navbar-brand中的a元素和navbar-nav的ul和navbar-form之外,还可以使用其他元素.框架提供了三种其他样式: 1.导航条中的按钮na ...

  4. Bootstrap做的HTML页面在本地IE打开正常，放到服务器上显示就不正常了

    <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Com ...

  5. Bootstrap面包屑导航

    Bootstrap中提供了面包屑导航的实现方法: 只需要引入bootstrap.css文件即可. 主要引用的样式有: .span6 .breadcrumb 实例代码如下: <!DOCTYPE h ...

  6. 如何做一个导航栏————浮动跟伪类（hover）事件的应用

    我们先说一下伪类选择器的写法: 写法:选择器名称:伪类状态{}4 常见伪类状态: 未访问:link 鼠标移上去:hover 激活选定:active 已访问:visited 获得焦点的时候触发:focu ...

  7. bootstrap的 附加导航Affix导航 (侧边窄条式 滚动监控式导航) 附加导航使用3.

    affix: 意思是粘附, 附着, 沾上. 因此, 附加导航就是 bootstrap的 Affix.js组件. bootstrap的 附加导航, 不是说导航分成主导航, 或者什么 副导航的 而是指, ...

  8. 第二百三十八节，Bootstrap输入框和导航组件

    Bootstrap输入框和导航组件 学习要点: 1.输入框组件 2.导航组件 3.导航条组件 本节课我们主要学习一下Bootstrap的两个个组件功能:输入框组件和导航导航条组件. 一．输入框组件 文 ...

  9. 用bootstrap做一个背景可轮转的登录界面

    用bootstrap做一个背景可轮转的登录界面 一.总结 一句话总结:用css3的动画的 @keyframes 规则,制作轮转图. 1.用bootstrap做一个背景可轮转的登录界面? a.动画部分用 ...

随机推荐

  1. git操命令&&node操作命令

    1:删除远程库中的分支(现在本地删除该分支) git push origin --delete trunk分支 2:初始化一个新的工程 jdf install init xxx 3:编译好代码后,交给 ...

  2. （精）AVL树旋转共8种情况（涵盖所有考研的范围）

  3. 转 微软发布TX（LINQ To Logs And Traces）

    作者 Roopesh Shenoy ,译者 马德奎 发布于 一月 09, 2014 | 微软开源技术公司于近日发布了Tx,这是一个开源项目,可以使用日志/跟踪文件辅助调试,以及创建实时监控和告警系统. ...

  4. 序列化效率比拼——谁是最后的赢家avaScriptSerializer方式、DataContract方式、Newtonsoft.Json

    前言:作为开发人员,对象的序列化恐怕难以避免.楼主也是很早以前就接触过序列化,可是理解都不太深刻,对于用哪种方式去做序列化更是随波逐流——项目中原来用的什么方式照着用就好了.可是这么多年自己对于这东西 ...

  5. 【转】每天一个linux命令(11)：nl命令

    原文网址:http://www.cnblogs.com/peida/archive/2012/11/01/2749048.html nl命令在linux系统中用来计算文件中行号.nl 可以将输出的文件 ...

  6. CommonsChunkPlugin知识点

    CommonsChunkPlugin 的作用就是提取代码中的公共模块,然后将公共模块打包到一个独立的文件中去,以便在其它的入口和模块中使用. 多个 html共用一个js文件(chunk),可用Comm ...

  7. Django模板语言（常用语法规则）

    Django模板语言 The Django template language 模板中常用的语法规则 {最新版本的Django语法可能有改变,不支持的操作可能支持了.[HTML教程 - 基本元素/标签 ...

  8. C# DateTime 月第一天和最后一天 取法

    取得某月和上个月第一天和最后一天的方法 /// <summary> /// 取得某月的第一天 /// </summary> /// <param name="d ...

  9. Windows Server 2008 R2 3389端口更改

    Windows Server 2008 R2 3389端口更改 2016-04-28 23:08 4734人阅读 评论(0) 收藏 举报  分类: Windows(61)  版权声明:本文为博主原创文 ...

  10. android自定义控件的一个思路-入门

    转自:http://blog.sina.com.cn/s/blog_691051e10101a3by.html   很多时候没有我们需要使用的控件,或者控件并不美观.比如这个滑动开关,这是androi ...