顶部导航：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. Descriptor&web.xml

    Deployment Descriptor部署描述符: - 部署描述符是要部署到Web容器或EJB容器的Web应用程序或EJB应用程序的配置文件. - 部署描述符应包含EJB应用程序中所有企业bean ...

  2. sql serve 创建序列

    Oracle中有sequence的功能,SQL Server类似的功能使用Identity列实现,但是有很大的局限性. 在2012中,微软终于增加了 sequence 对象,功能和性能都有了很大的提高 ...

  3. window.open 和 location.href 区别

    window.open():可以在一个网站上打开另外的一个网站的地址 window.location():只能在一个网站中打开本网站的网页

  4. bzoj 3611(洛谷 4103) [Heoi2014]大工程——虚树

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3611 https://www.luogu.org/problemnew/show/P4103 ...

  5. LOJ 572 「LibreOJ Round #11」Misaka Network 与求和——min_25筛

    题目:https://loj.ac/problem/572 莫比乌斯反演得 \( ans=\sum\limits_{D=1}^{n}\left\lfloor\frac{n}{D}\right\rflo ...

  6. hadoop项目开发案例方案汇总

    大数据Hadoop应用开发技术正可谓如火如荼推进中,以为大数据已经不仅仅是局限在互联网领域,而是已经被上升到了国家战略的高度层面.大数据正在深刻影响和改变我们的日常生活和工作方式. Hadoop应用开 ...

  7. VS2010安装选项中有个“图标库”

    位置 :\Program Files\Microsoft Visual Studio 10.0\Common7\VS2010ImageLibrary\2052\VS2010ImageLibrary.z ...

  8. java IO切割流合并流

    切割流,将一个较大的文件,切割成多个小文件存储

  9. bzoj 3978: [WF2012]Fibonacci Words

    Description 斐波那契01字符串的定义如下 F(n) = { 0  if n = 0 1  if n = 1 F(n-1)+F(n-2) if n >= 2 } 这里+的定义是字符串的 ...

  10. Logstash之四：logstash接收kafka数据

    3.kafka+logstash整合logstash1.5以后已经集成了对kafka的支持扩展,可以在conf配置中直接使用 vim /etc/logstash/conf.d/pay.conf inp ...