bootstrap学习笔记2之strong,small,blockquote,cite,
来源：互联网 发布：java 404跳转页面代码 编辑：程序博客网 时间：2024/05/17 02:57
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap 常用 CSS</title> <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="../bootstrap/css/bootstrap-responsive.css" rel="stylesheet"> <!--[if lt IE 9]> <script src="../bootstrap/js/bootstrap/js/html5shiv/dist"></script> <![endif]--> </head> <body> <div class="container"> <h1 class="page-header"> CSS <small>Bootstrap常用CSS<small></h1> <p> <abbr title="Model View Template">MVT.Bootstrap实现了对HTML <abbr>元素的增强样式。缩略语元素带有title属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。</abbr> web开发学习 <strong>重要的文字,用增加font-weight值的方式加粗强调一段文本。</strong> <em>使用斜体强调的文字</em> <small>对于不需要强调的inline或block类型的文本，使用small标签</small> </p> <blockquote><p>将任何HTML包裹在 blockquote 之中即可表现为引用。对于直接引用，我们建议用 p 标签。</p> <small><cite>作者：易枭寒</cite></small></blockquote><script src="../bootstrap/js/jquery-1.7.2.min.js"></script> <script src="../bootstrap/js/bootstrap.min.js"></script> </body></html>
效果图片：
添加<small>标签来注明引用来源。来源名称可以放在<cite> 标签里面。
使用.pull-right类，可以让引用展现出向右侧移动、对齐的效果
<blockquote class="pull-right"><p>将任何HTML包裹在 blockquote 之中即可表现为引用。对于直接引用，我们建议用 p 标签。</p> <small><cite>作者：易枭寒</cite></small></blockquote>
========================================================================
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>有序列表、无序列表、描述列表</title> <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="../bootstrap/css/bootstrap-responsive.css" rel="stylesheet"> <!--[if lt IE 9]> <script src="../bootstrap/js/bootstrap/js/html5shiv/dist"></script> <![endif]--> </head> <body> <h1 class="page-header">列表 <small>无序列表、有序列表、描述列表</small></h1> <h2>有序列表</h2> <ol> <li>python</li> <li>django</li> <li>web</li> </ol> <h2>无序列表</h2> <ul> <li>java</li> <li>javaweb</li> <li>mysql</li> </ul> <h2>描述列表</h2> <dl> <dt>python</dt> <dd>python is a languange</dd> <dt>django</dt> <dd>django is a webframe</dd> <dt>mysql</dt> <dd>mysql is a database management system</dd> </dl> <script src="../bootstrap/js/jquery-1.7.2.min.js"></script> <script src="../bootstrap/js/bootstrap.min.js"></script> </body></html>效果图：
水平描述
使<dl>中的每个条目和其描述一对一水平显示。
<dl class="dl-horizontal"> <dt>...</dt> <dd>...</dd></dl>效果图：
================================
行内代码
通过<code>标签内嵌一小段代码。使用<pre>展示多行代码。为了能够正确展示，务必将代码中的任何尖括号做转义。
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>有序列表、无序列表、描述列表</title> <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="../bootstrap/css/bootstrap-responsive.css" rel="stylesheet"> <!--[if lt IE 9]> <script src="../bootstrap/js/bootstrap/js/html5shiv/dist"></script> <![endif]--> </head> <body> <h2>code 的使用</h2> For example, <code><section></code> should be wrapped as inline. <h2>pre 的使用</h2> 基本代码块 使用 pre 展示多行代码。为了能够正确展示，务必将代码中的任何尖括号做转义。 <pre> <p>Sample text here...</p> </pre> <script src="../bootstrap/js/jquery-1.7.2.min.js"></script> <script src="../bootstrap/js/bootstrap.min.js"></script> </body></html>效果图：
==========================================================================
默认样式
为 <table> 标签增加基本样式--很少的内补(padding)并只增加水平分隔线--只要为其增加 .table 类即可
可选的类
下面所列出的类是为了补充 .table 类的基本样式的。
.table-striped
在<tbody>内，通过:nth-child CSS选择器 (IE7-8不支持)为表格中的行添加斑马纹样式。
.table-bordered
为表格增加边框(border)和圆角(rounded corner)。
.table-hover
为 <tbody> 中的每一行赋予鼠标悬停样式。
.table-condensed
每个单元格的内补(padding)减半可使表格更紧凑。
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表格</title> <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="../bootstrap/css/bootstrap-responsive.css" rel="stylesheet"> <!--[if lt IE 9]> <script src="../bootstrap/js/bootstrap/js/html5shiv/dist"></script> <![endif]--> </head> <body> <div class="container"> <h1 class="page-header">表格 <small> <table></small></h1> <table class="table table-striped table-bordered table-hover .table-condensed"> <thead> <tr> <th>#</th> <th>First Name</th> <th>Last Name</th> <th>User Name</th> </tr> </thead> <tr> <td>1</td> <td>yi</td> <td>xiaohan</td> <td>易枭寒</td> </tr> <tr> <td>2</td> <td>jiang</td> <td>kaiwen</td> <td>江凯文</td> </tr> </table> </div> <script src="../bootstrap/js/jquery-1.7.2.min.js"></script> <script src="../bootstrap/js/bootstrap.min.js"></script> </body></html>
==============================================
表单：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表单</title> <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="../bootstrap/css/bootstrap-responsive.css" rel="stylesheet"> <!--[if lt IE 9]> <script src="../bootstrap/js/bootstrap/js/html5shiv/dist"></script> <![endif]--> </head> <body> <div class="container"> <h1 class="page-header">表单</h1> <label for="username">用户名</label> <input id="username" type="text" placeholder="请输入您的用户名" class="span3"> <p class="help-block">请输入您已经注册的用户名</p> </div> <script src="../bootstrap/js/jquery-1.7.2.min.js"></script> <script src="../bootstrap/js/bootstrap.min.js"></script> </body></html>
==========
扩展表单控件
除了现有的浏览器控件，Bootstrap还额外包含了一些有用的表单组件。
前缀和附加输入框
在任何文本输入框之前或之后添加文本或按钮。注意，select控件不支持。
默认选项
将.add-on和input进行组合，可以将文本放倒输入框前或后面。
组合
同时使用两个类，并将两个.add-on放在输入框的前与后。
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文本框的前缀与后缀</title> <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="../bootstrap/css/bootstrap-responsive.css" rel="stylesheet"> <!--[if lt IE 9]> <script src="../bootstrap/js/bootstrap/js/html5shiv/dist"></script> <![endif]--> </head> <body> <div class="container"> <h1 class="page-header">文本框的前缀与后缀</h1> <div class="input-prepend input-append"> <span class="add-on">¥</span><input type="text"><span class="add-on">.00</span> </div> <div class="input-append"> <input type="text"><button class="btn" type="button">搜索</button> </div> <script src="../bootstrap/js/jquery-1.7.2.min.js"></script> <script src="../bootstrap/js/bootstrap.min.js"></script> </body></html>
=========
复选框和单选框
复选框是用于在一个列表中选择一个或多个选项，而单选框是在众多选择中选择一个选项。
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>单选按钮</title> <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="../bootstrap/css/bootstrap-responsive.css" rel="stylesheet"> <!--[if lt IE 9]> <script src="../bootstrap/js/bootstrap/js/html5shiv/dist"></script> <![endif]--> </head> <body> <div class="container"> <h1 class="page-header">单选按钮</h1> <label>您的性别</label> <label class="radio"> <input type="radio" name="gender" value="male"> 男 </label> <label class="radio"> <input type="radio" name="gender" value="female"> 女 </label> <label class="radio"> <input type="radio" name="gender" value="other"> 其他 </label> </div> <script src="../bootstrap/js/jquery-1.7.2.min.js"></script> <script src="../bootstrap/js/bootstrap.min.js"></script> </body></html>
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>复选框</title> <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="../bootstrap/css/bootstrap-responsive.css" rel="stylesheet"> <!--[if lt IE 9]> <script src="../bootstrap/js/bootstrap/js/html5shiv/dist"></script> <![endif]--> </head> <body> <div class="container"> <h1 class="page-header">复选框</h1> <label>你喜欢的编程语言</label> <label class="checkbox"> <input type="checkbox" name="language" value="python">Python </label> <label class="checkbox"> <input type="checkbox" name="language" value="ruby">Ruby </label> <label class="checkbox"> <input type="checkbox" name="language" value="php">PHP </label> </div> <script src="../bootstrap/js/jquery-1.7.2.min.js"></script> <script src="../bootstrap/js/bootstrap.min.js"></script> </body></html>
效果图;
加入inline 类就可以使复选框在同一行显示：
<label class="checkbox inline">
===============================================================================
下拉框(选择列表)
可使用默认的选项或者指定multiple="multiple"属性一次显示多个选项。
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>选择列表（下拉框）</title> <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="../bootstrap/css/bootstrap-responsive.css" rel="stylesheet"> <!--[if lt IE 9]> <script src="../bootstrap/js/bootstrap/js/html5shiv/dist"></script> <![endif]--> </head> <body> <div class="container"> <h1 class="page-header">选择列表（下拉框）</h1> <label for="somewhere">我想去的地方：</label> <select id="somewhere"> <option value="xiamen">厦门</option> <option value="hangzhou">杭州</option> <option value="yunnan">云南</option> </select> </div> <script src="../bootstrap/js/jquery-1.7.2.min.js"></script> <script src="../bootstrap/js/bootstrap.min.js"></script> </body></html>
多选列表：
指定multiple="multiple"属性显示多个选项。
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>选择列表（下拉框）</title> <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="../bootstrap/css/bootstrap-responsive.css" rel="stylesheet"> <!--[if lt IE 9]> <script src="../bootstrap/js/bootstrap/js/html5shiv/dist"></script> <![endif]--> </head> <body> <div class="container"> <h1 class="page-header">选择列表（下拉框）</h1> <label for="somewhere">我想去的地方：</label> <select id="somewhere" multiple="multiple"> <option value="xiamen">厦门</option> <option value="hangzhou">杭州</option> <option value="yunnan">云南</option> </select> </div> <script src="../bootstrap/js/jquery-1.7.2.min.js"></script> <script src="../bootstrap/js/bootstrap.min.js"></script> </body></html>
===============================================================================
form:
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表单</title> <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="../bootstrap/css/bootstrap-responsive.css" rel="stylesheet"> <!--[if lt IE 9]> <script src="../bootstrap/js/bootstrap/js/html5shiv/dist"></script> <![endif]--> </head> <body> <div class="container"> <h1 class="page-header">表单</h1> <label for="username">用户名</label> <input id="username" type="text"> <p class="help-block">请输入您已经注册的用户名</p> <label for="password">密码</label> <input id="password" type="password"> <p class="help-block">请输入您的密码</p> <button type="submit" class="btn btn-primary">登陆</button> </div> <script src="../bootstrap/js/jquery-1.7.2.min.js"></script> <script src="../bootstrap/js/bootstrap.min.js"></script> </body></html>
水平表单：
右侧对齐并且左侧浮动的label和控件排列在同一行。这需要对默认的表单格式做修改：
为表单添加.form-horizontal类
将label和控件包裹在.control-group中
为label添加.control-label类
将任何相关的控件包裹在.controls中，以确保最佳的对齐
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表单</title> <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="../bootstrap/css/bootstrap-responsive.css" rel="stylesheet"> <!--[if lt IE 9]> <script src="../bootstrap/js/bootstrap/js/html5shiv/dist"></script> <![endif]--> </head> <body> <div class="container"> <h1 class="page-header">表单</h1> <form class="form-horizontal"> <fieldset> <legend>用户登陆</legend> <div class="control-group"> <label class="control-label"for="username">用户名</label> <div class="controls"> <input id="username" type="text"> <p class="help-block">请输入您已经注册的用户名</p> </div> </div> <div class="control-group"> <label class="control-label" for="password">密码</label> <div class="controls"> <input id="password" type="password"> <p class="help-block">请输入您的密码</p> </div> </div> </fieldset> <div class="form-actions"> <button type="submit" class="btn btn-primary">登陆</button> </div> </form> </div> <script src="../bootstrap/js/jquery-1.7.2.min.js"></script> <script src="../bootstrap/js/bootstrap.min.js"></script> </body></html>
再来看一个例子：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表单</title> <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="../bootstrap/css/bootstrap-responsive.css" rel="stylesheet"> <!--[if lt IE 9]> <script src="../bootstrap/js/bootstrap/js/html5shiv/dist"></script> <![endif]--> </head> <body> <form class="form-horizontal"> <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">Password</label> <div class="controls"> <input type="password" id="inputPassword" placeholder="Password"> </div> </div> <div class="control-group"> <div class="controls"> <label class="checkbox"> <input type="checkbox"> Remember me </label> <button type="submit" class="btn">Sign in</button> </div> </div> </form> <script src="../bootstrap/js/jquery-1.7.2.min.js"></script> <script src="../bootstrap/js/bootstrap.min.js"></script> </body></html>
- bootstrap学习笔记2之strong,small,blockquote,cite,
- strong与em、q、cite、blockquote区别
- cite、small
- 7.14<q><blockquote>学习笔记
- 区分HTML中cite标签，q标签，blockquote标签
- <strong>，em>，<span>，<q>，<blockquote>标签
- BootStrap学习笔记-2
- 【Bootstrap学习笔记2】
- Small Basic 语言 学习笔记
- Small Rtos51学习笔记1
- Bootstrap快速学习笔记（2）表单系列之二
- Bootstrap学习总结笔记（2）-- 基本样式之表格
- cite;small;API；FileList对象和file对象
- 学习笔记—bootstrap(2)
- Bootstrap学习笔记之文本对齐风格
- bootstrap学习笔记之导航条基础
- bootstrap学习笔记之基础导航条
- bootstrap v3学习笔记之组件
- 修炼功法错了，再怎么努力修炼效率还是很低！
- linux网络编程之socket（十一）：套接字I/O超时设置方法和用select实现超时
- java中List集合的遍历和两种实现类的比较分析
- Android界面基本属性
- Linux grep命令
- bootstrap学习笔记2之strong,small,blockquote,cite,
- mysql 建立索引（sql 建索引）
- SCTP协议源码分析--多归属特性multi-homed(一)
- linux系统运行状况相关的Shell命令:
- sql server(MSSQLSERVER)服务不能启动 解决办法
- Android SDK和最新ADT下载地址 + 环境搭建 .
- Linux 运行进程实时监控pidstat命令详解
- Arcgis engnie 为图形建立缓冲区
- Arcgis engine 将两个Geometry对象合并为一个新的Geometry对象，其中GeometryA的值会被修改
