BootStrap便签页的简单应用


Posted in Javascript onJanuary 06, 2017

效果图如下:

BootStrap便签页的简单应用

代码:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>标签页</title> 
  <link rel='stylesheet' href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
  <style> 
    .container{ 
      padding: 50px; 
      text-align: center; 
    } 
    .feature { 
      padding: 30px 0; 
    } 
    .feature-heading { 
      font-size: 50px; 
      color: #2a6496; 
      margin-top: 120px; 
    } 
    .text-muted { 
      font-size: 28px; 
      color: #999; 
    } 
  </style> 
</head> 
<body> 
<div class="container"> 
  <ul class="nav nav-tabs" role="tablist" id="feature-tab"> 
    <li class="active"><a href="#tab-chrome" role="tab" data-toggle="tab">Chrome</a></li> 
    <li><a href="#tab-firefox" role="tab" data-toggle="tab">Firefox</a></li> 
    <li><a href="#tab-safari" role="tab" data-toggle="tab">Safari</a></li> 
    <li><a href="#tab-opera" role="tab" data-toggle="tab">Opera</a></li> 
    <li><a href="#tab-ie" role="tab" data-toggle="tab">IE</a></li> 
  </ul> 
  <div class="tab-content"> 
    <div class="tab-pane active" id="tab-chrome"> 
      <div class="row feature"> 
        <div class="col-md-7"> 
          <h2 class="feature-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 class="feature-image img-responsive" src="images/chrome-logo.jpg" 
             alt="Chrome"> 
        </div> 
      </div> 
    </div> 
    <div class="tab-pane" id="tab-firefox"> 
      <div class="row feature"> 
        <div class="col-md-5"> 
          <img class="feature-image img-responsive" src="images/firefox-logo.jpg" 
             alt="Firefox"> 
        </div> 
        <div class="col-md-7"> 
          <h2 class="feature-heading">Mozilla Firefox <span class="text-muted">美丽的狐狸</span> 
          </h2> 
          <p class="lead">Mozilla Firefox,中文名通常称为“火狐”或“火狐浏览器”,是一个开源网页浏览器, 
            使用Gecko引擎(非ie内核),支持多种操作系统如Windows、Mac和linux。</p> 
        </div> 
      </div> 
    </div> 
    <div class="tab-pane" id="tab-safari"> 
      <div class="row feature"> 
        <div class="col-md-7"> 
          <h2 class="feature-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 class="feature-image img-responsive" src="images/safari-logo.jpg" 
             alt="Safari"> 
        </div> 
      </div> 
    </div> 
    <div class="tab-pane" id="tab-opera"> 
      <div class="row feature"> 
        <div class="col-md-5"> 
          <img class="feature-image img-responsive" src="images/opera-logo.jpg" 
             alt="Opera"> 
        </div> 
        <div class="col-md-7"> 
          <h2 class="feature-heading">Opera <span class="text-muted">小众但易用</span> 
          </h2> 
          <p class="lead">Opera浏览器,是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。 
            是跨平台浏览器可以在Windows、Mac和Linux三个操作系统平台上运行。.</p> 
        </div> 
      </div> 
    </div> 
    <div class="tab-pane" id="tab-ie"> 
      <div class="row feature"> 
        <div class="col-md-7"> 
          <h2 class="feature-heading">IE <span class="text-muted">你懂的</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 class="feature-image img-responsive" src="images/ie-logo.jpg" 
             alt="IE"> 
        </div> 
      </div> 
    </div> 
  </div> 
</div> 
<script src='http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js'></script> 
<script src='http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js'></script> 
</body> 
</html>

