顶部导航：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. Microsoft - Find Biggest Node

    public Node findBiggest (Node n1, Node n2){ Node c1 = n1; Node c2 = n2; boolean isPositive = false; ...

  2. C语言指针和操作系统的逻辑地址

    你在进行C语言指针编程中,可以读取指针变量本身值(&操作),实际上这个值就是逻辑地址,它是相对于你当前进程数据段的地址,不和绝对物理地址相干.只有在Intel实模式下,逻辑地址才和物理地址相等 ...

  3. WIFI_仿手机写wifi应用程序_WDS

    2-1.1_15节_使用WIFI网卡6_仿手机写wifi操作程序============================== 1. 仿手机写一个WIFI操作程序,作为STA,有这几个功能:a. 自动扫 ...

  4. 在oracle的连接(join)中使用using关键字

    如果是使用natraul join,并且两张表中如果有多个字段是具有相同的名称和数据类型的,那么这些字段都将被oracle自作主张的将他们连接起来. 但实际上我们有时候是不需要这样来连接的.我们只需要 ...

  5. tomcat源码阅读之安全机制

    一.领域(Realm): 1.Principal接口代表角色信息,包含了三个成员:用户名.密码.role列表(以逗号分隔),对应了tomcat-users.xml文件中一行user信息: Generi ...

  6. RESTful 知识点

    REST(英文:Representational State Transfer,简称REST) 对于资源的具体操作类型,由HTTP动词表示. 常用的HTTP动词有下面五个(括号里是对应的SQL命令). ...

  7. django 使用Ajax方式POST JSON数据包

    示例1: js: function SaveAction(){ //点击 保存按键 var senddata = {"type":"A", "host ...

  8. 设置zedgraph鼠标拖拽和局部放大属性(转帖)

    说一下几个属性的意义和具体应用: (1)鼠标拖拽显示区域 PanModifierKeys ->> Gets or sets a value that determines which mo ...

  9. Visual Studio2010不能安装Silverlight4_Tools,提示语言不一致

    天在装Silverlight4_Tools时出现“必须先安装与 Silverlight Tools 4 语言版本相一致的 Visual Studio 2010.Visual Web Developer ...

  10. java 字符串String

    在 Java 中,字符串被作为 String 类型的对象处理. String 类位于 java.lang 包中.默认情况下,该包被自动导入所有的程序. 创建 String 对象的方法: 只要是双引号标 ...