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 相关文章推荐
关于__defineGetter__ 和__defineSetter__的说明
May 12 Javascript
JavaScript 基础知识 被自己遗忘的
Oct 15 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
Jan 13 Javascript
js获取页面传来参数的方法
Sep 06 Javascript
jQuery实现首页图片淡入淡出效果的方法
Jun 10 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
Jan 08 Javascript
jQuery深拷贝Json对象简单示例
Jul 06 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
Aug 29 Javascript
js改变html的原有内容实现方法
Oct 05 Javascript
js拼接html字符串的注意事项
Oct 13 Javascript
ES6正则表达式的一些新功能总结
May 09 Javascript
vue中使用v-model完成组件间的通信
Aug 22 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(二)
2012/03/21 PHP
PHP ? EasyUI DataGrid 资料存的方式介绍
2012/11/07 PHP
php按百分比生成缩略图的代码分享
2014/05/10 PHP
PHP实现将textarea的值根据回车换行拆分至数组
2015/06/10 PHP
Thinkphp单字母函数使用指南
2016/05/08 PHP
PHP实现递归目录的5种方法
2016/10/27 PHP
Prototype Function对象 学习
2009/07/12 Javascript
js 火狐下取本地路径实现思路
2013/04/02 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
2013/05/07 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
2016/02/25 Javascript
浅谈jQuery添加的HTML,JS失效的问题
2016/10/05 Javascript
Webpack实战加载SVG的方法
2017/12/26 Javascript
你可能不知道的前端算法之文字避让(inMap)
2018/01/12 Javascript
Vue-cli Eslint在vscode里代码自动格式化的方法
2018/02/23 Javascript
Vue2.0 事件的广播与接收(观察者模式)
2018/03/14 Javascript
JS实现HTML页面中动态显示当前时间完整示例
2018/07/30 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
2019/12/12 Javascript
Vue中的nextTick作用和几个简单的使用场景
2021/01/25 Vue.js
使用JS实现鼠标放上图片进行放大离开实现缩小功能
2021/01/27 Javascript
python中的函数用法入门教程
2014/09/02 Python
Python实现利用最大公约数求三个正整数的最小公倍数示例
2017/09/30 Python
Python基于sklearn库的分类算法简单应用示例
2018/07/09 Python
Python如何使用k-means方法将列表中相似的句子归类
2019/08/08 Python
python multiprocessing模块用法及原理介绍
2019/08/20 Python
TensorFlow 输出checkpoint 中的变量名与变量值方式
2020/02/11 Python
使用python 计算百分位数实现数据分箱代码
2020/03/03 Python
Python使用进程Process模块管理资源
2020/03/05 Python
如何在VSCode下使用Jupyter的教程详解
2020/07/13 Python
Python 在 VSCode 中使用 IPython Kernel 的方法详解
2020/09/05 Python
next在python中返回迭代器的实例方法
2020/12/15 Python
HTML块级标签汇总(小篇)
2016/07/13 HTML / CSS
耐克中国官方商城:Nike中国
2018/10/18 全球购物
业务员自荐信范文
2014/04/20 职场文书
小学语文教研活动总结
2014/07/01 职场文书
学籍证明模板
2015/06/18 职场文书
动画《朋友游戏》公开佐藤友生绘制的开播纪念绘
2022/04/06 日漫