内容 参数
  OS   Windows 10 x64
  browser   Firefox 65.0.2
  framework     Bootstrap 3.3.7
  editor   Visual Studio Code 1.32.1  
  typesetting   Markdown

 

code

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <!-- IE将使用最新的引擎渲染网页 -->

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 页面的宽度与设备屏幕的宽度一致

         初始缩放比例 1:1 -->

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Demo</title>

    <meta name="author" content="www.cnblogs.com/kemingli">

    <!-- 引入外部bootstrap的css文件(压缩版)，版本是3.3.7 -->

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

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->

    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->

    <!--[if lt IE 9]>

        <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>

        <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>

    <![endif]-->

</head>

<body>

    <!-- start : demo -->

    <div class="container">

        <h2 class="page-header">标签页-样式1</h2>

        <ul class="nav nav-tabs">

            <li class="active"><a href="#">子鼠</a></li>

            <li><a href="#">丑牛</a></li>

            <li><a href="#">寅虎</a></li>

        </ul>

        <br />

        <h2 class="page-header">标签页-样式2</h2>

        <ul class="nav  nav-pills">

            <li class="active"><a href="#">卯兔</a></li>

            <li><a href="#">辰龙</a></li>

            <li><a href="#">已蛇</a></li>

        </ul>

        <br />

        <h2 class="page-header">标签页-样式2-竖版</h2>

        <div class="row">

            <div class="col-md-4">

                <ul class="nav nav-pills nav-stacked">

                    <li class="active"><a href="#">卯兔</a></li>

                    <li><a href="#">辰龙</a></li>

                    <li><a href="#">已蛇</a></li>

                </ul>

            </div>

            <div class="col-md-8" style="background-color:blueviolet;height:300px;">

            </div>

        </div>

    </div>

    <!-- end : demo -->

    <!-- NO.1 加载框架依赖的jQuery文件(压缩版)，版本是1.12.4 -->

    <script src="bootstrap/js/jquery.min.js"></script>

    <!-- NO.2 加载Bootstrap的所有JS插件，版本是3.3.7 -->

    <script src="bootstrap/js/bootstrap.min.js"></script>

</body>

</html>

 

result

 

resource

  • [ 文档 ] getbootstrap.com/docs/3.3
  • [ 源码 ] github.com/twbs/bootstrap
  • [ 源码 ] archive.mozilla.org/pub/firefox/releases/65.0/source/
  • [ 平台 ] www.cnblogs.com
  • [ 平台 ] github.com
  • [ 扩展 - 平台] www.bootcss.com
  • [ 扩展 - 浏览器 ] www.mozilla.org/zh-CN/firefox/developer

 

Bootstrap是前端开源框架，优秀，值得学习。

博文讲述的是V3版本，更为先进的是V4版本。学有余力的话，可作简单地了解。

Firefox是开源的浏览器，优秀，值得关注。

面对开源框架，分析、领悟与应用，能对其进行加减裁化，随心所欲而不逾矩。

博文的质量普通，仅供参考。盲目复制，处处是坑。Think twice before you act(三思而后行)！