以上所述是小编给大家介绍的BootStrap便签页的简单应用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript圆盘抽奖程序实现原理和完整代码例子
Jun 03 Javascript
JavaScript中对循环语句的优化技巧深入探讨
Jun 06 Javascript
web前端设计师们常用的jQuery特效插件汇总
Dec 07 Javascript
js实现带圆角的两级导航菜单效果代码
Aug 24 Javascript
React Native实现简单的登录功能(推荐)
Sep 19 Javascript
简单谈谈Javascript函数中的arguments
Feb 09 Javascript
数组Array的排序sort方法
Feb 17 Javascript
vue router-link传参以及参数的使用实例
Nov 10 Javascript
浅谈Vue下使用百度地图的简易方法
Mar 23 Javascript
微信小程序swiper实现滑动放大缩小效果
Nov 15 Javascript
JS实现处理时间,年月日,星期的公共方法示例
May 31 Javascript
详解vue中v-model和v-bind绑定数据的异同
Aug 10 Javascript
bootstrap table实例详解
Jan 06 #Javascript
node.js发送邮件email的方法详解
Jan 06 #Javascript
利用jquery实现实时更新歌词的方法
Jan 06 #Javascript
Ajax 加载数据 练习代码
Jan 05 #Javascript
JavaScript中Math对象的方法介绍
Jan 05 #Javascript
微信小程序 Tab页切换更新数据
Jan 05 #Javascript
微信小程序 省市区选择器实例详解(附源码下载)
Jan 05 #Javascript
You might like
php中的MVC模式运用技巧
2007/05/03 PHP
php urlencode()与urldecode()函数字符编码原理详解
2011/12/06 PHP
让CodeIgniter数据库缓存自动过期的处理的方法
2014/06/12 PHP
js 弹出新页面避免被浏览器、ad拦截的一种新方法
2014/04/30 Javascript
使用jquery.qrcode生成彩色二维码实例
2014/08/08 Javascript
javascritp添加url参数将参数加入到url中
2014/09/25 Javascript
nodejs开发微博实例
2015/03/25 NodeJs
JS控制FileUpload的上传文件类型实例代码
2016/10/07 Javascript
类似于QQ的右滑删除效果的实现方法
2016/10/16 Javascript
vue如何实现observer和watcher源码解析
2017/03/09 Javascript
获取当前按钮或者html的ID名称实例(推荐)
2017/06/23 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
2017/09/11 jQuery
用Node编写RESTful API接口的示例代码
2018/07/04 Javascript
详解vue-cli下ESlint 配置说明
2018/09/03 Javascript
jquery.param()实现数组或对象的序列化方法
2018/10/08 jQuery
从理论角度讨论JavaScript闭包
2019/04/03 Javascript
VUE前后端学习tab写法实例
2019/08/06 Javascript
微信小程序 scroll-view 实现锚点跳转功能
2019/12/12 Javascript
[01:34]2014DOTA2 TI预选赛预选赛 选手比赛房大揭秘!
2014/05/20 DOTA
简明 Python 基础学习教程
2007/02/08 Python
Python 批量合并多个txt文件的实例讲解
2018/05/08 Python
pytorch 把MNIST数据集转换成图片和txt的方法
2018/05/20 Python
python生成1行四列全2矩阵的方法
2018/08/04 Python
pygame游戏之旅 计算游戏中躲过的障碍数量
2018/11/20 Python
python日期相关操作实例小结
2019/06/24 Python
Python使用matplotlib 画矩形的三种方式分析
2019/10/31 Python
快速查找Python安装路径方法
2020/02/06 Python
pyqt5中动画的使用详解
2020/04/01 Python
CSS3实现简易版的刮刮乐效果
2016/09/27 HTML / CSS
纯css3实现的动画按钮的实例教程
2014/11/17 HTML / CSS
Haggar官网:美国男装品牌
2020/02/16 全球购物
商务日语毕业生自荐信范文
2013/11/14 职场文书
接受捐赠答谢词
2014/01/27 职场文书
2014年公务员思想汇报范文:全心全意为人民服务
2014/03/06 职场文书
行政工作试用期自我评价
2014/09/14 职场文书
十大最帅动漫男主 碓冰拓海上榜,第一是《灌篮高手》男主角
2022/03/18 日漫