有关bootstrap之排版
1.标题
HTML中的所有标题标签,从<h1> 到 <h6> 均可用。另外,还提供了.h1 到.h6 class,为的是给inline属性的文本赋予标题的样式。
在标题内还可以包含<small>标签或.small元素,可以用来标记副标题。
2.页面主体
Bootstrap将全局font-size设置为14px,line-height为1.428。这些属性直接赋给<body>和所有段落元素。另外,<p>(段落)还被设置了等于1/2行高的底部外边距(margin)(即10px)。
通过添加 .lead 可以让文本段落突出显示。
对于不需要强调的inline或block类型的文本,使用<small>标签包裹,其内的文本将被设置为父容器字体大小的85%。标题元素中嵌套的<small>元素被设置不同的font-size。
你还可以为行内元素赋予.small以代替任何<small>标签。
通过增加font-weight 来着重强调一段文本。
用斜体强调一段文本:<em>rendered as italicized text</em>
还可以使用HTML5中定义的<b> 和 <i>元素。<b>表示在不增加额外重要性的同时将词或短语高亮显示,<i>大部分用于发言、技术短语等情况。
3.对齐class。
通过文本对齐class,可以简单方便的将文本对齐。‘text-left’‘text-center’‘text-right’
4.强调class
text-primary,text-warning,等class通过颜色来表示强调。也可以应用于链接,当鼠标盘旋于链接上时,其颜色会变深,就像默认的链接样式。
5.缩略语
当鼠标悬停在缩写和缩写词上时就会显示完整内容,Bootstrap实现了对HTML的<abbr>元素的增强样式。缩略语元素带有title属性,外观表现为带有较浅的虚线框,鼠标移至上面时会变成带有“问号”的指针。如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含title属性。
基本的缩略语:如想看完整的内容可把鼠标悬停在缩略语上, 但需要包含title属性。
为缩略语添加.initialism可以将其font-size设置的更小些
6.地址:
让联系信息以最接近日常使用的格式呈现。在每行结尾添加<br>可以保留需要的样式。
<address> <strong>长安大街.</strong><br> 第三大胡同<br> 门牌号 CA 94107<br> <abbr title="Phone">P:</abbr> 010-667788</address> <address> <strong>Full Name</strong><br> <a href="mailto:#">first.last@example.com</a></address>
7.引用:
将任何HTML裹在<blockquote>之中即可表现为引用。对于直接引用,建议用<p>标签。
对于标准样式的<blockquote>,可以通过几个简单的变体就能改变风格和内容:
添加<small>标签或.small class 来注明引用来源。来源名称可以放在<cite>标签里面。
<blockquote> <p>锄禾日当午,汗滴禾下土</p> <small>Someone famous in <cite title="Source Title">锄禾</cite></small></blockquote> 使用.pull-right可以让引用展现出向右侧移动、对齐的效果 <blockquote class=‘pull-right’> <p>锄禾日当午,汗滴禾下土</p> <small>Someone famous in <cite title="Source Title">锄禾</cite></small></blockquote>
8.列表:无序列表,有序列表,
无样式列表:添加 .list-unstyled; 移除了默认的list-style样式和左侧外边距的一组元素(只针对直接子元素)。,也就是说,你需要对所有嵌套的列表都添加此class才能具有同样的样式。
内联列表:通过设置display: inline-block;并添加少量的内补,将所有元素放置于同一列。
dl-dt-dd:
水平排列的描述:.dl-horizontal可以让<dl>内短语及其描述排在一行。开始是像<dl>默认样式堆叠在一起,随着导航条逐渐展开而排列在一样。 其中有个自动截断:通过text-overflow,水平排列的描述列表将会截断左侧太长的短语。在较窄的视口(viewport)内,列表将变为默认堆叠排列的布局方式。
有关bootstrap之排版的更多相关文章
- bootstrap之排版类
bootstrap之排版类
- Bootstrap 一. 排版样式(内联文本元素,对齐,大小写,缩略语,地址文本,引用文本,列表排版 ,代码 )
第 2 章 排版样式 在 h1 ~ h6 元素之间,还可以嵌入一个 small 元素作为副标题 <h1>Bootstrap 框架 <small>Bootstrap 小标题< ...
- Bootstrap文本排版基础--Bootsrap
1.排版前的基础 (1)移动设备优先 <meta name="viewport" content="width=device-width, initial-scal ...
- bootstrap之排版样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Bootstrap(2) 排版样式
1.页面主体,Bootstrap 将全局 font-size 设置为 14px,line-height 行高设置为 1.428(即20px):<p>段落元素被设置等于 1/2 行高(即 1 ...
- Bootstrap学习-排版
1.标题 <h1>~<h6>,所有标题的行高都是1.1(也就是font-size的1.1倍). 2.副标题 <small>,行高都是1,灰色(#999) <h ...
- bootstrap css排版
smart-form 单行元素: 一般用div包含,class="row" 列元素:用section包含,class="col col-x"(section带有 ...
- Bootstrap学习-排版-表单
1.标题 <h1>~<h6>,所有标题的行高都是1.1(也就是font-size的1.1倍). 2.副标题 <small>,行高都是1,灰色(#999) <h ...
- Bootstrap关于排版
1.Bootstrap和普通的HTML页面一样,定义标题都是使用标签<h1>到<h6>,只不过Bootstrap覆盖了其默认的样式 2.使用了<small>标签来制 ...
随机推荐
- Codeforces 624
B. Making a String time limit per test 1 second memory limit per test 256 megabytes input standard i ...
- div内文字超出换行问题
1.强制换行: div的样式加上: word-wrap:break-word;word-break:break-all; 2.在文字中间加入建议换行标志<wbr>可以每隔几个字符加一个,
- Tips
1)字符串转换数字 ') { ; do{ j*=;j+='); i++; }'); //实际上为读入优化的一部分 2)进制转换万能模板 #include <cstdio> using na ...
- [资源分享]yslow 与firebug 修复版本Firefox35【绿色版本下载】
自从火狐也开始做版本帝后,相关查的插件越来越不好使了, 而且火狐集成自己的调试工具,也不是很好使用,Yslow 也坏掉了 找公司写c++修复了下 把yslow和Firebug 打包到一起,而且关闭自动 ...
- 如何查看bash shell 帮助信息?
man bash 查看bash的命令帮助 info bash 查看bash的文档 help 命令显示bash支持的命令: 如果想看某个命令的帮助可以 help 命令.如 help cd 对bash的命 ...
- Thinkphp3.2.3路径书写注意
尽量不要这样写: ./public/img/a.jpg 应该这样写:__PUBLIC__/img/a.jpg 不然会引起不兼容 如首页地址 http://192.168.1.100/rjshop/时
- 案例1.通过Jquery来处理复选框
实现以下功能: 1:选中第一个复选框,那么下面所有的复选框都选中,去除选中第一个复选框,下面的都不选中 2:当点击全选按钮,上面足球.篮球.游泳.唱歌 全部选中 3:当点击全不选按钮,上面四个全部取消 ...
- C#中的null与void
一.null: 1.明义,null是什么意思? null是指一个变量没有指向具体对象的有效引用. 这句话什么意思呢?意思就是 1).能够使用null修饰的是变量: 2).主要指的是引用. 那么这就引出 ...
- Logback_日志使用详解(转)
概述 Logback建立于三个主要类之上:日志记录器(Logger),输出端(Appender)和日志格式化器(Layout).这三种组件协同工作,使开发者可以按照消息类型和级别来记录消息,还可以在程 ...
- BeautifulSoup Some characters could not be decoded, and were replaced with REPLACEMENT CHARACTER.
BeautifulSoup很赞的东西 最近出现一个问题:Python 3.3 soup=BeautifulSoup(urllib.request.urlopen(url_path),"htm ...