Bootstrap3基础 nav 便签页(横版、竖版)的更多相关文章

  1. Bootstrap3基础 btn-group-vertical 按钮组（横着、竖着排列）

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  2. Word2007：如何在竖版（纵向）页面中间插入横版（横向）页面

        通常情况下,我们在word排版过程中使用一种页面版式(横版/竖版)即可.但在某些特殊情况下,我们可能会需要在竖版页面中间插入一页或多页横版页面,抑或在横版页面中间插入竖版页面.那么,如何针对这 ...

  3. 我的HTML总结之常用基础便签

    HTML:是Hyper Text Markup Language(超级文本标记语言)的缩写,HTML不是一种程序,只是一种控制网页中数据显示的标识语言. HTML由一组标签组成. HTML的基本结构 ...

  4. Unity3D开发一个2D横版射击游戏

    教程基于http://pixelnest.io/tutorials/2d-game-unity/ , 这个例子感觉还是比较经典的, 网上转载的也比较多. 刚好最近也在学习U3D, 做的过程中自己又修改 ...

  5. ios UIWebView截获html并修改便签内容（转载）

    ios UIWebView截获html并修改便签内容 博客分类: iphone开发iphone开发phoneGap uiwebviewstringByEvaluatingJavaScriptFromS ...

  6. [Unity+Android]横版扫描二维码

    原地址:http://blog.csdn.net/dingxiaowei2013/article/details/25086835 终于解决了一个忧伤好久的问题,严重拖了项目进度,深感惭愧!一直被一系 ...

  7. 如何让格斗游戏的横版过关(2) Cocos2d-x 2.0.4

    在第一章<如何使横版格戏>基础上.添加角色运动.碰撞.敌人.AI和音乐音效,原文<How To Make A Side-Scrolling Beat 'Em Up Game Like ...

  8. 魅族便签，是否能成为国内便签应用的No.1？

    继前不久锤子科技推出便签 Android 新版后,近期魅族在PRO 6公布会上也公布了最新的魅族便签应用.这一次魅族把便签应用拓展到了整个Android体系,也就是说.其它不论什么的Android手机 ...

  9. 【Cocos2d-Js实战教学（1）横版摇杆八方向移动】

    本教程主要通过搭建一个横版摇杆八方向移动的实例,让大家如何用Cocos2dx-Js来做一款游戏,从基础了解Cocos2dx-Js的基本实现原理,从创建工程,到各个知识点的梳理. 教程分为上下两讲: 上 ...

随机推荐

  1. ping主机不通邮件报警

    #!/bin/bash#Author: wang#Date: 20170825 for ip in "192.168.101.28" do ping -c 1 $ip && ...

  2. Django MTV模式详解

      出自:http://blog.csdn.net/dbanote/article/details/11338953 在正式开始coding之前,我觉得有必要探讨下Django的MTV模式,理论和实践 ...

  3. Thinkphp 框架

    核心函数库:   配置文件:     语言包  :  核心资源库:入口文件 核心配置文件 系统行为目录:功能目录:核心文件:摸板类文件目录

  4. tfs分支操作

    1.在代码管理器中找到代码项 右击——分支与合并——分支——默认所有选项——确定. 2.可能刚打出的分支为红色,签入,修改代码,待测试后代码合并到主干中(下拉选出他的上级,一般为主干),删除分支. 3 ...

  5. JS中常用的输出方式(五种)

    1.alert("要输出的内容"); ->在浏览器中弹出一个对话框,然后把要输出的内容展示出来 ->alert都是把要输出的内容首先转换为字符串然后在输出的 2.doc ...

  6. Vue系列之 => 列表动画

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. request.getServletPath()，request.getContextPath()

    2018-11-24  16:34:33 1. getServletPath():获取能够与“url-pattern”中匹配的路径,注意是完全匹配的部分,*的部分不包括. 2. getPageInfo ...

  8. 解决caffe绘制训练过程的loss和accuracy曲线时候报错：paste: aux4.txt: 没有那个文件或目录 rm: 无法删除"aux4.txt": 没有那个文件或目录

    我用的是faster-rcnn,在绘制训练过程的loss和accuracy曲线时候,抛出如下错误,在网上查找无数大牛博客后无果,自己稍微看了下代码,发现,extract_seconds.py文件的 g ...

  9. 设计模式之Decorator（油漆工）（转）

    Decorator常被翻译成"装饰",我觉得翻译成"油漆工"更形象点,油漆工(decorator)是用来刷油漆的,那么被刷油漆的对象我们称decoratee.这 ...

  10. Linux查看磁盘空间大小命令

    Linux查看磁盘空间大小命令df -hldf -hl 查看磁盘剩余空间df -h 查看每个根路径的分区大小du -sh [目录名] 返回该目录的大小du -sm [文件夹] 返回该文件夹总M数du ...