bootstrap2.3.2常用标签的使用
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/docs.css" rel="stylesheet">
<link href="css/google-code-prettify.css" rel="stylesheet"> </head>
<body>
<div class="container">
<div class="row">
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
<li><a href="#overview"><i class="icon-chevron-right"></i>
预览</a></li>
<li><a href="#transitions"><i class="icon-chevron-right"></i>
过渡</a></li>
<li><a href="#tableview"><i class="icon-chevron-right"></i>
表格</a></li>
<li><a href="#dropdowns"><i class="icon-chevron-right"></i>
下拉菜单</a></li>
<li><a href="#scrollspy"><i class="icon-chevron-right"></i>
Scrollspy</a></li>
<li><a href="#tabs"><i class="icon-chevron-right"></i> 选项卡</a></li>
<li><a href="#tooltips"><i class="icon-chevron-right"></i>
工具提示</a></li>
<li><a href="#popovers"><i class="icon-chevron-right"></i>
Popover</a></li>
<li><a href="#alerts"><i class="icon-chevron-right"></i>
警示</a></li>
<li><a href="#buttons"><i class="icon-chevron-right"></i>
按钮</a></li>
<li><a href="#collapse"><i class="icon-chevron-right"></i>
折叠</a></li>
<li><a href="#carousel"><i class="icon-chevron-right"></i>
旋转木马</a></li>
<li><a href="#typeahead"><i class="icon-chevron-right"></i>
预输入</a></li>
<li><a href="#affix"><i class="icon-chevron-right"></i> 附件</a></li>
</ul>
</div> <div class="span9">
<div class="row-fluid">
<h1>内容栏</h1>
</div>
<section id="overview">
<div class="row-fluid">
<p class="muted">
故事讲述<b>汤姆</b>从小就是个玩牌高手，所以他的好朋友，<i>肥皂、艾迪和培根</i>决定各凑两万五千英镑，让汤姆去参加一场黑社会高额赌金的牌局。 </p>
<div class="text-right">
<small>来自 <cite title="《娱乐周刊》">《娱乐周刊》</cite></small>
</div> <p class="text-warning">
<strong>汤姆</strong>从头到尾不知情，其实整个赌金根本就是个大骗局。于是汤姆不但输光所有的钱，还倒欠赌场主人五十万英镑。汤姆在一个星期内不能还清，他和他朋友们的手指和他老爸的酒吧都将不保。汤姆一伙想尽各种可能的凑钱办法，最后决定抢劫隔壁的毒犯。
</p> <p class="text-error">
而隔壁的毒犯同时也正计划抢劫他们的毒品供应商。汤姆一伙的计划听起来简单，但执行时却状况百出。突发的状况让这伙人不由得越陷越深。事情变得十分复杂，场面变得十分混乱。几个小混混发现整个事件已经发展到超出他们的想象，于是极力想逃脱，但是已经……
</p>
<address>
<strong>王皓和小雪科技有限公司</strong><br> 山东，济南 经十西路 28723 号<br>
159 6577 9823
</address>
<address>
<strong>E-Mail</strong><br> <a href="#">
hello@example.com</a>
</address>
<p class="text-left">此致 敬礼</p>
<p class="text-center">Franson</p>
<p class="text-right">2016-06-09</p>
</div>
</section>
<section id="transitions">
比如
<code><section></code>
就应该是使用行内包装。<br>
<pre>public class Student{<br>
private String name;
<br>}</pre>
</section>
<section id="tableview">
<table class="table table-striped">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>Wang</td>
<td>fusen</td>
<td>franson</td>
</tr>
<tr>
<td>Li</td>
<td>xiansheng</td>
<td>franson</td>
</tr>
<tr>
<td>Wang</td>
<td>fusen</td>
<td>franson</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Hu</td>
<td>min</td>
<td>amin</td>
</tr>
</tfoot>
</table>
<p>
斑马纹表格
<code>.table-striped</code>
<code>.table-hover</code>
</p>
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>Wang</td>
<td>fusen</td>
<td>franson</td>
</tr>
<tr>
<td>Li</td>
<td>xiansheng</td>
<td>franson</td>
</tr>
<tr>
<td>Wang</td>
<td>fusen</td>
<td>franson</td>
</tr> <tr>
<td>Hu</td>
<td>min</td>
<td>amin</td>
</tr>
</tbody>
</table>
<p>
被压缩的表格
<code>.table-condensed</code>
</p>
<table
class="table table-striped table-bordered table-hover table-condensed">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>Wang</td>
<td>fusen</td>
<td>franson</td>
</tr>
<tr>
<td>Li</td>
<td>xiansheng</td>
<td>franson</td>
</tr>
<tr>
<td>Wang</td>
<td>fusen</td>
<td>franson</td>
</tr>
<tr>
<td>Hu</td>
<td>min</td>
<td>amin</td>
</tr>
</tbody>
</table>
<p>
带颜色的行
<code>.success .error .warning .info</code>
</p>
<table class="table table-striped table-bordered table-hover">
<caption class="text-center text-info">
<strong>用户列表<code><caption></code></strong>
</caption>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>success</td>
<td>fusen</td>
<td>franson</td>
</tr>
<tr class="warning">
<td>warning</td>
<td>xiansheng</td>
<td>franson</td>
</tr>
<tr class="error">
<td>error</td>
<td>fusen</td>
<td>franson</td>
</tr>
<tr class="info">
<td>info</td>
<td>min</td>
<td>amin</td>
</tr>
</tbody>
</table>
</section>
<form action="#">
<fieldset>
<legend>默认表单样式</legend>
<label>用户名</label> <input type="text" placeholder="请输入用户名...">
<span class="help-block">这里是区块级别的帮助性文字</span> <label
class="checkbox"> <input type="checkbox">勾选一下
</label> <input type="submit" class="btn" value="提交">
</fieldset>
</form>
<form action="#" class="form-search">
<fieldset>
<legend>搜索表单</legend>
<input type="text" class="search-query" placeholder="搜索内容...">
<input type="submit" class="search-query btn" value="查询">
</fieldset>
</form>
<form class="form-inline">
<fieldset>
<legend>行内表单</legend>
<input type="text" class="input-small" placeholder="Email...">
<input type="text" class="input-small" placeholder="密码...">
<label class="checkbox"><input type="checkbox">记住我</label>
<input type="submit" class="btn">
</fieldset>
</form>
<form class="form-horizontal">
<fieldset>
<legend>水平表单</legend>
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="control-group">
<label class="control-label" for="inputPassword">密码</label>
<div class="controls">
<input type="password" id="inputPassword" placeholder="密码">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox"> <input type="checkbox">
记住我
</label>
<button type="submit" class="btn">登录</button>
</div>
</div>
</fieldset>
</form>
<form class="form-horizontal">
<fieldset>
<legend>水平表单2</legend>
<div class="controls">
<label>Email</label> <input type="text" id="inputEmail"
placeholder="Email"> <label>密码</label> <input
type="password" id="inputPassword" placeholder="密码"> <label>自我介绍</label>
<textarea rows=3></textarea>
<label class="checkbox"> <input type="checkbox">
记住我
</label>
<button type="submit" class="btn">登录</button>
</div>
</fieldset>
</form>
<form>
<fieldset>
<legend>复选框与单选框</legend>
<label class="checkbox"><input type="checkbox" value="">选项一</label>
<label class="checkbox"><input type="checkbox" value="">
选项二</label> <label class="color"> <input type="color">颜色选择
</label> <br> <label class="radio"><input type="radio"
name="options" value="">选择一</label> <label class="radio"><input
type="radio" name="options" value="">选择二</label>
</fieldset>
</form>
<form>
<fieldset>
<legend>行内复选框与单选框</legend>
<label class="checkbox inline"><input type="checkbox"
value="">选项一</label> <label class="checkbox inline"><input
type="checkbox" value=""> 选项二</label> <label class="radio inline"><input
type="radio" name="options" value="">选择一</label> <label
class="radio inline"><input type="radio" name="options"
value="">选择二</label>
</fieldset>
</form>
<form>
<fieldset>
<legend>下拉框选项</legend>
<select>
<optgroup label="你的日常生活">
<option value="">吃饭</option>
<option value="">睡觉</option>
<option value="">打豆豆</option>
</optgroup>
</select><br> <select multiple="multiple">
<optgroup label="你的日常生活">
<option value="">吃饭</option>
<option value="">睡觉</option>
<option value="">打豆豆</option>
</optgroup>
</select>
</fieldset>
</form>
<div class="input-prepend input-append">
<input class="span6" placeholder="输入数值..."
id="appendedPrependedInput" type="text"> <input
type="button" value="搜索" class="btn"> <input type="button"
value="选项" class="btn">
</div>
<div class="input-append">
<input class="span2" id="appendedDropdownButton" type="text">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">
搜索 <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>用户</li>
<li>人物</li>
<li>电影</li>
</ul>
</div>
</div>
<a href="#" class="btn">我是链接<i class="icon-search"></i></a>
</div>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/application.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
bootstrap2.3.2常用标签的使用的更多相关文章
- HTML常用标签
HTML常用标签: HTML文档格式: 首先,HTML是一种超文本标签语言,它是制作网页的基础. 其次,HTML文档中至少包含基本的和成对的<html> </html>.< ...
- html常用标签介绍
常用标签介绍 文本 最常用的标签可能是<font>了,它用于改变字体,字号,文字颜色. 点击查看效果 <font size="6">6</font&g ...
- HTML常用标签总结
HTML 的常用标签总结 <font size="字体大小1-7" color="red或0xff00ff" face="字体类型(楷体等)&q ...
- html新增一些常用标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [刘阳Java]_MyBatis_映射文件的常用标签总结_第5讲
MyBatis中常用标签的总结,简单给出自己的总结 MyBatis映射文件中的标签使用介绍1.<select>:用于编写查询语句用的标签 id:表示当前<select>标签的唯 ...
- CSS常用标签
CSS常用标签 一 CSS文字属性 color : #999999; /*文字颜色*/ font-family : 宋体,sans-serif; /*文字字体*/ font-size : 9pt; / ...
- HTML基础（一）——一般标签、常用标签和表格
第一部分 HTML <html> --开始标签 <head> 网页上的控制信息 <title>页面标题</title> </head> ...
- HTML-学习笔记（常用标签）
本篇博客讲一讲HTML中的标签 HTML 标题 标题(Heading)是通过 <h1> - <h6> 等标签进行定义的.<h1> 定义最大的标题.<h6> ...
- 帝国CMS文章随机调用等一些常用标签
1.帝国CMS文章随机调用等一些常用标签 [e:loop={'news',10,18,0,'newstime>UNIX_TIMESTAMP()-86400*7','onclick desc'}] ...
随机推荐
- linux 进程(二) --- 进程的创建及相关api
一.进程的创建fork()函数 由fork创建的新进程被称为子进程(child process).该函数被调用一次,但返回两次.两次返回的区别是子进程的返回值是0,而父进程的返回值则是 新子进程的进 ...
- libcurl提交表单上传文件
不多说了,curl的http上传文件代码示例,有需要的可以参考. int http_post_file(const char *url, const char *user, const char *p ...
- docker制作node程序镜像：
准备: 需要5个文件 新建一个docker文件夹 1 .ignore git忽略文件用的 2 pakage.json 安装NODE程序的 也可以直接拷贝进 docker文件加 3 node环境 lin ...
- php使用NuSoap调用java/C# webservice乱码问题
今天调用了一个 NuSoap 的接口程序,一切流程操作都很正常,就是最后接收返回值的时候出现了乱码问题(我这边是做一个越南项目固然返回越南语,不过认为中文应该同样实用,需要的人可以尝试下) 许多使 ...
- uva 103 Stacking Boxes（DAG）
题目连接:103 - Stacking Boxes 题目大意:有n个w维立体, 输出立体互相嵌套的层数的最大值, 并输出嵌套方式, 可嵌套的要求是外层立体的w条边可以分别对应大于内层立体. 解题思路: ...
- bootstrap注意事项（五）表单
1.基本实例 单独的表单控件会被自动赋予一些全局样式.所有设置了 .form-control类的 <input>.<textarea> 和 <select> 元素都 ...
- 21个值得收藏的Javascript技巧
1 Javascript数组转换为CSV格式 首先考虑如下的应用场景,有一个Javscript的字符型(或者数值型)数组,现在需要转换为以逗号分割的CSV格式文件.则我们可以使用如下的小技巧,代码如 ...
- C++多文件变量
不要在头文件中定义变量,在头文件中声明变量.定义放在对应的源文件中.其他地方只能用extern声明. 例如: 1 在头文件a.h中声明一个int变量: extern int ix; 2 在源文件a.c ...
- hadoop笔记之Hive的管理(CLI方式)
Hive的管理(一) Hive的管理(一) Hive的启动方式 CLI(命令行)方式 Web界面方式 远程服务启动方式 CLI方式 1. 进入命令行方式 直接输入<HIVE_HOME>/b ...
- [剖析Javascript原理]1.原生数据类型
一.原生数据类型 JS共有5种原生数据类型: Boolean true或者false String 字符串,在单引号或者双引号之间(不存在字符类型) Number 整数或者浮点数 Null 空 und ...