bootstrap3学习笔记1-排版
2016-04-24 21:23
513 查看
bootstrap 排版:
1,标题:有 h1 到 h6 6级大小的标题,若要在标题旁添加子标题,可以嵌套 small 标签
引导主体副本:添加 class = lead,给段落增加强调文本,是其更大更粗,行高更高
2,文本强调:small标签 文本大小为父文本大小的85%
strong标签:文本加粗
em标签:设置文本为斜体
text-left :文本左对齐
text-center:文本居中对齐
text-right:文本右对齐
text-muted:文本内容透明度减弱
text-primary,text-success,text-info,text-warning,text-danger:带颜色的文本
3,缩写:abbr 元素的样式为显示在文本地步的一条虚线框,鼠标悬停时会显示完整文本,要添加title属性
如:
<abbr title="World Wide Web">WWW</abbr><br>
4,address标签:在网页上显示联系信息,需为封闭的地址文本添加换行
5,列表:
有序列表:以数字或字符开头的列表
无序列表:着重号开头,可用class = list-unstyled 移除着重号样式,可用class = list-inline把所有列表项显示在一行
定义列表:dl中,每个列表项包含dt和dd元素,可用class = dl-horizontal把dl行中属于和描述并排显示
<h4>水平的定义列表</h4><dl class="dl-horizontal">
<dt>Description 1</dt>
<dd>Item 1</dd>
<dt>Description 2</dt>
<dd>Item 2</dd></dl>
6,text-justify:段落中文字超过屏幕部分自动换行
text-nowrap:段落中超出屏幕部分不换行
text-lowercase:文本小写
text-uppercase:文本大写
capitalize:首字母大写
pre-scrollable:使pre元素可滚动
7,引用 blockquote ,pull-left 向左对齐 pull-right:向右对齐
<blockquote class="pull-right">这是一个向右对齐的引用。<small>Someone famous in <cite title="Source Title">Source Title</cite></small></blockquote>
1,标题:有 h1 到 h6 6级大小的标题,若要在标题旁添加子标题,可以嵌套 small 标签
引导主体副本:添加 class = lead,给段落增加强调文本,是其更大更粗,行高更高
2,文本强调:small标签 文本大小为父文本大小的85%
strong标签:文本加粗
em标签:设置文本为斜体
text-left :文本左对齐
text-center:文本居中对齐
text-right:文本右对齐
text-muted:文本内容透明度减弱
text-primary,text-success,text-info,text-warning,text-danger:带颜色的文本
3,缩写:abbr 元素的样式为显示在文本地步的一条虚线框,鼠标悬停时会显示完整文本,要添加title属性
如:
<abbr title="World Wide Web">WWW</abbr><br>
4,address标签:在网页上显示联系信息,需为封闭的地址文本添加换行
5,列表:
有序列表:以数字或字符开头的列表
无序列表:着重号开头,可用class = list-unstyled 移除着重号样式,可用class = list-inline把所有列表项显示在一行
定义列表:dl中,每个列表项包含dt和dd元素,可用class = dl-horizontal把dl行中属于和描述并排显示
<h4>水平的定义列表</h4><dl class="dl-horizontal">
<dt>Description 1</dt>
<dd>Item 1</dd>
<dt>Description 2</dt>
<dd>Item 2</dd></dl>
6,text-justify:段落中文字超过屏幕部分自动换行
text-nowrap:段落中超出屏幕部分不换行
text-lowercase:文本小写
text-uppercase:文本大写
capitalize:首字母大写
pre-scrollable:使pre元素可滚动
7,引用 blockquote ,pull-left 向左对齐 pull-right:向右对齐
<blockquote class="pull-right">这是一个向右对齐的引用。<small>Someone famous in <cite title="Source Title">Source Title</cite></small></blockquote>
相关文章推荐
- bootstrap初试进度条
- Bootstrap 3.3.4 发布,Web 前端 UI 框架
- angular 指令简述
- 把网站链接卖一个好价钱: Text Link Ads 注册网赚攻略
- MSSQL数据库获取TEXT字段的内容长度
- 『jQuery』.html(),.text()和.val()的概述及使用
- JavaScript开发者必备的10个Sublime Text插件
- Bootstrap每天必学之前端开发框架
- Bootstrap 粘页脚效果
- JS组件中bootstrap multiselect两大组件较量
- 基于Bootstrap的网页设计实例
- BootStrap实用代码片段之一
- JS组件Bootstrap dropdown组件扩展hover事件
- JS组件Bootstrap Select2使用方法详解
- 精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
- Bootstrap入门书籍之(五)导航条、分页导航
- 全面解析Bootstrap手风琴效果
- JS组件Bootstrap Table表格行拖拽效果实现代码
- Bootstrap每天必学之按钮
- 轻松实现Bootstrap图片轮播