1.8.2.右对齐样式引用:
（靠右对齐）

1.9.列表

1.9.1.有序列表：
同HTML

1.9.2.无序列表：
同HTML

1.9.3.无样式列表：
,去掉li前面的点

1.9.4内联列表：
，li显示在一行

1.9.5.描述列表：
horizontal:水平

2.代码

2.1.内联代码：通过标签包裹内联样式的代码片段

2.2.用户输入：通过标签标记用户通过键盘输入的内容

2.3.基本代码块：多行代码可以使用
标签
2.4.设置pre区域显示垂直滚动条：
3.表格

3.1.基本表格：

        3.2.条纹状表格：

        3.3.鼠标悬停：

        3.4.紧缩表格：

        3.6.状态类

                3.6.1.class=”active”:鼠标悬停在行或者单元格上时设置的颜色

        3.7.响应式表格：

,给包括 的元素添加class=”table-responsive”

1.排版

1.1.页面主体

Bootstrap讲全局font-size设置为14px,line-height设置为20px，段落的行高设置为10px，颜色设置为#333，我们可以通过在页面按F12查看body的样式。

段落突出：通过.lead类可以让段落突出显示：代码如下
<p>略略略</p>普通段落
<p class="lead">略略略</p>段落突出显示
效果图如下：

不难看出突出显示的“略略略”字体更大

1.2.标题

1.标题h1--h6和html中的效果一样

2.副标题：在<h1><small>副标题</small></h1>

在Bootstrap中，标题可以有副标题，副标题比正标题的字体小一点，样式有点不太一样

3.样式：class=”h1”...class=”h6”在Bootstrap中h1- h6可以作为class的样式效果和直接写h1-h6的标题标签效果一样

代码如下：
1》<h1>666</h1> --普通标题标签
2》<h1>静夜思   --普通标题标签<small>李白</small> --副标签</h1>
3》<p class="h1">666</p> --用class样式从大到小<p class="h2">666</p><p class="h3">666</p><p class="h4">666</p><p class="h5">666</p><p class="h6">666</p>
效果图如下：

1.3.内联文本元素

1.3.1.标记：class="mark"

标记，把指定的内容标记出来。示例如下:
<p class="mark">略略略</p>
1.3.2.线条：删除线、下划线
1》：<del>小肖</del>或者<s>小李</s> --删除线
2》：<ins>小陈</ins>或者<u>小向</u> --下划线
1.3.3.强调文本：小字体、文本加粗、文本倾斜
1》<small>小罗</small> --小字体
2》<em>小罗</em> --文本倾斜
3》<strong><em>小陈</strong></em> --文本加粗、加倾斜

1.4.对齐

1.4.1.居左：class=”text-left”
<p class="text-left">人生</p>
1.4.2.居中：class=”text-center”
<p class="text-center">就像打电话</p>
1.4.3.居右：class=”text-right”
<p class="text-right">不是你先gua</p>
注意：span标签无效

1.5.改变大小写

1.5.1.大写：class=”text-uppercase”
<span class="text-uppercase"> 就是我先gua</span><br />
1.5.2.小写：class=”text-lowercase”
<span class="text-lowercase"> 就是我先gua</span><br />
1.5.3.首字母大写：class=”text-capitalize”
<span class="text-capitalize">就是我先gua</span><br />

1.6.缩略语：当鼠标悬停在缩写和缩写词上就会显示完整内容

1.6.1.基本缩略语：<abbr title=”完整内容”>
<abbr title="超文本标记语言">HTML</abbr>是一门超简单的网页语言<br>
1.6.2.首字母缩略语：<abbr title=”完整内容” class=”initialism”>
<abbr title="超文本标记语言" class="initialism">HTML</abbr>是一门超简单的网页
注意：这两种的区别在于首字母缩略语的字体是基本缩略语字体的90%大小

1.7.地址

1.7.1.地址：<address>（会自动调整间距）
<address>家庭地址：浪琴湾</address>
<address>公司地址：梅溪湖</address>

1.8.引用：类似名言名句的格式

1.8.1.默认样式的引用：<blockquote> <footer>
<blockquote>成长比成功更重要<footer>村花</footer></blockquote>
1.8.2.右对齐样式引用:<blockquote class=”blockquote-reverse”>（靠右对齐）
<blockquote class="blockquote-reverse">成长比成功更重要<footer><cite>村花</cite></footer></blockquote>

1.9.列表

1.9.1.有序列表：<ol><li> 同HTML

1.9.2.无序列表：<ul><li> 同HTML

