Bootstrap3组件--2
目录
1. 分页
<!doctype html>
<html lang='zh-cn'>
<head>
<title>Hello World!</title>
<link rel='stylesheet' href='css/bootstrap.min.css'>
<script src='js/jquery2.min.js'></script>
<script src='js/bootstrap.min.js'></script>
</head> <body>
<nav>
//默认分页
<ul class='pagination'>
<li><a href='#'><span>«</span>
<li class='active'><a href='#'>1</a></li>
<li><a href='#'>2</a></li>
<li><a href='#'>3</a></li>
<li><a href='#'>4</a></li>
<li><a href='#'><span>»</span>
</ul> //翻页
<ul class='pager'>
<li><a href='#'>Previous</a></li>
<li><a href='#'>Next</a></li>
</ul> //对齐链接
<ul class='pager'>
<li class='previous'><a href='#'><span>←</span> Older</a></li>
<li class='next'><a href='#'>Newer <span>→</span></a></li>
</ul>
</nav>
</body>
</html>
2. 标签
<!doctype html>
<html lang='zh-cn'>
<head>
<title>Hello World!</title>
<link rel='stylesheet' href='css/bootstrap.min.css'>
<script src='js/jquery2.min.js'></script>
<script src='js/bootstrap.min.js'></script>
</head> <body>
<span class='label label-default'>Default</span>
<span class='label label-primary'>Primary</span>
<span class='label label-success'>Success</span>
<span class='label label-info'>Info</span>
<span class='label label-warning'>Warning</span>
<span class='label label-danger'>Danger</span>
</body>
</html>
3. 徽章
<!doctype html>
<html lang='zh-cn'>
<head>
<title>Hello World!</title>
<link rel='stylesheet' href='css/bootstrap.min.css'>
<script src='js/jquery2.min.js'></script>
<script src='js/bootstrap.min.js'></script>
</head> <body>
//给链接、导航等元素嵌套span class='badge'元素，可以很醒目的展示新的或未读的信息条目
<a href='#'>Inbox <span class='badge'>42</span></a> <button class='btn btn-primary'>Messages <span class='badge'>4</span></button> <ul class='nav nav-pills'>
<li class='active'><a href='#'>Home <span class='badge'>42</span></a></li>
<li><a href='#'>Profile</a></li>
<li><a href='#'>Messages <span class='badge'>3</span></a></li>
</ul>
</body>
</html>
4. 巨幕
<!doctype html>
<html lang='zh-cn'>
<head>
<title>Hello World!</title>
<link rel='stylesheet' href='css/bootstrap.min.css'>
<script src='js/jquery2.min.js'></script>
<script src='js/bootstrap.min.js'></script>
</head> <body>
<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><a class='btn btn-primary btn-lg' href='#'>Learn more</a></p>
</div>
</body>
</html>
5. 页头
页头组件能够为 h1 标签增加适当的空间，并且与页面的其他部分形成一定的分隔。它支持 h1 标签内内嵌 small 元素的默认效果，还支持大部分其他组件（需要增加一些额外的样式）。
<!doctype html>
<html lang='zh-cn'>
<head>
<title>Hello World!</title>
<link rel='stylesheet' href='css/bootstrap.min.css'>
<script src='js/jquery2.min.js'></script>
<script src='js/bootstrap.min.js'></script>
</head> <body>
<div class='page-header'>
<h1>Example page header <small>Subtext for header</small></h1>
</div>
</body>
</html>
6. 缩略图
<!doctype html>
<html lang='zh-cn'>
<head>
<title>Hello World!</title>
<link rel='stylesheet' href='css/bootstrap.min.css'>
<script src='js/jquery2.min.js'></script>
<script src='js/bootstrap.min.js'></script>
</head> <body>
<div class='row'>
<div class='col-sm-6 col-md-4'>
<div class='thumbnail'>
<img src='...' 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'>Button</a><a href='#' class='btn btn-primary'>button</a></p>
</div>
</div>
</div>
<div class='col-sm-6 col-md-4'>
<div class='thumbnail'>
<img src='...' 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'>Button</a><a href='#' class='btn btn-primary'>button</a></p>
</div>
</div>
</div>
</div>
</body>
</html>
7. 警告框
警告框组件通过提供一些灵活的预定义消息，为常见的用户动作提供反馈消息。将任意文本和一个可选的关闭按钮组合在一起就能组成一个警告框，.alert 类是必须要设置的，另外我们还提供了有特殊意义的4个类（例如，.alert-success），代表不同的警告信息。警告框没有默认类，只有基类和修饰类。默认的灰色警告框并没有多少意义。所以您要使用一种有意义的警告类。目前提供了成功、消息、警告或危险。
<!doctype html>
<html lang='zh-cn'>
<head>
<title>Hello World!</title>
<link rel='stylesheet' href='css/bootstrap.min.css'>
<script src='js/jquery2.min.js'></script>
<script src='js/bootstrap.min.js'></script>
</head> <body>
<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> //为警告框添加一个可选的.alert-dismissible 类和一个关闭按钮,务必给 button>元素添加 data-dismiss="alert" 属性。
<div class='alert alert-warning alert-dismissible'>
<button class='close' data-dismiss='alert'><span>×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
</body>
</html>
8. 进度条
<!doctype html>
<html lang='zh-cn'>
<head>
<title>Hello World!</title>
<link rel='stylesheet' href='css/bootstrap.min.css'>
<script src='js/jquery2.min.js'></script>
<script src='js/bootstrap.min.js'></script>
</head> <body>
<div class='progress'>
<div class='progress-bar' style='width: 60%;'>
<span class='sr-only'>60% Complete</span>
</div>
</div> //将设置了 .sr-only 类的span标签从进度条组件中移除 类，从而让当前进度显示出来
<div class='progress'>
<div class='progress-bar' style='width: 60%;'>
60%
</div>
</div>
</body>
</html>
9. 列表组
列表组中的每个元素都可以是任何 HTML 内容，如列表、徽章、链接、按钮，甚至是像下面的带链接的列表组。
<!doctype html>
<html lang='zh-cn'>
<head>
<title>Hello World!</title>
<link rel='stylesheet' href='css/bootstrap.min.css'>
<script src='js/jquery2.min.js'></script>
<script src='js/bootstrap.min.js'></script>
</head> <body>
<div class='list-group'>
<li class='list-group-item'>Cras justo odio</li>
<li class='list-group-item'>Dapibus ac facilisis in</li>
<li class='list-group-item'>Morbi leo risus</li>
</div> //给列表组加入徽章组件，它会自动被放在右边
<div class='list-group'>
<li class='list-group-item'>
<span class='badge'>14</span>
Cras justo odio
</li>
</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. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. </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. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. </p>
</a>
</div>
</body>
</html>
10. 面板
<!doctype html>
<html lang='zh-cn'>
<head>
<title>Hello World!</title>
<link rel='stylesheet' href='css/bootstrap.min.css'>
<script src='js/jquery2.min.js'></script>
<script src='js/bootstrap.min.js'></script>
</head> <body>
<div class='panel panel-primary'>
<div class='panel-heading'>
<h3 class='panel-title'>Panel title</h3>
</div>
<div class='panel-body'>
Panel Content
</div>
<div class='panel-footer'>Panel footer</div>
</div>
</body>
</html>
11. Well
把 Well 用在元素上，能有嵌入（inset）的的简单效果。
<!doctype html>
<html lang='zh-cn'>
<head>
<title>Hello World!</title>
<link rel='stylesheet' href='css/bootstrap.min.css'>
<script src='js/jquery2.min.js'></script>
<script src='js/bootstrap.min.js'></script>
</head> <body>
<div class='well'>Hello world</div>
<div class='well well-lg'>Hello world</div>
<div class='well well-sm'>Hello world</div>
</body>
</html>
Bootstrap3组件--2的更多相关文章
- Bootstrap3组件--1
目录 1. Glyphicons字体图标 2.下拉菜单 3.按钮组 4. 输入框组 5.导航 6. 导航条 7. 路径导航 1. Glyphicons字体图标 出于性能的考虑,所有图标都需要一个基类 ...
- 看过的bootstrap书籍（附下载地址）
http://yun.baidu.com/share/link?shareid=3820784617&uk=1008683945 以下书籍下载地址. <BootStrap入门教程> ...
- Bootstrap3写的红色警告框样式组件
用的是BT3的类和fa的图标 <!DOCTYPE html><html><head lang="en"> <meta charset ...
- JS组件系列——Bootstrap组件福利篇：几款好用的组件推荐（二）
前言:上篇 JS组件系列——Bootstrap组件福利篇:几款好用的组件推荐 分享了几个项目中比较常用的组件,引起了许多园友的关注.这篇还是继续,因为博主觉得还有几个非常简单.实用的组件,实在不愿自己 ...
- 使用外部web组件-----easyUI、jQueryUI、Bootstrap、js正则表达式
1.使用外部web组件,以Bootstrap为例 <head> <link rel='stylesheet' href='bootstrap-3.3.0-dist/dist/css ...
- JS组件系列——表格组件神器：bootstrap table
前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...
- 《深入理解bootstrap》读书笔记：第4章 CSS组件（上）
bootstrap三大核心之二. 包括glyphicon图标,下拉菜单(dropdown),按钮组(button group)....等等. 一. 图标字体 bootstrap3提供了200多个免费图 ...
- php + Bootstrap-v3-Typeahead 自动完成组件的使用
Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,类似百度.谷歌等搜索提示:输入关键词出现相应的下拉列表数据. 是Bootstrap-3-Typeah ...
- React+BootStrap+ASP.NET MVC实现自适应和组件的复用
系统展示如下 1.前端采用bootstrap3进行架构 2.后端采用asp.net mvc进行开发 开发工具vs2010 mvc4需要安装sp1的补丁. 3.js组件的封装采用react 1.新建mv ...
随机推荐
- 在DLL中动态加载其所依赖的dll
windows下LoadLibrary函数的搜索顺序是先搜索system32等系统环境变量path下注册过的路径,然后是当前路径. 这里的相对路径是指的主exe所在路径,并且相对路径在程序运行过程中可 ...
- day14 生成器的进阶
一.生成器的两种形式 1.生成器函数的应用 # def cloth(): # for i in range(100): # yield '衣服%s'%i # # g = cloth() # for ...
- 使用jQuery lazyload 实现图片延迟加载
下载地址 使用说明 0. 准备工作 下载jQuery和lazyload 插件(地址如上) 1. HTML 引入jQuery库和lazyload插件 <div id="imagesCon ...
- mailing list的原理
1 发往mailing list邮箱的邮件会被所有订阅了该邮箱的人收到 说白了,就是一种邮件群发机制,为了简化群发,不是将所有的收件人放到收件人列表中,而是发往总的邮箱即可. 2 要向该mailing ...
- PHP heredoc 用法2
参考网上的一个heredoc php模板实现的简单代码:index.php文件: <?php function template($template,$EXT ='htm') { $path = ...
- MiniUI 在线示例
引用 http://miniui.com/demo/#src=datagrid/celledit.html
- JdbcUtils 小工具
// 第一版 // src 目录下 dbconfig.properties 配置文件, 用来配置四大参数 // 注意 properties 配置文件中没有分号结尾, 也没有引号 driverClass ...
- Python3.6全栈开发实例[013]
13.用户输入的信息,如果出现了列表中的敏感词汇,请用*替代. li = ["苍老师","东京热","武藤兰","波多野结衣&qu ...
- win7与win server 2008防火墙设置
转自:http://blog.51cto.com/jimshu/590411 Windows 防火墙通过阻止未授权用户通过 Internet 或网络访问您的计算机来帮助保护计算机. Windows 2 ...
- PyQt4打包exe文件
使用到工具pyinstaller pip install pyinstaller 使用指令打包,其中xxx.ico为需要的图标,xxx.py为要打包的py文件 pyinstaller -w --ico ...