内容 参数
  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. Koa中使用cookies

    错误重现:(使用ctx.cookies.set时报错) 这是因为koa的http的header字符集支持US-ASCII子集的字符集,故设置中文是'utf8'时就会报上面错误 解决方法有两种: 1.  ...

  2. vsftp

    [安装vsftpd]安装vsftpd工具步骤   1 安装vsftpd组件 [root@bogon ~]# yum -y install vsftpd 安装完后,有/etc/vsftpd/vsftpd ...

  3. install apache-activemq

    进入bin/linux-x86-64下 cd apache-activemq-5.14.1/bin/linux-x86-64/ 启动 ./activemq start 五.启动成功后,访问 activ ...

  4. linux 下安装mysql-5.7.12-1.el6.x86_64.rpm-bundle.tar

    -rw-rw-r--. hadoop hadoop Nov : mysql--.el6.x86_64.rpm-bundle.tar tar -xvf mysql-5.7.12-1.el6.x86_64 ...

  5. db2修改表结构，增加列，删除列等

    增加一列:ALTER TABLE tbname ADD COLUMN columnName datatype; 增加多列:ALTER TABLE tbname ADD COLUMN columnNam ...

  6. Android -- RecyclerView实现左滑删除

    1,在实际项目中我们常常有对一个列表进行滑删除操作,使用我们昨天的ItemTouchHelper其实也可以实现简单的实现这个功能,先来看一下使用ItemTouchHelper来实现的效果: 2,从上面 ...

  7. 清华操作系统实验--80x86汇编基础

    前言 80x86架构里,因为历史原因字是16位的,因此在汇编指令中用后缀-b,-w,-l来表示操作数是字节 字 或是双字 C声明 Intel数据类型 汇编代码后缀 大小(字节) char 字节 b 1 ...

  8. 用Django实现Video页面分类查询

    Model表创建,Url映射,Views函数处理,Html生成 根据上图,视频方向与视频分类是多对多的关系,视频分类与视频信息是一对多的关系,难度级别是单一的查询条件(与之前俩者并无关系) Model ...

  9. uva 1416 Warfare And Logistics

    题意: 给出一个无向图,定义这个无向图的花费是 其中path(i,j),是i到j的最短路. 去掉其中一条边之后,花费为c’,问c’ – c的最大值,输出c和c’. 思路: 枚举每条边,每次把这条边去掉 ...

  10. [NOIP2005普及组]采药(01背包)

    题目描述 描述 辰辰是个很有潜能.天资聪颖的孩子,他的梦想是称为世界上最伟大的医师.为此,他想拜附近最有威望的医师为师.医师为了判断他的资质,给他出了一个难题.医师把他带到个到处都是草药的山洞里对他说 ...