1.9.3.无样式列表：<ul class=”list-unstyled”>,去掉li前面的点
<ul class="list-unstyled"><li>床前明月光</li><li>疑是地上霜</li><li>举头望明月</li><li>低头思故乡</li>
</ul>
1.9.4内联列表：<ul class=”list-inline”>，li显示在一行
<ul class="list-inline"><li>月既不解饮</li><li>影徒随我身</li><li>暂伴月将影，行乐须及春</li>
</ul>
1.9.5.描述列表：<dl class=”dl-horizontal”> horizontal:水平
<dl class="dl-horizontal"><dt>首页</dt><dd>这是首页的信息</dd><dt>OPPO</dt><dd>OPPO Find X5</dd>
</dl>

2.代码

2.1.内联代码：通过<code>标签包裹内联样式的代码片段

花间一壶酒，独酌无相亲。<code>举杯邀明月，</code>对影成三人。

2.2.用户输入：通过<kbd>标签标记用户通过键盘输入的内容

<kbd>什么？我不李姐</kbd>

2.3.基本代码块：多行代码可以使用<pre>标签

<pre>床前明月光，疑是地上霜。举头望明月，低头思故乡。
</pre>
注意：pre标签内的内容所有的空格都会原样显示，标签内的文本编辑格式，会按照原样显示

2.4.设置pre区域显示垂直滚动条：<pre class=”pre-scrollable”>

<pre class="pre-scrollable">床前明月光疑是地上霜举头望明月低头思故乡
</pre>

3.表格

3.1.基本表格：<table class=”table”>

现在的表格是没有任何样式，没有边框没有对齐方式的

                   <table class=”table”><tr><td>编号</td><td>姓名</td><td>性别</td><td>年龄</td></tr><tr><td>1</td><td>张三</td><td>男</td><td>18</td></tr><tr><td>2</td><td>李四</td><td>男</td><td>18</td></tr><tr><td>3</td><td>王二</td><td>男</td><td>18</td></tr><tr><td>4</td><td>麻子</td><td>男</td><td>18</td></tr></table><table>

现在再看效果，自动铺满，对齐，标题加粗，添加分割线

3.2.条纹状表格：<table class=”table table-striped”>

                <table class="table table-striped"><tr><td>编号</td><td>姓名</td><td>性别</td><td>年龄</td></tr><tr><td>1</td><td>张三</td><td>男</td><td>18</td></tr><tr><td>2</td><td>李四</td><td>男</td><td>18</td></tr><tr><td>3</td><td>王二</td><td>男</td><td>18</td></tr><tr><td>4</td><td>麻子</td><td>男</td><td>18</td></tr></table>

隔行就有背景色

3.3.鼠标悬停：<table class=”table table-hover”>

                       <table class="table table-hover"><tr><td>编号</td><td>姓名</td><td>性别</td><td>年龄</td></tr><tr><td>1</td><td>张三</td><td>男</td><td>18</td></tr><tr><td>2</td><td>李四</td><td>男</td><td>18</td></tr><tr><td>3</td><td>王二</td><td>男</td><td>18</td></tr><tr><td>4</td><td>麻子</td><td>男</td><td>18</td></tr></table>

我鼠标放在了编号为二的哪一行上面，可以看到哪一行微微变灰了，这就是鼠标悬停

3.4.紧缩表格：<table class=”table-condensed”>

               <table class="table table-condensed"><tr><td>编号</td><td>姓名</td><td>性别</td><td>年龄</td></tr><tr><td>1</td><td>张三</td><td>男</td><td>18</td></tr><tr><td>2</td><td>李四</td><td>男</td><td>18</td></tr><tr><td>3</td><td>王二</td><td>男</td><td>18</td></tr><tr><td>4</td><td>麻子</td><td>男</td><td>18</td></tr></table>

顾名思义紧缩表格，就是表格相对来说缩紧一些，仔细看行的上下两条线是不是缩紧了

3.6.状态类

3.6.1.class=”active”:鼠标悬停在行或者单元格上时设置的颜色

            <table class="table table-hover"> <tr class="active"> --鼠标悬停在行或者单元格上时设置的颜色 灰色<td>1</td><td>张三</td><td>男</td><td>18</td></tr><tr class="success"> --表示成功或积极的动作 绿色<td>2</td><td>李四</td><td>男</td><td>18</td></tr><tr class="info"> --表示普通的提示信息或动作 蓝色<td>3</td><td>王二</td><td>男</td><td>18</td></tr><tr class="warning"> --表示警告或需要用户注意 黄色<td>4</td><td>麻子</td><td>男</td><td>18</td></tr><tr class="danger"> --表示危险或潜在的带来负面影响的动作 红色<td>5</td><td>老六</td><td>男</td><td>18</td></tr></table>

上两组图片对比一波

