bootstrap框架学习笔记一（模板，排版-段落-列表-表格部分）

最新推荐文章于 2021-06-08 14:56:52 发布

原创最新推荐文章于 2021-06-08 14:56:52 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #框架

web前端专栏收录该内容

18 篇文章

订阅专栏

本文详细介绍了Bootstrap框架的基本模板、排版设置，包括标题、段落、列表和表格的样式与用法。讲解了如何创建不同类型的列表，如无点列表和内联列表，以及表格的各种样式，如斑马线、边框和响应式表格。

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

基本的bootstrap模板

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap的HTML标准模板</title>   
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <!--你自己的样式文件 -->
        <link href="css/your-style.css" rel="stylesheet">        
        <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <h1>Hello, world!</h1>

        <!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
        <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
        <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
    </body>
</html>

排版

标题一
这里写图片描述
1、重新设置了margin-top和margin-bottom的值， h1~h3重置后的值都是20px；h4~h6重置后的值都是10px。
2、所有标题的行高都是1.1（也就是font-size的1.1倍）,而且文本颜色和字体都继承父元素的颜色和字体。
3、固定不同级别标题字体大小，h1=36px，h2=30px，h3=24px，h4=18px，h5=14px和h6=12px。
标题二
使用了标签来制作副标题！
1、行高都是1，而且font-weight设置了normal变成了常规效果（不加粗），同时颜色被设置为灰色（#999）。
2、由于内的文本字体在h1~h3内，其大小都设置为当前字号的65%；而在h4~h6内的字号都设置为当前字号的75%；
段落
1、全局文本字号为14px(font-size)；
2、行高为1.42857143（line-height），大约是20px（小数是通过sass计算出来的）；
3、颜色为深灰色（#333）；
4、字体为”Helvetica Neue”, Helvetica, Arial, sans-serif;（font-family）。
bootstrap.css源码第274行~280行：

body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}

bootstrap.css源码第467行~469行：

p {
 margin: 0 0 10px;
}

强调内容
如果想让一个段落p突出显示，可以通过添加类名“.lead”实现，其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。

<p>我是普通文本，我的样子长成这样我是普通文本，我的样子长成这样我是普通文本，</p>
<p class="lead">我是特意要突出的文本，我的样子成这样。我是特意要突出的文本，我的样子长成这样。</p>

粗体

<strong>强调</strong>

斜体

<em>Bootstrap</em>
<i>Bootstrap</i>

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

他在bootstrap.css源码中也就是变了个颜色！

<div class="text-muted">.text-muted 效果</div>
<div class="text-primary">.text-primary效果</div>
<div class="text-success">.text-success效果</div>
<div class="text-info">.text-info效果</div>
<div class="text-warning">.text-warning效果</div>
<div class="text-danger">.text-danger效果</div>

文本对齐
Bootstrap通过定义四个类名来控制文本的对齐风格：

☑ .text-left：左对齐

☑ .text-center：居中对齐

☑ .text-right：右对齐

☑ .text-justify：两端对齐

<p class="text-left">我居左</p>
<p class="text-center">我居中</p>
<p class="text-right">我居右</p>
<p class="text-justify">.css file. </p>

列表

在样式方面bootstrap只是做了轻微的调整。
去点列表
给无序列表添加一个类名“.list-unstyled”。

<ol>
    <li>有序项目列表一</li>
    <li>有序项目列表二
        <ol class="list-unstyled">
            <li>有序二级项目列表一</li>
            <li>有序二级项目列表二
                <ul>
                    <li>无序三级项目列表一</li>
                    <li>无序三级项目列表二
                        <ul class="list-unstyled">
                            <li>无序四级项目列表一</li>
                            <li>无序四级项目列表二</li>
                        </ul>
                    </li>
                    <li>无序三级项目列表三</li>
                </ul>
            </li>
            <li>有序二级项目列表三</li>
        </ol>
    </li>
    <li>有序项目列表三</li>
</ol>

这里写图片描述
内联列表
添加类名“.list-inline”来实现内联列表，简单点说就是把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。

<ul class="list-unstyled">
    <li>
       城市：
       <ul class="list-inline">
          <li>北京</li>
          <li>上海</li>
          <li>南京</li>
          <li>厦门</li>
      </ul>
    </li>
</ul>

这里写图片描述
定义列表
只是调整了行间距，外边距和字体加粗效果。
参考代码：

<dl>
     <dt>北京</dt>
     <dd>北京是中国的首都，是政治文化集中地</dd>
     <dt>上海</dt>
     <dd>上海号称东方的巴黎</dd>
</dl>

这里写图片描述
水平定义列表
给

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

<dl class="dl-horizontal">
     <dt>标题一：</dt>
     <dd>描述内容</dd>
     <dt>标题二：</dt>
     <dd>描述内容</dd>
</dl>

这里写图片描述

表格

Bootstrap为表格不同的样式风格提供了不同的类名，主要包括：

☑ .table：基础表格

☑ .table-striped：斑马线表格

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

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

☑ .table-condensed：紧凑型表格

☑ .table-responsive：响应式表格

表格行的类

这里写图片描述
基础表格
基础表格是通过类名“.table”来控制。
“.table”主要有三个作用：

☑ 给表格设置了margin-bottom:20px以及设置单元内距

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

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

<table class="table">
…
</table>

这里写图片描述
斑马线表格
让表格带有背景条纹效果，只需要在

的基础上增加类名“.table-striped”即可。

<table class="table table-striped">
…
</table>

这里写图片描述
带边框的表格
在基础表格

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

<table  class="table table-bordered">
  …
</table>

这里写图片描述
悬浮高亮的表格
当鼠标悬停在表格的行上面有一个高亮的背景色~
在基础表格

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

<table class="table table-hover">
…
</table>

这里写图片描述
紧凑型表格
就是单元格没内距或者内距较其他表格的内距更小。在Bootstrap中，通过类名“table-condensed”重置了单元格内距值。
只是需要在

基础上添加类名“table-condensed”即可。

<table class="table table-condensed">
…
</table>

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

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

<div class="table-responsive">
<table class="table table-bordered">
   …
</table>
</div>

宽屏效果：

窄屏效果：
这里写图片描述