Bootstrap【第二章】全局CSS之排版代码表格
前言：今天要学习的是Bootstrap的全局CSS之排版&代码&表格
一张图概括今天的内容：
一、排版
1.1、页面主题
1、段落突出：通过.lead类可以让段落突出显示
例如：<p class="lead">我家门前有两颗枣树</p>
1.2、标题
1.标题h1--h6和html中的效果一样
2.副标题：在<h1><small>副标题</small></h1>
3.在Bootstrap中，标题可以有副标题，副标题比正标题的字体小一点，样式有点不太一样
例如：<p class="h1">我在等风，也在等你</p>
1.3、内联文本元素
1.标记：class=”mark” (把指定的内容标记出来)
例如：I <span class="mark"> missing </span> you
被span标签包起来的文本 you 的样式被添加背景色
2.线条
1、删除：<del>like </del> OR<s>like</s>
2、下划线：<ins>like </ins> OR<u>like</u>
3.强调文本
1、小字体<small>：标准字号的85%
2、文本加粗：<strong>
3、文本倾斜：<em>
1.4、对齐
1、居左：class=”text-left”
2、居中：class=”text-center”
3、居右：class=”text-right”
注意：span标签无效！！！
1.5、改变大小写
1、大写：class=”text-uppercase”
示例代码：<span class="text-uppercase">I like you</span>
2、小写：class=”text-lowercase”
示例代码：<span class="text-lowercase">I like you</span>
3、首字母大写：class=”text-capitalize”
示例代码：<span class="text-capitalize">I like you</span>
1.6、缩略语：当鼠标悬停在缩写和缩写词上就会显示完整内容
1、基本缩略语：<abbr title=”完整内容”>
示例代码：<abbr title="超文本标记语言">HTML</abbr>
2、首字母缩略语：<abbr title=”完整内容” class=”initialism”>
示例代码：title="超文本标记语言" class="initialism">HTML</abbr>是一门超简单的网页语
注意：这两种的区别在于首字母缩略语的字体是 基本缩略语字体的90%大小
1.7、 地址：<address>会自动调整间距
示例代码：<address>家庭地址：xxx</address>
1.8、引用：类似名言名句的格式
1、默认样式的引用：<blockquote> <footer> (默认样式为左对齐)
示例代码：<blockquote>阳光正好<footer>sum</footer></blockquote>
2、右对齐样式引用：<blockquote class=”blockquote-reverse”>(靠右对齐)
示例代码：<blockquote class="blockquote-reverse">阳光正好<footer><cite>sum</cite></footer></blockquote>
1.9、列表
1、有序列表：<ol><li> 同HTML
2、无序列表：<ul><li> 同HTML
3、无样式列表：<ul class=”list-unstyled”>
示例代码：
<ul class="list-unstyled">
<li>少年不俱岁月长</li>
<li>彼方尚有荣光在</li>
</ul>
4、内联列表：<ul class=”list-inline”>，li显示在一行
示例代码：
<ul class="list-inline">
<li>月既不解饮</li>
<li>影徒随我身</li>
<li>暂伴月将影，行乐须及春</li>
</ul>
5、描述列表：<dl class=”dl-horizontal”>。 horizontal:水平
示例代码：
<dl class="dl-horizontal">
<dt>丁达尔</dt>
<dd>光效应</dd>
</dl>
效果图如下：
代码展示：
<!-- 固定容器 --><div class="container"><!-- 全局CSS样式 --><h1>一、排版</h1><h3 class="mark">1.1 段落突出</h3><p>学无止境</p><p class="lead">学无止境</p><h3 class="mark">1.2 标题</h3><h2>春天尚在场</h2><p class="h2">春天尚在场</p><h2>老师说：<small>苦尽甘来</small></h2><h3 class="mark">1.3 内联文本元素</h3><p class="mark">夏天</p><!-- 删除 <del> or <s>--><del>春秋</del> <s>冬夏</s><br /><!-- 下划线 <u> or <ins>--><u>湖南</u> <ins>洞庭湖</ins><br /><!--小字体<small> 标准字号的85% --><!--加粗<strong> 倾斜<em> --><p>明思齐</p><small>明思齐</small><strong>明思齐</strong><em>明思齐</em><h3 class="mark">1.4 对齐</h3><p>坚持不懈</p><p class="text-left">坚持不懈</p><p class="text-center">坚持不懈</p><p class="text-right">坚持不懈</p><h3 class="mark">1.5 改变大小写</h3><p>you</p><!--首字母大写<text-capitalize> 小写<text-uppercase> 大写<text-lowercase>--><p class="text-uppercase">you</p><p class="text-capitalize">you</p><p class="text-lowercase">you</p><h3 class="mark">1.6 略缩语</h3><p>hhh</p><abbr title="JavaBase">hhh</abbr><abbr title="Oracle" class="initialism">IMY</abbr><h3 class="mark">1.7 地址</h3><address>家庭地址：xxx </address><address>学校地址：xxx </address><h3 class="mark">1.8 引用</h3><!--默认引用 --><blockquote>青山不改，绿水长流<footer>lxy</footer></blockquote><!--右对齐引用 --><blockquote class="blockquote-reverse">青山不改，绿水长流<footer><cite>lxy</cite></footer></blockquote><h3 class="mark">1.9 列表</h3><!--有序列表 <ol><li> --><ol><li>宝剑锋从磨砺出</li><li>梅花香自苦寒来</li></ol><!--无序列表 <ul><li> --><ul><li>远赴人间惊鸿宴</li><li>一睹人间盛世颜</li></ul><!--无样式列表 <ul class=”list-unstyled”> --><ul class="list-unstyled"><li>远赴山海</li><li>与你共存</li></ul></div>二、代码
2.1、内联代码：通过<code>标签包裹内联样式的代码片段
示例代码：远赴山海<code>与你共存</code>
code标签包裹的内容加样式
2.2、 用户输入：通过<kbd>标签标记用户通过键盘输入的内容
示例：<kbd>他</kbd>
2.3、基本代码块：多行代码可以使用<pre>标签
示例代码：
<pre>
花间一壶酒，独酌无相亲
举杯邀明月，对影成三人
</pre>
pre标签内的内容所有的空格都会原样显示，标签内的文本编辑格式，会按照原样显示
设置pre区域显示垂直滚动条：<pre class=”pre-scrollable”>
效果图如下：
代码展示：
<h1>二、代码</h1><h3 class="mark">2.1 内联代码</h3>我们的人生<code>精彩无比</code><h3 class="mark">2.2 用户输入</h3><kbd>落霞与孤鹜齐飞</kbd><h3 class="mark">2.3 基本代码块</h3><pre class="pre-scrollable">落霞与孤鹜齐飞，秋水共长天一色。无人问津的日子里也要好好生活！</pre><h3 class="mark">2.4 程序输出</h3><p>问灵十八载，等一不归人</p><samp>问灵十八载，等一不归人</samp><hr />三、表格
3.1.基本表格：<table class=”table”>
3.2.条纹状表格：<table class=”table table-striped”> 隔行就有背景色
3.3.带边框表格：<table class=”table table-bordered”>
3.4.鼠标悬停：<table class=”table table-hover”>鼠标移动到行就会显示效果
3.5.紧缩表格：<table class=”table-condensed”>
紧缩表格，就是表格相对来说缩紧一些
3.6.状态类
1、class=”active”:鼠标悬停在行或者单元格上时设置的颜色
2、class=”success”:表示成功或积极的动作
3、 Class=”info”:表示普通的提示信息或动作
4、Class=”warning”:表示警告或需要用户注意
5、Class=”danger”:表示危险或潜在的带来负面影响的动作
3.7.响应式表格：<table class=”table”>,给包括<table>的元素添加class=”table-responsive”
效果图如下：
代码展示：其余表格，可由此代码类推
<h3 class="mark">3.7 响应式表格</h3><table class="table table-hover table-responsive"><tr class="info"><td>姓名</td><td>性别</td><td>爱好</td><td>地址</td><td>成就</td></tr><tr class="danger"><td>牛顿</td><td>男</td><td>三大定律</td><td>英国</td><td>万有引力定律</td></tr><tr class="success"><td>爱因斯坦</td><td>男</td><td>质能方程</td><td>德国</td><td>E=MC2</td></tr><tr class="warning"><td>薛定谔</td><td>男</td><td>薛定谔方程</td><td>英国</td><td>薛定谔方程</td></tr></table>本章完！！！
Bootstrap【第二章】全局CSS之排版代码表格相关推荐
- Bootstrap全局CSS之排版代码表格
排版 页面主体 Bootstrap将全局font-size设置为14px,line-height设置为20px 段落的行高设置为10px,颜色设置为#333[通过F12查看] 段落突出显示:通过.le ...
- 【QT开发笔记-基础篇】| 第二章 常用控件 | 2.12 表格控件 QTableWidget
本节对应的视频讲解:B_站_链_接 QTableWidget 是 Qt 中的表格控件,可以行列的形式来展示数据 1. 属性和方法 QTableWidget 有很多属性和方法,完整的可查看帮助文档. 在 ...
- Bootstrap_02_全局CSS之排版、代码、表格
目录 1.排版 1.1.页面主体 1.2.标题 1.3.内联文本元素 1.3.1.标记:class="mark" 1.3.2.线条:删除线.下划线 1.3.3.强调文本:小字体.文 ...
- Bootstrap全局css样式_代码
内联代码 通过 <code> 标签包裹内联样式的代码片段.<!DOCTYPE html> <html lang="en"> <head&g ...
- 使用BootStrap框架设置全局CSS样式
一.排版 标题 HTML 中的所有标题标签,<h1> 到 <h6> 均可使用.另外,还提供了 .h1 到 .h6 类,为的是给内联(inline)属性的文本赋予标题的样式. & ...
- Head First Python 学习笔记（第二章：分享你的代码）
共享你的代码 Python提供了一组技术,可以很容易地实现共享,这包括模块和一些发布工具: 模块允许你合力组织代码来实现最优共享. 发布工具允许你向全世界共享你的模块. 函数转换为模块 1.把第一章中 ...
- Python快速编程入门#学习笔记03# |第二章 ：Python基础（代码格式、标识符关键字、变量和数据类型、数字类型以及运算符）
全文目录 ==先导知识== 学习目标: 2.1 代码格式 2.1.1 注释 2.1.2 缩进 2.1.3 语句换行 2.2 标识符和关键字 2.2.1 标识符 2.2.2 关键字 2.3 变量和数据类 ...
- 前端第二章：8.HTML超链接代码写法；id属性
一.超链接介绍 0.超链接 是 行内元素,但是可以放 块元素 1.从一个页面跳转到另一个页面 2.或者跳转到当前页面的其他位置 3.href 属性的值可以是 外部网站,也可以是同一个目录下的地址文件, ...
- 【hadoop生态之ZooKeeper】第二章Zookeeper安装【笔记+代码】
二.Zookeeper安装 2.1 本地模式安装部署 1)安装前准备: (1)安装jdk (2)上传zookeeper到linux系统下 (3)修改tar包权限 [hadoop@ikeng softw ...
最新文章
- 2019年值得关注的九个AI创业风口
- oracle循环的方式,Oracle 的几种循环方式介绍
- 关于解决form表单记录上次保存填写记录清空
- 熵权法excel计算过程_翅片式蒸发器如何最简单的进行计算和仿真？
- Log4j 2漏洞(CVE-2021-44228)的快速响应
- 归约操作java8_使用Java 8进行分组，转换和归约
- php cookie 字串,php入门(字符串,cookie,session)
- 番茄花园win11 32位专业版镜像系统v2021.07
- WebForm-博客园-1.0-账户模块(Passport)-登录与注册
- 初识Spring Security
- 【转】socket提交http表单 [C++]
- MongoDB 的设计模式策略
- 190819每日一句
- 二级c语言上机题库下载,二级C语言上机题库(全).doc
- SQL必知必会阅读笔记
- 微信android支持版本,兼容安卓4.2.2版本安装哪个版本微信!微信支持版本是什么版本吗...
- [node] 对某网站的简单爬虫
- 图片前后旋转（头像前后旋转）
- 输入框过滤表情和颜文字
- EFR32BG22性能