我把鼠标放在了编号为4的那一列，变化不是很明显，但是也可以看出它的背景色比上一张的要深

3.7.响应式表格：<table class=”table”>,给包括<table>的元素添加class=”table-responsive”

            <table class="table table-hover"><tr class="table table-responsive"><td>1</td><td>张三</td><td>男</td><td>18</td></tr><tr class="table table-responsive"><td>2</td><td>李四</td><td>男</td><td>18</td></tr><tr class="table table-responsive"><td>3</td><td>王二</td><td>男</td><td>18</td></tr><tr class="table table-responsive"><td>4</td><td>麻子</td><td>男</td><td>18</td></tr></table>

继续上两组图片对比一波

响应式是Bootstrap的最大特点。响应式表格会根据页面缩小，去掉最后一行最下面边框

以上就是今天小菜鸡分享的所有关于Bootstrap的内容了，下期再会

既然选择了远方，便只顾风雨兼程

——小菜鸡的日常

Bootstrap_02_全局CSS之排版、代码、表格相关推荐

Bootstrap【第二章】全局CSS之排版代码表格
前言:今天要学习的是Bootstrap的全局CSS之排版&代码&表格一张图概括今天的内容: 一.排版 1.1.页面主题 1.段落突出:通过.lead类可以让段落突 ...
Bootstrap全局CSS之排版代码表格
排版页面主体 Bootstrap将全局font-size设置为14px,line-height设置为20px 段落的行高设置为10px,颜色设置为#333[通过F12查看] 段落突出显示:通过.le ...
Bootstrap全局css样式_代码
内联代码通过 <code> 标签包裹内联样式的代码片段.<!DOCTYPE html> <html lang="en"> <head&g ...
bootstrap起步全局css样式概览全局css样式_栅格全局css样式_排版
http://www.bootcss.com/基本模板 https://v3.bootcss.com/getting-started/#template bootstrap起步 <!DOCTYP ...
css怎么设置table表格的边框为单线边框？（代码详解）
table表格边框怎么设置为单线边框?本篇文章就给大家介绍一种css设置table表格的边框为单线边框的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 首先我们来看看给tabl ...
Bootstrap学习笔记02【全局CSS样式、组件和插件、案例_黑马旅游网_首页】
Java后端学习路线笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...
css表格文本居中的指令,CSS似乎无法在表格单元中居中文本
我使用所有此代码,因为它正在更改现有网站的行为和外观,所以我无法触及代码结构(请参阅HTML).我所能碰到的只有CSS(也就是为什么你看到这么多!重要,覆盖) 现在我遇到的问题是我似乎无法将tabe- ...
前端：CSS/15/全局CSS设置,常用的兼容性调试技巧,CSSHACK
全局CSS设置 1,清除所有的标记的内外边距 body,ul,li,a,img,p,input{margin:0;padding:0;} 2,去除项目符号或编号前面的符号 ul,ol,li{list- ...
html table 转置,jQuery+CSS实现的table表格行列转置功能示例
本文实例讲述了jQuery+CSS实现的table表格行列转置功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: www.ddpool.cn jQuery行列转置 table ...

Bootstrap_02_全局CSS之排版、代码、表格

目录

1.排版

1.1.页面主体

1.2.标题

1.3.内联文本元素

1.3.1.标记：class="mark"

1.3.2.线条：删除线、下划线

1.3.3.强调文本：小字体、文本加粗、文本倾斜

1.4.对齐

1.4.1.居左：class=”text-left”

1.4.2.居中：class=”text-center”

1.4.3.居右：class=”text-right”

1.5.改变大小写

1.5.1.大写：class=”text-uppercase”

1.5.2.小写：class=”text-lowercase”

1.5.3.首字母大写：class=”text-capitalize”

1.6.缩略语：当鼠标悬停在缩写和缩写词上就会显示完整内容

1.6.1.基本缩略语：<abbr title=”完整内容”>

1.6.2.首字母缩略语：<abbr title=”完整内容” class=”initialism”>

1.7.地址

1.7.1.地址：<address>（会自动调整间距）

1.8.引用：类似名言名句的格式

1.8.1.默认样式的引用：<blockquote> <footer>

1.8.2.右对齐样式引用:<blockquote class=”blockquote-reverse”>（靠右对齐）

1.9.列表

1.9.1.有序列表：<ol><li> 同HTML

1.9.2.无序列表：<ul><li> 同HTML

1.9.3.无样式列表：<ul class=”list-unstyled”>,去掉li前面的点

1.9.4内联列表：<ul class=”list-inline”>，li显示在一行

1.9.5.描述列表：<dl class=”dl-horizontal”> horizontal:水平