BootStrap详解之(二)

六、内容
Bootstrap 将全局 font-size 设置为 14px,line-height 设置为 1.428

中心内容
.lead 将字体大小、加粗、行高修改 (无卵高深用)
标记
mark标签高亮内容 <mark>highlight</mark>
删除内容
del标签删除内容(横线)
<del>This line of text is meant to be treated as deleted text.</del>
无用文本
s 标签(横线)
<s>This line of text is meant to be treated as deleted text.</s>
同删除内容
插入文本
ins标签(下划线)
<ins>This line of text is meant to be treated as an addition to the document.</ins>
带下划线的文本
u标签
<u>This line of text will render as underlined</u>

小号文本
small标签,父容器字体大小的 85% (标题的small是指定的大小)

着重
strong标签

斜体
em标签

对齐

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">左右对齐</p>
<p class="text-nowrap">不换行</p>

大小写

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

缩略语
<abbr title="attribute">attr</abbr>
首字母缩略语
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

地址

<address>
  <strong>Twitter, Inc.</strong><br>
  795 Folsom Ave, Suite 600<br>
  San Francisco, CA 94107<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:[email protected]">[email protected]</a>
</address>

引用
blockquote标签

<footer> 用于标明引用来源。来源的名称可以包裹进 <cite>标签中。
    <blockquote>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>

右对齐效果
  .blockquote-reverse

无序列表
<ul>
<li>...</li>
</ul>
有序列表
<ol>
<li>...</li>
</ol>
无样式列表
<ul class="list-unstyled">
<li>...</li>
</ul>

内联列表
<ul class="list-inline">
<li>...</li>
</ul>

描述列表
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
水平排列的描述
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>

-- 自动截断:text-overflow: ellipsis;
-- 不换行:white-space: nowrap;

用户输入
<kbd> 标签

代码块
<pre> 标签

.pre-scrollable 类,其作用是设置 max-height 为 350px ,并在垂直方向展示滚动条

变量
var 标签

程序输出
标签

七、表格
table、caption、thead、tbody、tr、th、td

.table
.table .table-striped 条纹状
.table .table-bordered 边框
.table .table-hover 鼠标悬停
.table .table-condensed 紧缩,padding减少
颜色,tr和td都可以加入颜色样式:
.active 鼠标悬停在行或单元格上时所设置的颜色
.success 标识成功或积极的动作
.info 标识普通的提示信息或动作
.warning 标识警告或需要用户注意
.danger 标识危险或潜在的带来负面影响的动作

.table-responsive 相应式表格,将任何 .table 元素包裹在 .table-responsive 元素内,即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失。

八、表单
基本表单
.form-group
label
.form-control

内联表单
.form-inline:当行表单,在表单组外面添加.form-inline 类,可以使得表单内联, 如果屏幕宽度小于768px,则失效
.sr-only: 隐藏label,class="sr-only"
.input-group: 对input标签进行处理
.form-horizontal: .form-horizontal 类,并联合使用 Bootstrap 预置的栅格类,可以将 label 标签和控件组水平并排布局

其他详见:http://v3.bootcss.com/

时间: 2025-01-16 05:03:38

BootStrap详解之(二)的相关文章

[顶]ORACLE PL/SQL编程详解之二:PL/SQL块结构和组成元素(为山九仞,岂一日之功)

原文:[顶]ORACLE PL/SQL编程详解之二:PL/SQL块结构和组成元素(为山九仞,岂一日之功) [顶]ORACLE PL/SQL编程详解之二: PL/SQL块结构和组成元素(为山九仞,岂一日之功) 继上四篇:ORACLE PL/SQL编程之八:把触发器说透                ORACLE PL/SQL编程之六:把过程与函数说透(穷追猛打,把根儿都拔起!)                [推荐]ORACLE PL/SQL编程之四:把游标说透(不怕做不到,只怕想不到) [推荐]

logback logback.xml常用配置详解(二)&lt;appender&gt;

logback 常用配置详解(二) <appender> <appender>: <appender>是<configuration>的子节点,是负责写日志的组件. <appender>有两个必要属性name和class.name指定appender名称,class指定appender的全限定名. 1.ConsoleAppender: 把日志添加到控制台,有以下子节点: <encoder>:对日志进行格式化.(具体参数稍后讲解 ) &

