内容 参数
  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. es6正则表达式

    es6中如果RegExp构造函数第一个参数是一个正则对象,那么可以使用第二个参数指定修饰符. 而且,返回的正则表达式会忽略原有的正则表达式的修饰符,只使用新指定的修饰符. new RegExp(/ab ...

  2. LeetCode167.两数之和II-输入有序数组

    给定一个已按照升序排列 的有序数组,找到两个数使得它们相加之和等于目标数. 函数应该返回这两个下标值 index1 和 index2,其中 index1 必须小于 index2. 说明: 返回的下标值 ...

  3. Ajax技术之使用XMLHttpRequest对象（一）【初始化XMLHttpRequest对象】

    在初始化XMLHttpRequest对象时要考虑两种情况,一种是IE浏览器,另一种是非IE浏览器.在IE浏览器中要把XMLHttpRequest实例化一个ActiveX对象 http_request ...

  4. maven下载和安装

    注意:安装Maven3之前需要安装jdk1.7以上版本,下面介绍的是最新版Maven官网下载并安装, 每个人使用的编辑器不同,在这里我就不介绍了,可以去网上查对应编辑器Maven配置方法. 第一步,官 ...

  5. fiddler2抓包数据工具使用教程

    一款免费且功能强大的数据包抓取软件.它通过代理的方式获取程序http通讯的数据,可以用其检测网页和服务器的交互情况,能够记录所有客户端和服务器间的http请求,支持监视.设置断点.甚至修改输入输出数据 ...

  6. 运行vs时打开一个浏览器窗口，而不是在原有窗口上打开一个标签

    1.运行vs时打开一个浏览器窗口,而不是在原有窗口上打开一个标签,结束调试时窗口又关闭了,特别麻烦. 在用swagger调试接口时,好不容易输入了测试数据,然而窗口关闭了,再次调试又得重新输入. 解决 ...

  7. sitecore系列教程之Sitecore个性化-配置文件，模式和角色

    这是利用Sitecore规则引擎实现数字化转换的三部分系列的第二部分.阅读上一篇文章,通过为您的个性化体验定义内容策略来设置基础.   Sitecore有一个非常强大的规则引擎,可以帮助推动个性化的用 ...

  8. Shell 脚本编程基础

    通过本文记录学习Linux Shell的一些笔记思考和总结,以加强记忆和理解.主要学习参考资料有: 1.<鸟哥的Linux私房菜-基础篇>第四版 2.菜鸟教程——Linux教程 3.ear ...

  9. winscp 怎么用私钥文件登录的，以.ppk结尾的密钥文件

    Winscp默认用帐号密码登录,用私钥文件登录需要在高级选项里面的SSH--验证里面选择文件. Winscp使用的是putty作为SSH登录工具,而puttygen所生成的是以.ppk结尾的密钥文件. ...

  10. 高性能NIO框架Netty-对象传输

    http://cxytiandi.com/blog/detail/17403 上篇文章高性能NIO框架Netty入门篇我们对Netty做了一个简单的介绍,并且写了一个入门的Demo,客户端往服务端发送 ...