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>

  • 相关阅读:
    20200925--矩阵加法(奥赛一本通P93 6 多维数组)
    20200924--图像相似度(奥赛一本通P92 5多维数组)
    20200923--计算鞍点(奥赛一本通P91 4)
    20200922--计算矩阵边缘元素之和(奥赛一本通P91 3二维数组)
    20200921--同行列对角线的格(奥赛一本通P89 2 二维数组)
    磨人的.net core 3.1(二) DataReader的问题
    磨人的.net core 3.1(一) CORS的问题
    Vue SSR问题:返回的js打包文件为HTML文件
    axios与.net core API实现文件下载
    .Net Core API中基于System.Threading.Timer的定时任务
  • 原文地址:https://www.cnblogs.com/melao2006/p/5022618.html
Copyright © 2011-2022 走看看