zoukankan      html  css  js  c++  java
  • Bootstrap历练实例:响应式标签页

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport"content="width=device-width,initial-scale=1.0" />
    <!--[if lt IE 9]-->
    <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.js"></script>
    <!--[endif]-->
    <title></title>
    <meta charset="utf-8" />
    <link rel="stylesheet"href="bootstrap-3.3.5/dist/css/bootstrap.min.css" />

    </head>
    <body>
    <div class="container"style="padding:50px">
    <ul class="nav nav-tabs"role="tablist"id="feature-tab">
    <li class="active"><a href="#tab-chrome"data-toggle="tab"role="tab">Chrome</a></li>
    <li><a href="#tab-firefox"data-toggle="tab"role="tab">Firefox</a></li>
    <li><a href="#tab-safari"data-toggle="tab"role="tab">Safari</a></li>
    <li><a href="#tab-opera"data-toggle="tab"role="tab">Opera</a></li>
    <li><a href="#tab-ie"data-toggle="tab"role="tab">IE</a></li>
    </ul>
    <div class="tab-content">
    <div id="tab-chrome" class="tab-pane active">
    <div class="row feature">
    <div class="col-md-7">
    <h2 class="featurette-heading">Google Chrome<span class="text-muted">使用最广的浏览器</span></h2>
    <p class="lead">Google Chrome,又称Google浏览器,是一个由Google(谷歌)公司开发的网页浏览器。
    该浏览器是基于其他开源软件所撰写,包括WebKit,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。</p>
    </div>
    <div class="col-md-5">
    <img src="Images/chrome-logo.jpg"alt="chrome-logo" />
    </div>
    </div>
    </div>
    <div id="tab-firefox" class="tab-pane">
    <div class="row feature">
    <div class="col-md-7">
    <h2 class="featurette-heading">Mozilla Firefox<sap class="text-muted">美丽的狐狸</sap></h2>
    <p class="lead">Mozilla Firefox,中文名通常称为“火狐”或“火狐浏览器”,是一个开源网页浏览器,
    使用Gecko引擎(非ie内核),支持多种操作系统如Windows、Mac和linux。</p>
    </div>
    <div class="col-md-5">
    <img src="Images/firefox-logo.jpg"alt="firefox-logo" />
    </div>
    </div>
    </div>
    <div id="tab-safari" class="tab-pane">
    <div class="row feature">
    <div class="col-md-7">
    <h2 class="featurette-heading">Safari<span class="text-muted">Mac用户首选</span></h2>
    <p class="lead">Safari,是苹果计算机的最新操作系统Mac OS X中的浏览器,使用了KDE的KHTML作为浏览器的运算核心。
    Safari在2003年1月7日首度发行测试版,并成为Mac OS X v10.3与之后的默认浏览器,也是iPhone与IPAD和iPod touch的指定浏览器。</p>
    </div>
    <div class="col-md-5">
    <img src="Images/safari-logo.jpg"alt="safari-logo" />
    </div>
    </div>
    </div>
    <div id="tab-opera" class="tab-pane">
    <div class="row feature">
    <div class="col-md-7">
    <h2 class="featurette-heading">Opera<span class="text-muted">小众但易用</span></h2>
    <p class="lead">Opera浏览器,是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。
    是跨平台浏览器可以在Windows、Mac和Linux三个操作系统平台上运行。.</p>
    </div>
    <div class="col-md-5">
    <img src="Images/opera-logo.jpg"alt="opear-logo" />
    </div>
    </div>
    </div>
    <div id="tab-ie"class="tab-pane">
    <div class="row feature">
    <div class="col-md-7">
    <h2 class="featurette-heading">IE<span class="text-muted">对新的Html5元素兼容性不是很好,你懂的。</span></h2>
    <p class="lead">Internet Explorer,原称Microsoft Internet Explorer(6版本以前)和Windows Internet
    Explorer(7,8,9,10版本),
    简称IE,是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。</p>
    </div>
    <div class="col-md-5">
    <img src="Images/ie-logo.jpg"alt="ie-logo" />
    </div>
    </div>
    </div>
    </div>

    </div>

    <script src="jQuery/jquery-2.1.4.js"></script>
    <script src="bootstrap-3.3.5/dist/js/bootstrap.min.js"></script>
    </body>
    </html>

  • 相关阅读:
    lsblk---列出所有可用块设备的信息,
    blkid---对系统块设备信息查询
    du---是对文件和目录磁盘使用的空间查看
    strings---对象文件或二进制文件中查找可打印的字符串
    which---查找并显示给定命令的绝对路径
    whereis---定位指令的二进制程序、源代码文件和man手册页等相关文件的路径。
    cd---切换工作目录
    cp---复制文件
    ls---显示文件目录各项信息
    pwd---以绝对路径的方式显示用户当前工作目录
  • 原文地址:https://www.cnblogs.com/melao2006/p/5022618.html
Copyright © 2011-2022 走看看