顶部导航：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. JQuery输入框获取/失去焦点行为

    //搜索框获取焦点清除内容 $(function() { $("input").focus(function() { //获取焦点,清空默认内容 $(this).css('colo ...

  2. MySQL--MODIFY COLUMN和ALTER COLUMN

    =================================================== 在修改列时,可以使用ALTER TABLE MODIFY COLUMN  和ALTER TABL ...

  3. 使用VBS发邮件

    NameSpace = "http://schemas.microsoft.com/cdo/configuration/"set Email = CreateObject(&quo ...

  4. folder，source folder，package 区别

    source folder source folder下面的Java文件都会被编译,编译后的文件会被放在我们设置的某个文件夹下面(一般我们设置成WEB-INF/classes),source fold ...

  5. mysql 官方docker镜像使用教程

    首先是pull image,这里我拉取的是5.x版本最新版: docker pull mysql:5 拉下来以后大可以按照官方的说明无脑启动,但是外部无法访问,所以绑定端口:docker run -- ...

  6. IPv6调用java后端接口报错：java.net.SocketException: Protocol family unavailable

    目前需求是java后端的接口需要支持IPv6.先确认linux机器已经绑定了IPv6: CMREAD-SV43 apache-tomcat/bin> ifconfig eth0 Link enc ...

  7. bzoj4697: 猪

    Description 红学姐和黄学长是好朋友.红学姐有一只宠物,叫魔法猪.黄学长也有一只宠物,叫小奇.有 n 个猪圈排成一排 ,魔法猪藏在某个猪圈中.为了找到魔法猪,小奇会向你询问一些猪圈中猪的个数 ...

  8. java-appium-527进阶-1 UiAutomator1&2区别和封装

    1.UiAutomator和UiAtumator2的区别: 1.1 UiAutomator1有关于id定位的策略 UiAutomator1 id定位在resourceid匹配失败时,会匹配conten ...

  9. 1031 Hello World for U （20 分）

    1031 Hello World for U (20 分) Given any string of N (≥5) characters, you are asked to form the chara ...

  10. [UE4]有限状态机、动画状态机、纯函数

    有限状态机 FSM:Finite State Machine,表示有限个状态以及在这些状态之间转移和动作的数学模型 纯函数: 纯函数: 先后调用顺序不重要,没有修改任何数值,只是获取数值或者临时计算一 ...