Bootstrap 初步

最新推荐文章于 2024-11-28 12:12:55 发布

ac601458466

最新推荐文章于 2024-11-28 12:12:55 发布

阅读量625

点赞数

CC 4.0 BY-SA版权

分类专栏： Bootstrap 文章标签： bootstrap class

本文链接：https://blog.csdn.net/ac601458466/article/details/49200877

Bootstrap 专栏收录该内容

4 篇文章

订阅专栏

本文深入探讨Bootstrap中表格和文本样式的应用，包括基础表格、斑马线表格、带边框表格、鼠标悬浮高亮表格、紧凑型表格及响应式表格的实现方法。同时，阐述如何使用文本样式如加粗、斜体、强调类名以及文本对齐风格，以及列表、描述列表和水平描述列表的创建。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一章

p或者.p用于段落标签

<p></p> <div class="p"></div>

.lead则属于p的异类，为加强型突出的文字，.lead本身是定义是一个块级的标签样式，所以它不应该是在行内加强，而是单独作为一个段落标签,
如果想让一个段落p突出显示，可以通过添加类名“.lead”实现，其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理

<p class="lead"></p>

除此之外，Bootstrap还通过元素标签:、、和给文本做突出样式处理。

b,strong {
  font-weight: bold; /*文本加粗*/
}
small,.small {
  font-size: 85%; /*标准字体的85%,也就是14px * 0.85px，差不多12px*/
  /* small之前也用于hx标签时候其font-size有改变 */
}

粗体就是给文本加粗，在普通的元素中我们一般通过font-weight设置为bold关键词给文本加粗。在Bootstrap中，可以使用和标签让文本直接加粗。

b,strong {
  font-weight: bold; /*文本加粗*/
}

斜体：在排版中，除了用加粗来强调突出的文本之外，还可以使用斜体。斜体类似于加粗一样，除了可以给元素设置样式font-style值为italic实现之外，在Bootstrap中还可以通过使用标签或来实现。

在Bootstrap中除了使用标签
<*strong>、<*em> - - - 通过形态来定义突出- - -
等说明正文某些字词、句子的重要性，Bootstrap还定义了一套类名，这里称其为强调类名（类似前面说的“.lead”）,这些强调类都是通过- - - 颜色 - - -来表示强调，具本说明如下：
样式为color

    .text-muted：提示，使用浅灰色（#999）
    .text-primary：主要，使用蓝色（#428bca）
    .text-success：成功，使用浅绿色(#3c763d)
    .text-info：通知信息，使用浅蓝色（#31708f）
    .text-warning：警告，使用黄色（#8a6d3b）
    .text-danger：危险，使用褐色（#a94442）

文本对齐风格
在排版中离不开文本的对齐方式。在CSS中常常使用text-align来实现文本的对齐风格的设置。其中主要有四种风格：

☑ 左对齐，取值left

☑ 居中对齐，取值center

☑ 右对齐，取值right

☑ 两端对齐，取值justify

为了简化操作，方便使用，Bootstrap通过定义四个类名来控制文本的对齐风格：

☑ .text-left：左对齐

☑ .text-center：居中对齐

☑ .text-right：右对齐

☑ .text-justify：两端对齐

.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-justify {
text-align: justify;
}

列表–简介
Bootstrap根据平时的使用情形提供了六种形式的列表：

☑ 普通列表

☑ 有序列表

☑ 去点列表

☑ 内联列表

☑ 描述列表

☑ 水平描述列表

Bootstrap对于列表，只是在margin上做了一些调整

① 无序列表，有序列表

/* 保留了列表的项目符号
   为了项目列表的美观，保留了ul的padding-left值 */
ul,
ol {
  margin-top: 0;
  margin-bottom: 10px;
}/* 对于列表，margin的top归零，而底部则10px保留 */
ul ul,
ol ul,
ul ol,
ol ol {
  margin-bottom: 0;/*列表嵌套列表，内部的列表的margin全为0*/
}

②列表–去点列表
在Bootstrap中默认情况下无序列表和有序列表是带有项目符号的，但在实际工作中很多时候，我们的列表是不需要这个编号的，比如说用无序列表做导航的时候。Bootstrap为众多开发者考虑的非常周道，通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格。

.list-unstyled {/* 该属性无继承性 */
padding-left: 0;
list-style: none;
}

③ 列表-内联列表
Bootstrap像去点列表一样，通过添加类名“.list-inline”来实现内联列表，简单点说就是把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。也可以说内联列表就是为制作水平导航而生。

.list-inline {
padding-left: 0;
margin-left: -5px;/*因为li有左补白5px，这是为了使得li的左补白消失，第一个li在ul中靠左显示*/
list-style: none;
}
.list-inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}

④ 水平定义列表（在宽度大于728px的时候触发）
水平定义列表就像内联列表一样，Bootstrap可以给

