Bootstrap中CSS通用样式——排版,列表,代码,图片
一.排版
标题:
在Bootstrap4中,主要对标题样式做了如下规定:
(1)重设上下外边距,margin-top值为0,margin-bottom:0.5rem。
(2)固定所有标题行高为line-height: 1.2,font-weight:500。
(3)固定不同级别标题字体大小,一级为2.5rem,二级为2rem,三级为1.75rem,四级为1.5rem,五级为1.25rem,六级为1rem。
rem:
(1) em是相对长度单位。相对于当前对象内文本的字体尺寸。
(2) rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。
(3)Bootstrap 4默认的HTML font-size为 16px
<h1>~<h6>标题描述具体如下表所示:
效果如图所示:
副标题:
在标题内也可以包含<small>标签或应用small类元素,用来设置小型辅助的标题文本,bootstrap中关于small元素和small类的样式定义如下:
small,.small{
font-size:80%;
font-weight:400;
}
其中,small标签赋予small类元素font-weight设置为400,font-size变为父元素的80%
如果希望突出显示某个标题,可以使用bootstrap提供的display-1、display-2、display-3、display-4类,样式如下:
.display-1{
font-size:6rem;
font-weight:300;
line-height:1.2;
}
.display-2{
font-size:5.5rem;
font-weight:300;
line-height:1.2;
}
.display-3{
font-size:4.5rem;
font-weight:300;
line-height:1.2;
}
.display-4{
font-size:3.5rem;
font-weight:300;
line-height:1.2;
}
从上面的样式中可以看出display-1的font-size最大
段落:
在Bootstrap 4中,段落标签<p>的样式如下:
上面样式的上外边距为0,下外边距为1rem
例:
可以在段落元素上应用.lead类样式,主要作用是可以将段落突出显示,被突出的段落文本字体被放大。
例:
强调:
HTML5定义了若干个标签强调的标签,有<mark>、<del>、<s>、<ins>、<u>、<strong>、<em>等,在Bootstrap4中同样也可以使用,用来为元素添加强调样式。
针对上表中的内联元素进行介绍。
- <b>和<strong>默认情况下是加粗字体。前者是给其包裹的文本设置为bold粗体效果。而后者表示加强字符的语气,使用bold粗体来起到强调的作用。
- <del>和<s>都可以实现删除效果,但是<del>更具有语义化,能更形象的描述删除意思。<strong>和<em>具有强调作用,有利于SEO。
- <ins>和<u>都可以实现下划线效果,但是前者通常与<del>一起使用。用来定义已经被插入文档中的文本,而后者表示为文本添加下划线。
- <footer>和<cite>通常表示所包含的文本对某个参考文献的引用,区别在于后者引用的文本将以斜体显示。
例1:
缩略语:
缩略语是指在页面中使用缩写的形式表示,当鼠标指针悬停在缩写词上时会显示全部的内容,HTML5提供的<abbr>标签用来实现缩略语。
例:
为了突出显示缩略语,可以为<abbr>标签添加.initialism类,.initialism类使字体大小缩小10%,并设置字母全部大写。
引用:
如果需要在文档中引用其他来源的内容块时,可以引用块标签<blockqupte>。在引用块中,还可以嵌入<cite>、<footer>标签。
例:
二.列表
无序列表是指没有特定顺序的一组元素,使用项目符号来标识。有序列表是按照顺序排列的一组元素,使用序号来标识。
Bootstrap对这3种列表默认形式进行了细微的改动,以达到风格统一、美观的目的。
列表在默认样式下呈现缩进显示,并带有列表项符号。Bootstrap定义了.list-unstyled类样式,使用它可以移除默认的.list-style样式,并且设置左侧填充为0。
例:
如果希望列表项目水平分布,通常的做法是设置列表项的display值为inline-block。.Bootstrap4定义了两个类.list-inline类、.list-inline-item类分别作用在ul和li元素上。
例:
定义列表是一种特殊的结构,包含词条和解释两块内容,包含的标签说明如下:
可以使用网格系统预定义的类,将词条和解释水平排列。
例:
三.代码
Bootstrap中下面几个标签可以完成在网页中显示代码这个任务:
- <code>:包裹行内代码片段。注意HTML代码中尖括号要进行转义。
- <pre>:包裹多行代码。可以通过添加.pre- scrollable类,实现垂直滚动,并且设定的最大高度为340px。
- <kbd>:标记用户通过键盘输入的内容。
- <samp>:标记程序输出的内容。
- <var>:标记变量。
提示:
<code>常用于单个单词或单行句子的代码;
<pre>常用于多行代码;
<kbd>表示用户要输入的内容。在实际开发中,用户可以根据具体的需求来使用某种类型。需要注意的是,不管使用哪种编程代码风格都需要手动转义特殊符号。例如,小于号使用“<”代替,大于号使用“>”代替。
例:
四.图片
在Bootstrap 4中,通过给图片添加.img-fluid类来实现响应式效果,即图片会随着父元素一起缩放。也可以通过设置max-width:100%,height: auto样式,来实现图片响应式效果。
在浏览网页时,经常看到给图片的四周加了圆角的边框。除了CSS3提供的border-radius属性可以实现,在Bootstrap中定义了.img-thumbnail类可以使图片具有圆角且1px边界的边框样式。
在Bootstrap中,实现图片对齐主要有以下3种方式:
(1)使用浮动类.float-left、.float-right分别实现往左浮动和往右浮动。
(2)使用文本类.text-left、.text-center、.text-right,分别实现水平居左、居中和居右对齐。
(3)使用外边距类.mx-auto实现水平居中对齐,前提将<img>元素转化为块级元素。
Bootstrap中CSS通用样式——排版,列表,代码,图片相关推荐
- CSS 通用样式总结
CSS 通用样式总结 1. CSS中英文样式换行 p {/* 两边对齐 */text-align: justify;/* normal-默认 break-all-允许在单词内换行 keep-all在半 ...
- 修改bootstrap 中 CSS 样式表,以实现自己需要的部分样式。
bootstrap当中,已经自动配置好许多CSS 样式,但是,咱们可以根据自己的需要来修改相应的部分内容,实现自己想要的结果. 目前,尼玛哥在web前端开发的过程当中, 使用到了bootstrap框架 ...
- 对Bootstrap的css基础样式进行总结归纳
概览 这篇博文是对bootstrap官方文档的总结,为什么我要对它进行总结呢?哈哈,有两个原因,第一,我想复习一下bootstrap框架的知识,第二,我有点不适应官方文档说的繁琐,冗余.我想自己做一份 ...
- CSS按钮样式,带代码传送门
1. Plastic Buttons 这组按钮相当的简洁.干净.由于它们拥有不同的颜色.尺寸以及风格,并提供了小.中.大号按钮供你任意挑选.所以,你可以轻松地重新调整或更换它们.而利用纯 CSS 的实 ...
- Bootstrap中文本的样式
在Bootstrap中对文本的对有很多的关注,也给出了很多的样式,至少在我们自己写网页的时候这些可以不用再去编写这些样式,其实在之前我一直没有很好的理解类,这些其实都是类,我们给class进行赋值其实 ...
- CSS通用样式2——Flex布局
Bootstrap4与Bootstrap3最大的区别是Bootstrap 4使用弹性盒子来布局,而不是使用浮动来布局.弹性盒子也是CSS的一种新的布局模式,更适合响应式的设计. 一.定义弹性盒子 使用 ...
- bootstrap中斑马线表格样式中横线怎样去掉
今天在调bootstrap样式中的表格样式时发现怎样调整表格样式都不行,在js中jsp页面中都调节不动,其中最关键的是要调节bootstrap中的样式 问题如图所示: 可以发现每个表格tr之间都有一条 ...
- CSS通用样式3——表格
基本实例: 在网页制作中,通常会用到表格的鼠标悬停.隔行变色等功能.Bootstrap中提供了一系列表格布局样式,利用该样式可以帮助开发者快速开发出美观的表格,作用于<table>元素的表 ...
- 【web前端】CSS高级技巧(精灵图,字体图标,CSS三角,CSS用户界面样式,文字与图片垂直对齐,溢出的文字省略号显示,常见布局技巧,CSS初始化)
使用课程是黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili 目录 一.精灵图 1.为什么需要精灵图 2.精灵图( sprit ...
最新文章
- 深圳有哪些牛批的互联网公司?
- 并发编程-19AQS同步组件之重入锁ReentrantLock、 读写锁ReentrantReadWriteLock、Condition
- Vue(ts) - ref $refs 之el-input获取焦点
- MySQL中的UNIX_TIMESTAMP函数使用总结
- DIV+CSS布局的优势和弊端
- 汽车电子嵌入式技术篇(二) -autosar中的嵌入式系统函数的调用
- 登录页面html5 css3 js代码,H5+css3+js搭建带验证码的登录页面
- Scala学习笔记01:Scala概述、安装配置、简单使用
- Python3.6 所有内置函数
- Linq实战 之 Linq to Sql及Entity Framework操作详解
- cublas中执行矩阵乘法运算的函数 首先要注意的是cublas使用的是以列为主的存储方式,和c/c++中的以行为主的方式是不一样的。处理方法可参考下面的注释代码
- css叠层_CSS 理解样式层叠
- 程序性能之显示大表格
- Modelica运算符
- 一步一步教你做微博用户画像分析:Python微博爬虫+词云生成
- twitter如何以图搜图_如何从 shutterstock 下载无水印小样图
- 60行C代码实现一个shell
- Proofs for Inner Pairing Products and Applications 学习笔记
- vscode ssh遇到“过程试图写入的管道不存在”问题
- 计算机控制实验心得体会,车床实训心得体会(精选5篇)