内容 参数
  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. LeetCode14.最长公共前缀

    编写一个函数来查找字符串数组中的最长公共前缀. 如果不存在公共前缀,返回空字符串 "". 示例 1: 输入: ["flower","flow" ...

  2. mybatis batchinsert

    <?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE mapper PUBLIC "-/ ...

  3. ef entity转json引起的Self referencing loop

    问题简介:前段时间做项目时,将取到的entity往Redis cache里存放时报多重引用的错误. Self referencing loop detected for property 'Check ...

  4. kali漏洞扫描

    nmap (apt-get install nmap)          nmap从初级到高级 ------------------------------ Nessus (dpkg -i Nessu ...

  5. Spring Cloud 服务的注册与发现（Eureka）

    Eureka服务注册中心 一.Eureka Server Eureka Server是服务的注册中心,这是分布式服务的基础,我们看看这一部分如何搭建. 首先,Spring Cloud是基于Spring ...

  6. Java基础语法（二 ）

    五.运算符 *算术运算符 *赋值运算符 *关系运算符 *逻辑运算符 *位运算符 *三目运算符 算术运算符 *+,-,*,/都是比较简单的操作 *+的几种作用: 加法 正数 字符串连接符 *除法的时候要 ...

  7. 把本地windows系统上的mysql数据库移到linux系统服务器上，mysql数据库拒绝访问

    Mysql连接报错 原因是:远程服务器不允许你的其他程序访问它的数据库.所以,我们要对远程服务器进行设置,使它允许你进行连接. 步骤:一.进入mysql客户端,输入:use mysql; 二.输入:s ...

  8. python 读csv文件对列名进行合法性验证

    如果正在读取CSV 数据并将它们转换为命名元组,需要注意对列名进行合法性认证.例如,一个CSV 格式文件有一个包含非法标识符的列头行,这样最终会导致在创建一个命名元组时产生一个ValueError 异 ...

  9. 20165215 2017-2018-2 《Java程序设计》第4周学习总结

    20165215 2017-2018-2 <Java程序设计>第4周学习总结 教材学习内容总结 chapter5 子类与父类 子类的定义使用关键字extends 任何类都是Object类的 ...

  10. Linux上查看大文件的开头几行内容以及结尾几行的内容

    head -n 50 filePath 查看开头50行的内容 tail -n 50 filePath 查看文件结尾50行的内容