顶部导航：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. Google Review中Zlib.Portable报错的一种排查解决方案

    前几天遇到一个恶心的问题,跟同事一块解决了,在这里记录下过程. 比较懒,直接转他的blog: http://www.cnblogs.com/caochenghua/p/6530053.html 报错信 ...

  2. CSS3 Flexbox轻巧实现元素的水平居中和垂直居中（转）

    CSS3 Flexbox轻松实现元素的水平居中和垂直居中 网上有很多关于Flex的教程,对于Flex的叫法也不一,有的叫Flexbox,有的叫Flex,其实这两种叫法都没有错,只是Flexbox旧一点 ...

  3. gitlab操作

    一.初始设置 在某一个具体的project下: 1.gitlab中删除一个工程Setting-->General-->Advanced settings-->RemoveProjec ...

  4. stenciljs 学习九 使用jsx

    可以使用jsx 方便组件的开发 基本格式 主要是render 函数 class MyComponent { render() { return ( <div> <h1>Hell ...

  5. ASP.NET MVC中如何实现页面跳转

    1,最简单的方式:超链接 以下分别是连接到HomeController控制器下的SharpL动作方法,以及百度首页.代码如下: <a href="Home\SharpL"&g ...

  6. Java中的null

    null是Java中的关键字,像public.static.final.它是大小写敏感的,你不能将null写成Null或NULL,编译器将不能识别它们然后报错. Object obj = NULL; ...

  7. centos 修改时区及NTP时间同步

    在我们使用CentOS系统的时候,也许时区经常会出现问题,有时候改完之后还是会出错,下面我们就来学习一种方法来改变这个状况.如果没有安装,而你使用的是 CentOS系统 那使用命令 yum insta ...

  8. Excel的方向键失灵

    Excel的方向键操作不再是sheet范围内转动:而是变成了整个sheet页面在跳动. 不只是Excel,viso也是如此. 这是因为你的Scroll Lock键被按下了:所致箭头被解读为页面滚轮在滑 ...

  9. 查看 linux cpu 、内存、服务器型号和序列号、磁盘、raid 的信息

    yum -y install dmidecode 查看cpu的型号: 查看cpu的颗数:dmidecode -t processor |grep "Version"dmidecod ...

  10. 使用redis防止商品超发

    redis不仅仅是单纯的缓存,它还有一些特殊的功能,在一些特殊场景上很好用.redis中key的原子自增incrby和判断key不存在再写入的setnx方法,可以有效的防止超发. 下面使用两个不同的方 ...