<!DOCTYPE html>

<html>

<head>

<title>Bootstrap 101 Template</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Bootstrap -->

<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

</head>

<body> 

<div class="container"> 

<ul class="nav nav-tabs">

<li ><a href="http://www.hao123.com">Home</a></li>

<li class="active"><a href="#">Profile</a></li>

<li><a href="#">Messages</a></li>

</ul> 

<div class="jumbotron">

<h1>Hello, world!</h1>

<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>

<p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>

</div> 

<a href="#">42<span class="empty">42</span></a>

<div class="page-header">

<h1>案例:从堆叠到水平排列</h1>

</div>

<div class="row">

<div class="col-md-1">.col-md-1</div>

<div class="col-md-1">.col-md-1</div>

<div class="col-md-1">.col-md-1</div>

<div class="col-md-1">.col-md-1</div>

<div class="col-md-1">.col-md-1</div>

<div class="col-md-1">.col-md-1</div>

<div class="col-md-1">.col-md-1</div>

<div class="col-md-1">.col-md-1</div>

<div class="col-md-1">.col-md-1</div>

<div class="col-md-1">.col-md-1</div>

<div class="col-md-1">.col-md-1</div>

<div class="col-md-1">.col-md-1</div>

</div>

<h1></h1>

<div class="row">

<div class="col-md-8">.col-md-8</div>

<div class="col-md-4">.col-md-4</div>

</div>

<h1></h1>

<div class="row">

<div class="col-md-4">.col-md-4</div>

<div class="col-md-4">.col-md-4</div>

<div class="col-md-4">.col-md-4</div>

</div>

<h1></h1>

<div class="row">

<div class="col-md-6">.col-md-6</div>

<div class="col-md-6">.col-md-6</div>

</div> 

<div class="row">

<div class="col-sm-6 col-md-4">

<div class="thumbnail">

<img src="http://placehold.it/300x200/78EB09/FFEB09/&text=Hello World" alt="...">

<div class="caption">

<h3>Thumbnail label</h3>

<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>

</div>

</div>

</div>

<div class="col-sm-6 col-md-4">

<div class="thumbnail">

<img src="http://placehold.it/300x200/78EB09/FFEB09/&text=Hello World" alt="...">

<div class="caption">

<h3>Thumbnail label</h3>

<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>

</div>

</div>

</div>

<div class="col-sm-6 col-md-4">

<div class="thumbnail">

<img src="http://placehold.it/300x200/78EB09/FFEB09/&text=Hello World" alt="...">

<div class="caption">

<h3>Thumbnail label</h3>

<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>

</div>

</div>

</div>

</div> 

<div class="alert alert-success">Well done! You successfully read this important alert message.</div>

<div class="alert alert-info">Well done! You successfully read this important alert message.</div>

<div class="alert alert-warning">Well done! You successfully read this important alert message.</div>

<div class="alert alert-danger">Well done! You successfully read this important alert message.</div> 

<div class="alert alert-warning alert-dismissable">

<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>

<strong>Warning!</strong> Best check yo self, you're not looking too good.

</div> 

<div class="progress">

<div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">

<span class="sr-only">60% Complete</span>

</div>

</div> 

<div class="progress">

<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%">

<span class="sr-only">40% Complete (success)</span>

</div>

</div> 

<div class="list-group">

<a href="#" class="list-group-item active">

<h4 class="list-group-item-heading">List group item heading</h4>

<p class="list-group-item-text">Cras sit amet nibh libero, in gravida nulla. n vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>

</a>

<a href="#" class="list-group-item">

<h4 class="list-group-item-heading">List group item heading</h4>

<p class="list-group-item-text">Cras sit amet nibh libero, in gravida nulla. n vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>

</a>

<a href="#" class="list-group-item">

<h4 class="list-group-item-heading">List group item heading</h4>

<p class="list-group-item-text">Cras sit amet nibh libero, in gravida nulla. n vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.</p>

</a>

</div> 

<div class="panel panel-primary">

<div class="panel-heading">Panel heading without title</div>

<div class="panel-body">

Panel content

</div>

</div>

<div class="panel panel-success">

<div class="panel-heading">Panel heading without title</div>

<div class="panel-body">

Panel content

</div>

</div>

<div class="panel panel-info">

<div class="panel-heading">Panel heading without title</div>

<div class="panel-body">

Panel content

</div>

</div>

<div class="panel panel-warning">

<div class="panel-heading">Panel heading without title</div>

<div class="panel-body">

Panel content

</div>

</div> 

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">

Launch demo modal

</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

<h4 class="modal-title" id="myModalLabel">Modal title</h4>

</div>

<div class="modal-body">

One fine body…

</div>

<div class="modal-footer">

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

<button type="button" class="btn btn-primary">Save changes</button>

</div>

</div>

</div>

</div> 

<script type="text/javascript">

function test()

{

$('#myModal').modal('show');

alert(1);

}

</script>

<button onClick="test()" class="btn btn-primary btn-lg">

Launch demo modal

</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

<h4 class="modal-title" id="myModalLabel">Modal title</h4>

</div>

<div class="modal-body">

One fine body…

</div>

<div class="modal-footer">

<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

<button type="button" class="btn btn-primary">Save changes</button>

</div>

</div>

</div>

</div> 

<ul class="nav nav-tabs">

<li><a href="#home" data-toggle="tab">Home</a></li>

<li><a href="#profile" data-toggle="tab">Profile</a></li>

<li><a href="#messages" data-toggle="tab">Messages</a></li>

<li><a href="#settings" data-toggle="tab">Settings</a></li>

<li class="dropdown">

<a href="#" data-toggle="dropdown" class="dropdown-toggle">Test<b class="caret"></b></a>

<ul class="dropdown-menu">

