<!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. Hadoop端口说明

    Hadoop端口说明: 默认端口                            设置位置                                    描述信息 8020        ...

  2. Struts2的初级应用

    做一个登录注册 1.把Struts2框架的必须包导入到项目中(http://struts.apache.org/) 2.web.xml <?xml version="1.0" ...

  3. Sqlserver脚本创建登录名密码

    use table1 GO ', default_database=table1; GO create user abc for login abc with default_schema=dbo; ...

  4. 【noip 2015】普及组

    T1.金币 题目链接 #include<cstdio> #include<algorithm> #include<cstring> using namespace ...

  5. nginx默认80端口被System占用，造成nginx启动报错的解决方案

    今天启动window上的nginx总是报错 错误信息是bind() to 0.0.0.0:80 failed (10013: An attempt was made to access a socke ...

  6. VM4061 layui.js:2 Layui hint: form is not a valid module

    报错:VM4061 layui.js:2 Layui hint: form is not a valid module 解决办法:当你遇到类似这样报错,说某某某不是一个有效的模块时,不防在layui. ...

  7. Bootstrap响应式导航

    <nav class="navbar navbar-default" role="navigation"> <div class=" ...

  8. 03-13_static关键字

    static主要作用 常见定义结构:public static void main(): static关键字可以用于定义属性及方法: static定义属性 在一个类之中,主要的组成就是属性和方法(分为 ...

  9. table 如何不越过父级div

    设置table 被限制在外围div的方法: 设置样式: table { table-layout: fixed; /*fiexed 列宽由表格宽度和列宽度设定. 默认.列宽度由单元格内容设定.*/ w ...

  10. jQuery插件整理

    toastr:Jquery消息提示插件 http://codeseven.github.io/toastr cropperjs:jQuery简单且功能强大的图片剪裁插件 https://www.npm ...