添加类名“.dl-horizontal”给定义列表实现水平显示效果。

@media (min-width: 768px) {
.dl-horizontal dt {
float: left;
width: 160px;
overflow: hidden;
clear: left;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
  }
.dl-horizontal dd {
margin-left: 180px;
  }
}

如果要实现横向的dd排列，给dd加上浮动，且dd的浮动的总高度小于dt的高度，这样dd只能在右边浮动，而不能出现在dt的底部。瀑布流。

表格

/** ————
注意我们之前看表格没有随着页面窗口变化而变化的，这是因为表格是默认根据内容多少而进行扩张的，当你设置了宽度时，表格便根据宽度呈现，当你设置宽度为100%；表格则根据父容器呈现宽度自适应变化。

用父div display:table + 子div display:table-cell 也可以模仿出div，当富容器的宽度为100%时子盒子平分宽度。

th/tr 的相邻单元格上下边框会重叠，所以th的下边框可以覆盖td的上边框。table的边框和th/tr的边框都重叠
————- **/

表格是Bootstrap的一个基础组件之一，Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格
主要包括：

☑ .table：基础表格

☑ .table-striped：斑马线表格

☑ .table-bordered：带边框的表格

☑ .table-hover：鼠标悬停高亮的表格

☑ .table-condensed：紧凑型表格

☑ .table-responsive：响应式表格

表格–表格行的类( tr的类 )
Bootstrap还为表格的行元素提供了五种不同的类名，每种类名控制了行的不同背景颜色 tr.className td/th {background：color}
这里写图片描述

（table的类）
基础表格
对于基础表格是通过类名“.table”来控制。如果在<*table>元素中不添加任何类名，表格是无任何样式效果的。想得到基础表格，我们只需要在<*table>元素上添加“.table”类名，就可以得到Bootstrap的基础表格

“.table”主要有三个作用：

☑ 给表格设置了margin-bottom:20px以及设置单元内距。
注意：table 默认是没有margin的*

☑ 在thead底部设置了一个2px的浅灰实线

☑ 每个单元格顶部设置了一个1px的浅灰实线

表格–斑马线表格
时候为了让表格更具阅读性，需要将表格制作成类似于斑马线的效果。简单点说就是让表格带有背景条纹效果。在Bootstrap中实现这种表格效果并不困难，只需要在<-table class=”table”>的基础上增加类名“.table-striped”即可，给表格加类名。

表格–带边框的表格
基础表格仅让表格部分地方有边框，但有时候需要整个表格具有边框效果。Bootstrap出于实际运用，也考虑这种表格效果，即所有单元格具有一条1px的边框。
Bootstrap中带边框的表格使用方法和斑马线表格的使用方法类似，只需要在基础表格

基础上添加一个“.table-bordered”类名即可

表格–鼠标悬浮高亮的表格
当鼠标悬停在表格的行上面有一个高亮的背景色，这样的表格让人看起来就是舒服，时刻告诉用户正在阅读表格哪一行的数据。Bootstrap的确没有让你失望，他也考虑到这种效果，其提供了一个“.table-hover”类名来实现这种表格效果。
鼠标悬停高亮的表格使用也简单，仅需要<.table class=”table”>元素上添加类名“table-hover”即可，加给table标签
为tr加上HOVER状态而已！！

.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
background-color: #f5f5f5;/* 是tr:hover */
}

表格–紧凑型表格
谓紧凑型表格，简单理解，就是单元格没内距或者内距较其他表格的内距更小。换句话说，要实现紧凑型表格只需要重置表格单元格的内距padding的值。那么在Bootstrap中，通过类名“table-condensed”重置了单元格内距值。
紧凑型表格的运用，也只是需要在<.table class=”table”>基础上添加类名“table-condensed“
从上面效果图可以看出，Bootstrap中紧凑型的表格与基础表格差别不大，因为只是将单元格的内距由8px调至5px。

.table-condensed > thead > tr > th,
.table-condensed > tbody > tr > th,
.table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td,
.table-condensed > tbody > tr > td,
.table-condensed > tfoot > tr > td {
padding: 5px;
}

表格–响应式表格
Bootstrap提供了一个容器，并且此容器设置类名“.table-responsive”,此容器就具有响应式效果，然后将

置于这个容器当中，这样表格也就具有响应式效果。
Bootstrap中响应式表格效果表现为：当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时，表格底部水平滚动条就会消失。

——————————————————————————————————
在Bootstrap中制作表格中，可以将上面几种表格样式结合在一起使用，从而制作出更为精美的表格。结合的方法也很简单，就是在

基础上添加你需要的表格样式类型。

另外从上面的示例中大家可能也发现了，不管制作哪种表格都离不开类名“table”。所以大家在使用Bootstrap表格时，千万注意，你的

元素中一定不能缺少类名“table”。