<li ><a data-toggle="tab" href="#AAA">@tag</a></li>

<li ><a data-toggle="tab" href="#BBB">@mag</a></li>

</ul>

</li>

</ul> 

<div class="tab-content">

<div class="tab-pane active" id="home">1..Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</div>

<div class="tab-pane" id="profile">2..Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</div>

<div class="tab-pane" id="messages">3..Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</div>

<div class="tab-pane" id="settings">4..Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</div>

<div class="tab-pane" id="AAA">A..Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</div>

<div class="tab-pane" id="BBB">B..Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</div>

</div>

</div> 

<div class="container" style="margin-top:40px;">

<div class="bs-example tooltip-demo">

<div class="bs-example-tooltips">

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">左侧Tooltip</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">上方Tooltip</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">下方Tooltip</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">右侧Tooltip</button>

</div>

</div>

<input type="text" id="testt" rel="tooltip" title="123456" />

<a href="#" data-toggle="tooltip" title="Default tooltip" >dsafsdfasdfasdfasd</a>

</div> 

</div>

<script src="http://code.jquery.com/jquery.js"></script>

<script src="js/bootstrap.min.js"></script> 

</body>

</html>

bootstrap例子的更多相关文章

  1. djngo快速实现--使用Bootstrap

    继续django学习之旅,之前我们所做的Django练习前端都非常丑.这节我们使用Bootstrap,顿时使丑陋的页面变成白天鹅. 安装Bootstrap                        ...

  2. netty之bootstrap

    转载自https://blog.csdn.net/zxhoo/article/details/17419229 Netty4学习笔记(2)-- Bootstrap Netty4的代码比我想象的要复杂的 ...

  3. 【Bootstrap Demo】入门例子创建

    本文简单介绍下如何来使用 Bootstrap,通过引入 Bootstrap,来实现一个最基本的入门例子. 在前一篇博文[Bootstrap]1.初识Bootstrap 基础之上,我们完全可以更加方便快 ...

  4. bootstrap 模态 modal 小例子

    bootstrap 模态 modal  小例子 <html> <head> <meta charset="utf-8" /> <title ...

  5. 【Bootstrap】入门例子创建

    本文简单介绍下如何来使用 Bootstrap,通过引入 Bootstrap,来实现一个最基本的入门例子. 在前一篇博文[Bootstrap]1.初识Bootstrap 基础之上,我们完全可以更加方便快 ...

  6. bootstrap table 服务器端分页例子分享

    这篇文章主要介绍了bootstrap table 服务器端分页例子分享,需要的朋友可以参考下 1,前台引入所需的js 可以从官网上下载 复制代码代码如下: function getTab(){var ...

  7. Bootstrap Table的例子(转载)

    转载自:http://wenzhixin.net.cn/p/bootstrap-table/docs/examples.html#classes-table 使用的API: data1.json da ...

  8. bootstrap 模态 modal 小例子【转】

    bootstrap 模态 modal  小例子 <html> <head> <meta charset="utf-8" /> <title ...

  9. java +bootstrap table 完整例子

    需求:现在常用的table 插件很多, 比如 jquey datatables ,不过操作挺 麻烦, 看到推荐的bootstrap 自带的 table,就用到项目来,先看效果:

随机推荐

  1. java类的编译、加载和执行

    一.java类的编译流程 这里主要讲的是从java文件到class文件 下图是java类编译的详细步骤: 1.词法分析:将java源代码的字符流转变为标记(Token)的集合,Token是编译过程中的 ...

  2. Spring Boot笔记七：扩展Spring MVC

    新建一个类,继承WebMvcConfigurerAdapter package com.vae.springboot.config; import org.springframework.contex ...

  3. HDU 1015(字符运算 **)

    题意是在一段大写英文字符中找出 5 个字符通过代入公式运算得到目标值,如有多组字符满足题意,则输出字典序最大的一组,否则输出 no solution. 应该是用深搜做的,但是直接暴力也过了……(应该没 ...

  4. springBoot整合mybatis、jsp 或 HTML

    springBoot整合mybatis.jsp Spring Boot的主要优点: 1:  为所有Spring开发者更快的入门: 2:  开箱即用,提供各种默认配置来简化项目配置: 3:  内嵌式容器 ...

  5. linux磁盘空间占满问题快速定位并解决

    经常会遇到这样的场景:测试环境磁盘跑满了,导致系统不能正常运行!此时就需要查看是哪个目录或者文件占用了空间.常使用如下几个命令进行排查:df, lsof,du. 通常的解决步骤如下:1. df -h ...

  6. Java通过cal.get(Calendar.MONTH)比真实月份少一个月

    Calendar cal = Calendar.getInstance();假如当前是12月,cal.get(cal.MONTH)是11月.

  7. Hero Patterns - 聚合各种 SVG 背景纹理素材的网站

    Hero Patterns 是一个聚合了各种 SVG 背景纹理素材的网站,提供的多样的素材可以给你的网站带去特色. SVG 是一种分辨率无关的图形(矢量图形).这意味着它在任何类型的屏幕都不会遭受任何 ...

  8. Metaprogramming

    Metaprogramming https://en.wikipedia.org/wiki/Metaprogramming 元编程, 是一种编程技术, 制造的计算机程序,具有这种能力, 对待程序为他们 ...

  9. UIBezierPath基本使用

    UIBezierPath * aPath = [UIBezierPath bezierPathWithArcCenter:point radius:5 startAngle:0 endAngle:2 ...

  10. Mysql下Limit注入方法（此方法仅适用于5.0.0<mysql<5.6.6的版本）

    SQL语句类似下面这样:(此方法仅适用于5.0.0<mysql<5.6.6的版本) SELECT field FROM table WHERE id > 0 ORDER BY id ...