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便签页的简单应用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • BootStrap便签页的简单应用

    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&

  • Bootstrap实现翻页效果

    Bootstrap实现翻页效果

    Bootstrap之翻页. 优点: 支持局部刷新: 只要是列表,都可以加载该组件: 支持动态数据绑定: 当然还有绝对的简单实用. 效果图 最后一页时: 最开始一页时: 实现 ①.翻页组件的布局 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@ include file="/componen

  • VUE+Express+MongoDB前后端分离实现一个便签墙

    VUE+Express+MongoDB前后端分离实现一个便签墙

    计划来实现一个便签墙系列,这个东西做简单也简单,往复杂了做功能也很多,记录一下从零到有的开发过程吧,希望最后能把这个项目做得很完善. 首先是前后端分离架构,前端用vue,后台我们就用express,数据库用mongodb吧. 在脑袋里过一下,最最开始,要完成一个怎样的雏形呢?先把用户登录管理放在一边,当然是便签的增删改查+显示啊! 那么,我们就来实现"初号机",一张张便签的显示,增加,修改,删除. 1.怎么说也得先把样式画出来 先别管接口,先把纯前端的问题解决先,我们先来一个像模像样的

  • 基于JavaScript打造一款桌面级便签系统

    基于JavaScript打造一款桌面级便签系统

    先看下效果: 载体就是一个网页,用html,css和JavaScript实现一个简单的便签系统. 动画效果用的是animation.css库,缓存用的localStorage. 除非手动清空便签,否则便签会一直保留,非常方便. 鼠标右键可以点开菜单. 代码: <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset

  • 基于Bootstrap的标签页组件及bootstrap-tab使用说明

    基于Bootstrap的标签页组件及bootstrap-tab使用说明

    bootstrap-tab bootstrap-tab组件是对原生的bootstrap-tab组件的封装,方便开发者更方便地使用,主要包含以下功能: tab页初始化 关闭tab页 新增tab 显示tab页 获取tab页ID 使用 Step1 :引入样式 <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" rel="external nofollow" > <

  • thinkphp制作404跳转页的简单实现方法

    网上有很多thinkphp的404页面制作方法,但大多太过繁琐不简便,很烦人,所以为大家分享了最便捷的404制作方法,如下. 在thinkphp的公共目录的config配置文件中增加配置项: 'TMPL_EXCEPTION_FILE' => 'Public/404.html', 在Public文件夹中创建404.html内容如下 <!DOCTYPE html > <html> <head> <meta charset=utf-8" /> &l

  • 关于bootstrap日期转化,bootstrap-editable的简单使用，bootstrap-fileinput的使用详解

    数据库中为datetime类型,.net读取数据已Json格式发回给前台页面:例如:使用bootstrap表格插件Ⅹ formatter: function (value, row, index) { var date = new Date(parseInt(value.slice(6))); return date.getFullYear() + '-' + parseInt(date.getMonth() + 1) + '-' + date.getDate() + " " + da

  • localStorage实现便签小程序

    localStorage实现便签小程序

    前言:今天写了个小练习,把这几天看的东西巩固一下,在这个程序中用到了localStorage存储和json串的转换. 下面是具体的实现代码: (1)首先判断是否存在用户,从而显示相应的界面 function isUser() { var storage = window.localStorage; if (storage.user != undefined) { document.getElementById("showmess").style.display = "bloc

  • python制作一个桌面便签软件

    # 2014.10.15 更新了memo.zip, 网盘的exe:修复:1.隔日启动不能正常加载json,加入:1.隐藏任务栏图标,2.通过垃圾桶进行窗口移动. # 2014.10.8 10.36更新了memo.zip # 2014.10.8 13.17 更新了memo.zip 在win10测试,基本没问题 运行widget.py文件. ubuntu: 在ubuntu上,memo.desktop文件可以放在desktop文件夹中,chmod +x,自己修改文件中对应的路径(很容易的).即可用作桌

  • jQuery实现tag便签去重效果的方法

    本文实例讲述了jQuery实现tag便签去重效果的方法.分享给大家供大家参考.具体实现方法如下: html代码如下: 复制代码 代码如下: <head> <script type="text/javascript" src="js/jQuery.js"></script>  <!--jquery引用代码--> <script type="text/javascript" src="j

随机推荐