<!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. Presto JVM.config

    Presto 如果启动时候 指定 CMS,那么 launcher run 会提示 G1 回收算法是 推荐的垃圾回收算法,针对 Presto 大内存 回收,G1 暂时 应该是最稳妥的选择,调整之后大约如 ...

  2. 用jquery的ajax方法获取return返回值的正确姿势

    如果jquery中,想要获取ajax的return返回值,必须注意两方面,ajax的同步异步问题,在ajax方法里面还是外面进行return返回值. 下面列举了三种写法,如果想成功获取到返回值,参考第 ...

  3. SVN快速入门笔记【转】

    1. SVN版本控制软件目的 协作开发 远程开发 版本回退 2. 什么是SVN subVersion 支持平台操作 支持版本回退 3. 获取SVN软件 属于C/S结构软件(客户端与服务端) serve ...

  4. 在 CentOS6 上安装 Zabbix2.4 Server

    #!/bin/bash # # .配置无人值守的安装,定义安装过程中需要用到的一些信息 # mysql_root_pw=root_pw mysql_zabbix_pw=zabbix_pw DBPass ...

  5. 细说REST API安全之防止数据篡改

    通常可以使用MD5或SHA-1对API参数进行签名,在服务器端通过校验签名结果来验证数据是否被修改. 举个例子:添加用户 地址:http://192.168.0.10/v1/user/add?sign ...

  6. 在浏览器窗口中加载新的url

    通常,在前端页面中如果需要跳转到指定页面,可以通过<a>标签进行跳转.而在某些情况下,比如ajax调用之后想直接跳转到指定页面,想跳转页面不能再用<a>标签实现.此时,可以通过 ...

  7. 安装Blend+SketchFlow Preview for Visual Studio 2012出现错误

    安装Blend+SketchFlow Preview for Visual Studio 2012出现如下错误: 首先是这个网址:http://msdn.microsoft.com/en-us/exp ...

  8. 在Linux上安装Git

    Git是一个开源的分布式版本控制系统,可以有效.高速的处理从很小到非常大的项目版本管理.而国外的GitHub和国内的Coding都是项目的托管平台.但是在使用Git工具的时候,第一步要学会如何安装gi ...

  9. 基于时间的 SQL注入研究

    SQL注入攻击是业界一种非常流行的攻击方式,是由rfp在1998年<Phrack>杂志第54期上的“NT Web Technology Vulnerabilities”文章中首次提出的.时 ...

  10. 记录使用MyBatis_错误_警告_异常

    1.使用MyBatis要非常仔细检查自己的sql语句有没有写错. jdbcType错误,有可能在控制台显示一个 builderException.