bootstrap快速入门笔记(五)-文本元素类,各种标签,排版
1,h1到h6这里也有定义了
2,全局元素被直接赋予font-size 设置为 14px,line-height 设置为 1.428,<p> (段落)元素还被设置了等于 1/2 行高(即 10px)的底部外边距(margin)
3,“.lead”:让段落突出显示,就是字体加大了,加粗了。
4,<mark>内联文本元素;文字背景是黄色;
5,<del>删除文本标签;<s>无用文本标签,和del效果类似;
6,<ins>插入文本标签;<u>显示文本带有下划线,和<ins>效果类似;
7,<small>小号文本,是父容器字体的85%,也可以用.small代替;
8,<strong>强调一段文本;
9,<em>斜体文本
10,<b>,<i>在 HTML5 中可以放心使用
11,对齐:
text-left,text-center, text-right,
text-justify:、、注意段落与段落之间不能留任何空行
text-nowrap//禁止文件自动换行
12,改变文件大小写:
text-lowercase:小写
text-uppercase:大写
text-capitalize: 字首大写
13,<abbr>缩略语:<abbr title="attribute">attr</abbr>
14,“.initialism”首字母缩写:<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
15,地址<address>:<address> <strong>Full Name</strong><br> <a href="mailto:#">first.last@example.com</a> </address>
16,多种引用样式:
<blockquote>
--直接引用建议p标签
--添加 <footer> 用于标明引用来源。来源的名称可以包裹进 <cite>标签中
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote>
--.blockquote-reverse类可以让引用呈现内容右对齐的效果
17,列表
无序列表<ul>:
.list-unstyled:无样式
.list-inline:将所有元素放置于同一行
有序列表<ol>
18,描述:带有描述的短语列表<dl> <dt>...</dt> <dd>...</dd> </dl>
.dl-horizontal 可以让 <dl> 内的短语及其描述排在一行。开始是像 <dl> 的默认样式堆叠在一起,随着导航条逐渐展开而排列在一行。
19,自动截断:.text-overflow水平排列的描述列表将会截断左侧太长的短语。在较窄的视口(viewport)内,列表将变为默认堆叠排列的布局方式。
bootstrap快速入门笔记(五)-文本元素类,各种标签,排版的更多相关文章
- bootstrap快速入门笔记(二)-栅格系统,响应式类
一,栅格系统大致有以下: 1,行row必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,一行有12列 2.“列(column)”在水平方向创建一 ...
- bootstrap快速入门笔记(八)-按钮,响应式图片
一,默认样式:.btn-default , .btn-primary , .btn-success ,.btn-info, btn-warning ,btn-link 二,尺寸:.btn-lg, . ...
- bootstrap快速入门笔记(四)-less用法指南, mixin和变量
一,less变量,less文件 1.bootstrap.less 这是主要的 Less 文件.该文件中导入了一些其他的 less 文件.该文件中没有任何代码. 2.forms.less 这个 Less ...
- bootstrap快速入门笔记(七)-表格,表单
一,表格 1,<table>中加.table类 2,条纹表格:通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式. **跨浏览器兼容性: ...
- bootstrap快速入门笔记(九)-响应式工具
一,可用的类 超小屏幕手机 (<768px) 小屏幕平板 (≥768px) 中等屏幕桌面 (≥992px) 大屏幕桌面 (≥1200px) .visible-xs-* 可见 隐藏 隐藏 隐藏 ...
- bootstrap快速入门笔记(六)-代码
一,内联代码<code>:For example, <code><section></code> should be wrapped as inline ...
- bootstrap快速入门笔记(三)响应式,行,列,偏移量,排序
一,响应式列重置 .clearfix <div class="row"> <div class="col-xs-6 col-sm-3"> ...
- bootstrap快速入门笔记(一)
一,头部基本格式:<head lang="en"> <meta charset="UTF-8"> <meta name=" ...
- 无废话ExtJs 入门教程五[文本框:TextField]
无废话ExtJs 入门教程五[文本框:TextField] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个两个文本框.如下所示代码区的第42行位置,items: ...
随机推荐
- 算法模板——splay区间反转 2
实现功能:同splay区间反转 1(基于BZOJ3223 文艺平衡树) 这次改用了一个全新的模板(HansBug:琢磨了我大半天啊有木有),大大简化了程序,同时对于splay的功能也有所完善 这里面没 ...
- 1821: [JSOI2010]Group 部落划分 Group
1821: [JSOI2010]Group 部落划分 Group Time Limit: 10 Sec Memory Limit: 64 MBSubmit: 1308 Solved: 627[Su ...
- Visual Studio 2017十五项新功能体验
Visual Studio 2017正式已经于2017.3.7号正式发布,选在这一天发布也是为了纪念Visual Studio 二十周年.MVP 2017技术峰会将于这个周末(3.17)在北京举办,由 ...
- 关于PHP单双引号解析变量的问题
双引号可以解析变量,单引号不行 $qweqwe = 123; echo "$qweqwe"; 输出123 echo '$qweqqwe'; 输出$qweqwe
- .NET中可空值类型实现原理
为了让.Net中的值类型可以赋值为null,微软特地添加了Nullable<T>类型,也可简写为T?.但是Nullable<T>自身是结构体,也是值类型,那么它是如何实现将nu ...
- C中运算符优先级
总体规则: 特殊运算符>单目运算符>双目运算符>三目运算符>赋值运算符>逗号运算符 只有单目运算符是右结合,其余的均为左结合
- CSS - DOM 经常使用方法
offset() 方法返回或设置匹配元素相对于文档的偏移(位置). 包括两个属性值:top,left. position() 方法返回匹配元素相对于父元素的位置(偏移). 包括两个属性值:top,le ...
- BZOJ4403 序列统计—Lucas你好
绝对是全网写的最详细的一篇题解 题目:序列统计 代码难度:简单 思维难度:提高+-省选 讲下题面:给定三个正整数N.L和R,统计长度在1到N之间,元素大小都在L到R之间的单调不降序列的数量.输出答案 ...
- 实际比较filter2D和imfilter之间的关系
实际比较filter2D和imfilter之间的关系 卷积运算是图像处理和增强中经常遇到的一种算法.由于很多优秀的开源算法都是采用matlab编写的,在我改写为c ...
- WP8.1小梦词典开发1:金山词霸API使用
原文出自:http://www.bcmeng.com/windows-phone-api/ 今天开始小梦给大家分享一下小梦词典开发中几个关键问题,首先我们来看查词功能的实现.小梦词典的查词功能是通过金 ...