Bootstrap知识记录:排版样式
---恢复内容开始---
一.页面排版
Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。
1.页面主体
Bootstrap 将全局font-size 设置为14px,line-height 行高设置为1.428(即
20px);<p>段落元素被设置等于1/2 行高(即10px);颜色被设置为#333。
//创建包含段落突出的文本
<p>Bootstrap 框架</p>
<p class="lead">Bootstrap 框架</p>
<p>Bootstrap 框架</p>
<p>Bootstrap 框架</p>
<p>Bootstrap 框架</p>
2.标题
//从h1 到h6
<h1>Bootstrap 框架</h1> //36px
<h2>Bootstrap 框架</h2> //30px
<h3>Bootstrap 框架</h3> //24px
<h4>Bootstrap 框架</h4> //18px
<h5>Bootstrap 框架</h5> //14px
<h6>Bootstrap 框架</h6> //12px
我们从Firebug 查看元素了解到,Bootstrap 分别对h1 ~ h6 进行了CSS 样式的重构,
并且还支持普通内联元素定义class=(.h1 ~ h6)来实现相同的功能。
//内联元素使用标题字体
<span class="h1">Bootstrap</span>
注:通过Firebug 查看元素还看到,字体颜色、字体样式、行高均被固定了,从而保
证了统一性,而原生的会根据系统内置的首选字体决定,颜色是最黑色。
在h1 ~ h6 元素之间,还可以嵌入一个small 元素作为副标题,
//在标题元素内插入small 元素
<h1>Bootstrap 框架<small>Bootstrap 小标题</small></h1>
<h2>Bootstrap 框架<small>Bootstrap 小标题</small></h2>
<h3>Bootstrap 框架<small>Bootstrap 小标题</small></h3>
<h4>Bootstrap 框架<small>Bootstrap 小标题</small></h4>
<h5>Bootstrap 框架<small>Bootstrap 小标题</small></h5>
<h6>Bootstrap 框架<small>Bootstrap 小标题</small></h6>
通过Firebug 查看,我们发现h1 ~ h3 下small 元素的大小只占父元素的65%,那么
通过计算(查看Firebug 计算后的样式),h1 ~ h3 下的small 为23.4px、19.5px、15.6px;
h4 ~ h6 下small 元素的大小只占父元素的75% ,分别为:13.5px、10.5px、9px。
在h1 ~ h6 下的small 样式也进行了改变,颜色变成淡灰色:#777,行高为1,粗度
为400。
3.内联文本元素
//添加标记,<mark>元素或.mark 类
<p>Bootstrap<mark>框架</mark></p>
//各种加线条的文本
<del>Bootstrap 框架</del> //删除的文本
<s>Bootstrap 框架</s> //无用的文本
<ins>Bootstrap 框架</ins> //插入的文本
<u>Bootstrap 框架</u> //效果同上,下划线文本
//各种强调的文本
<small>Bootstrap 框架</small> //标准字号的85%
<strong>Bootstrap 框架</strong> //加粗700
<em>Bootstrap 框架</em> //倾斜
4.对齐
//设置文本对齐
<p class="text-left">Bootstrap 框架</p> //居左
<p class="text-center">Bootstrap 框架</p> //居中
<p class="text-right">Bootstrap 框架</p> //居右
<p class="text-justify">Bootstrap 框架</p> //两端对齐,支持度不佳
<p class="text-nowrap">Bootstrap 框架</p> //不换行
5.大小写
//设置英文文本大小写
<p class="text-lowercase">Bootstrap 框架</p> //小写
<p class="text-uppercase">Bootstrap 框架</p> //大写
<p class="text-capitalize">Bootstrap 框架</p>//首字母大写
6.缩略语
//缩略语
Bootstrap<abbr title="Bootstrap" class="initialism">框架</abbr>
7.地址文本
//设置地址,去掉了倾斜,设置了行高,底部20px
<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>
8.引用文本
//默认样式引用,增加了做边线,设定了字体大小和内外边距
<blockquote>
Bootstrap 框架
</blockquote>
//反向
<blockquote class="blockquote-reverse ">
Bootstrap 框架
</blockquote>
9.列表排版
//移出默认样式
<ul class="list-unstyled">
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
</ul>
//设置成内联
<ul class="list-inline">
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
<li>Bootstrap 框架</li>
</ul>
//水平排列描述列表
<dl class="dl-horizontal">
<dt>Bootstrap</dt>
<dd>Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用。</dd>
</dl>
10.代码
//内联代码
---恢复内容结束---
Bootstrap知识记录:排版样式的更多相关文章
- Bootstrap -- 网格系统、排版样式类、 <blockquote>、 <abbr> 元素
Bootstrap -- 网格系统.排版样式类. <blockquote>. <abbr> 元素 1. Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏 ...
- Bootstrap知识记录:表单和图片
一.表单Bootstrap 提供了一些丰富的表单样式供开发者使用.1.基本格式//实现基本的表单样式<form><div class="form-group"&g ...
- Bootstrap知识记录:表格和按钮
基本格式.table3.带边框的表格//给表格增加边框<table class="table table-bordered">4.悬停鼠标//让<tbody> ...
- bootstrap课程3 bootstrap中常用的排版样式有哪些
bootstrap课程3 bootstrap中常用的排版样式有哪些 一.总结 一句话总结:bootstrap里面对常用表情比如p.h1.code等html中的常用表情都修改了样式,照着手册用就好,样式 ...
- bootstrap入门-4.排版及其他固定样式
本篇包括以下内容:排版.代码.表格.表单. 总结:超无聊,弃更. · 排版样式 标题 h1-h6 取消加粗,字体大小也有一定变化 ...
- Bootstrap 一. 排版样式(内联文本元素,对齐,大小写,缩略语,地址文本,引用文本,列表排版 ,代码 )
第 2 章 排版样式 在 h1 ~ h6 元素之间,还可以嵌入一个 small 元素作为副标题 <h1>Bootstrap 框架 <small>Bootstrap 小标题< ...
- bootstrap之排版样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 第二百三十二节,Bootstrap排版样式
Bootstrap排版样式 学习要点: 1.页面排版 本节课我们主要学习一下 Bootstrap 全局 CSS 样式中的排版样式,包括了标题.页面 主体.对齐.列表等常规内容. 一.页面排版 Boot ...
- Web前端理论知识记录
Web前端理论知识记录 Elena· 5 个月前 cookies,sessionStorage和localStorage的区别? sessionStorage用于本地存储一个会话(session) ...
随机推荐
- 06.Python网络爬虫之requests模块(2)
今日内容 session处理cookie proxies参数设置请求代理ip 基于线程池的数据爬取 知识点回顾 xpath的解析流程 bs4的解析流程 常用xpath表达式 常用bs4解析方法 引入 ...
- nginx基本配置与参数说明
user nobody; #启动进程,通常设置成和cpu的数量相等 worker_processes 1; #全局错误日志及PID文件 #error_log logs/error.log; # ...
- vue中$router.push打开新窗口
在vue中使用 this.$router.push({ path: '/home' }) 默认是替代本窗口 如果想新开一个窗口,可以使用下面的方式: let routeData = this.$ro ...
- vue中父组件调用子组件函数
用法: 子组件上定义ref="refName", 父组件的方法中用 this.$refs.refName.method 去调用子组件方法 详解: 父组件里面调用子组件的函数,父组 ...
- MySQL高级知识(九)——慢查询日志
前言:慢查询日志是MySQL提供的一种日志记录,它记录MySQL中响应时间超过阈值的语句,具体指运行时间超过long_query_time值的sql语句,该sql语句会被记录到慢查询日志中.慢查询日志 ...
- centos7下kubernetes(8.kubernetes Failover)
上一节我们运行的3个容器 其中有两个是运行在node2上一个运行在node1上,现在我们关闭node1,观察node1上的容器会发生什么变化 目前node1已经处于notready状态 现在我们查看一 ...
- Jenkins以root用户运行的方法
以centOS系统为例,记录下修改Jenkins以root用户运行的方法. 修改Jenkins配置文件 # 打开配置文件 vim /etc/sysconfig/jenkins # 修改$JENKINS ...
- 小a的排列
链接:https://ac.nowcoder.com/acm/contest/317/G来源:牛客网 小a有一个长度为nn的排列.定义一段区间是"萌"的,当且仅当把区间中各个数排序 ...
- Unexpected end of JSON input while parsing near
运行 npm cache clean --force 即可解决pm install出现”Unexpected end of JSON input while parsing near”错误.
- nn.ReLU(inplace=True)中inplace的作用
在文档中解释是: 参数: inplace-选择是否进行覆盖运算 意思是是否将得到的值计算得到的值覆盖之前的值,比如: x = x + 即对原值进行操作,然后将得到的值又直接复制到该值中 而不是覆盖运算 ...