logback 常用配置详解(二) &lt;appender&gt;

logback 常用配置详解(二) <appender> <appender>: <appender>是<configuration>的子节点,是负责写日志的组件. <appender>有两个必要属性name和class.name指定appender名称,class指定appender的全限定名. 1.ConsoleAppender: 把日志添加到控制台,有以下子节点: <encoder>:对日志进行格式化.(具体参数稍后讲解 ) &

【Hibernate步步为营】--双向关联一对一映射详解(二)

很不好意思,有两天时间没有更新博客文章了,不写文章的日子还真是感觉很空洞啊,养成了写文章的恶习想改也改不掉啊.说点题外话,前两天收到一位朋友的私信,邀请笔者写一篇有关OWS的文章,用来研究图标工具的一种技术,很荣幸收到这位朋友的邀请,但是因为这几天开发的项目着急上线所以暂时没有时间去研究,只能等这周末了,利用周末的时间来研究然后更新类似的技术文章. 回到文章的正题,上篇文章讨论了双向主键关联,它其实是一对一主键关联的一种特殊情况,想要实现双向的关联就必须在映射文件的两端同时配置<one-to-o

iOS 开发之照片框架详解之二 —— PhotoKit 详解(下)

这里接着前文<iOS 开发之照片框架详解之二 —— PhotoKit 详解(上)>,主要是干货环节,列举了如何基于 PhotoKit 与 AlAssetLibrary 封装出通用的方法. 三. 常用方法的封装 虽然 PhotoKit 的功能强大很多,但基于兼容 iOS 8.0 以下版本的考虑,暂时可能仍无法抛弃 ALAssetLibrary,这时候一个比较好的方案是基于 ALAssetLibrary 和 PhotoKit 封装出一系列模拟系统 Asset 类的自定义类,然后在其中封装好兼容 A

iOS 开发之照片框架详解之二 —— PhotoKit 详解(上)

一. 概况 本文接着 iOS 开发之照片框架详解,侧重介绍在前文中简单介绍过的 PhotoKit 及其与 ALAssetLibrary 的差异,以及如何基于 PhotoKit 与 AlAssetLibrary 封装出通用的方法. 这里引用一下前文中对 PhotoKit 基本构成的介绍: PHAsset: 代表照片库中的一个资源,跟 ALAsset 类似,通过 PHAsset 可以获取和保存资源 PHFetchOptions: 获取资源时的参数,可以传 nil,即使用系统默认值 PHAssetCo

安卓集成发布详解(二)gradle

转自:http://frank-zhu.github.io/android/2015/06/15/android-release_app_build_gradle/ 安卓集成发布详解(二) 15 Jun 2015 上一篇主要讲了安卓版本编译版本发布的过程,本篇主要写版本编译脚本的实现,包括签名文件处理及多渠道版本编译.安卓集成发布详解(一) 一.签名部分编写 gradle本身支持直接签名,只需要在releas部分添加如下代码即可 signingConfigs { debug { } releas

cocoahttpserver使用详解(二)

接下来,我们接着去学习如何去接收处理web上传的数据 1 首先我们创建一个 @interface WTZHTTPConnection : HTTPConnection 在这个类中我们用于处理接受文件并存储到app文档 同时不要忘记了设置httpserver的Connectio类 [httpServer setConnectionClass:[WTZHTTPConnectionclass]]; 全部的代码如下 .h文件 #define UPLOAD_FILE_PROGRESS @"uploadfi

Tomcat--各个目录详解(二)

Tomcat整体目录: 一.bin文件(存放启动和关闭tomcat脚本) 其中.bat和.sh文件很多都是成对出现的,作用是一样的,一个是Windows的,一个是Linux. ① startup文件:主要是检查catalina.bat/sh 执行所需环境,并调用catalina.bat 批处理文件.启动tomcat. 异常:打开可能有闪退的问题.原因可能有以下两点: 1)缺少环境变量配置,startup会检查你的电脑环境变量是否有JAVA_HOME. 2)已经开启了Tomcat容器,再次开启端口