bootstrap框架（二）：全局css样式（上）

最新推荐文章于 2023-11-07 17:07:55 发布

凤求凰的博客

最新推荐文章于 2023-11-07 17:07:55 发布

阅读量325

点赞数 2

分类专栏： # 前端文章标签： bootstrap

本文链接：https://blog.csdn.net/weixin_44571270/article/details/107386743

版权

前端专栏收录该内容

31 篇文章 4 订阅

订阅专栏

下面是小凰凰的简介，看下吧！
💗人生态度：珍惜时间，渴望学习，热爱音乐，把握命运，享受生活
💗学习技能：网络 -> 云计算运维 -> python全栈( 当前正在学习中)
💗您的点赞、收藏、关注是对博主创作的最大鼓励，在此谢过！
有相关技能问题可以写在下方评论区，我们一起学习，一起进步。
后期会不断更新python全栈学习笔记，秉着质量博文为原则，写好每一篇博文。

我们强烈建议你对这些实例按照自己的需求进行修改，而不要简单的复制、粘贴。

一、栅格系统

1、栅格系统展示

一般常用的栅格系统为12列和16列！下面展示的皆是12列栅格系统！
先看下栅格系统成品：
在这里插入图片描述
三个格子，一个格子四列！我们再拿bootstrap官网看下网页缩小的变化：

在这里插入图片描述它可以根据窗口大小调整每一行的格子数！这就是栅格系统！

2、栅格系统参数

在这里插入图片描述

3、栅格系统的实现

（1）基本实现

记得导入bootstrap、jq！

<div class="container"> //就是给左右加个padding让子div往中间收缩一下
	<div class="row"> // 表示此div里的每个元素在一个行里
	    <div class="col-lg-3"> // 在屏幕大于1200的时候，此格子占三列
	        点赞、评论、关注三连，感谢各位小伙伴的支持，博文质量我会始终如一
	    </div>
	    <div class="col-lg-3">
	        点赞、评论、关注三连，感谢各位小伙伴的支持，博文质量我会始终如一
	    </div>
	    <div class="col-lg-3">
	        点赞、评论、关注三连，感谢各位小伙伴的支持，博文质量我会始终如一
	    </div>
	    <div class="col-lg-3">
	        点赞、评论、关注三连，感谢各位小伙伴的支持，博文质量我会始终如一
	    </div>
	</div>
</div>

效果：
在这里插入图片描述

（2）流式布局容器

将最外面的布局元素 .container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局。

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

在这里插入图片描述

（3）实现响应式布局

在看下面的时候顺便注意一下，最外层div的class的值，并看下流式布局和容器布局的区别！
在这里插入图片描述我们可以看到网页窗口一变小就会造成恢复原样！下面代码可以解决：

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
            点赞、评论、关注三连，感谢各位小伙伴的支持，博文质量我会始终如一
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
            点赞、评论、关注三连，感谢各位小伙伴的支持，博文质量我会始终如一
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
            点赞、评论、关注三连，感谢各位小伙伴的支持，博文质量我会始终如一
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
            点赞、评论、关注三连，感谢各位小伙伴的支持，博文质量我会始终如一
        </div>
    </div>
</div>

效果如下：
在这里插入图片描述但是我们这个内容外面木有小框框，不好看为此我为代码加上thumbnail:

<div class="container">
    <div class="row">
    // 注意：不要再下面这个div的class里面加thumbnail，这样框框之间就没有30px间距
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
            <div class="thumbnail">
                点赞、评论、关注三连，感谢各位小伙伴的支持，博文质量我会始终如一
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
            <div class="thumbnail">
                点赞、评论、关注三连，感谢各位小伙伴的支持，博文质量我会始终如一
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
            <div class="thumbnail">
                点赞、评论、关注三连，感谢各位小伙伴的支持，博文质量我会始终如一
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
            <div class="thumbnail">
                点赞、评论、关注三连，感谢各位小伙伴的支持，博文质量我会始终如一
            </div>
        </div>
    </div>
</div>

效果如下：
在这里插入图片描述

二、排版

1、页面主体

Bootstrap 将全局 font-size 设置为 14px，line-height 设置为 1.428。这些属性直接赋予 <body> 元素和所有段落元素。另外，<p> （段落）元素还被设置了等于 1/2 行高（即 10px）的底部外边距（margin）。

2、中心内容

通过添加 .lead 类可以让段落突出显示。

<p class="lead">点赞、评论、关注三连，感谢各位小伙伴的支持，博文质量我会始终如一</p>

在这里插入图片描述

3、内联文本元素

（1）Marked text

<mark>点赞、评论、关注三连</mark>，感谢各位小伙伴的支持，博文质量我会始终如一

在这里插入图片描述

（2）被删除的文本

对于被删除的文本使用 <del> 标签。

<del>点赞、评论、关注三连，感谢各位小伙伴的支持，博文质量我会始终如一</del>

在这里插入图片描述

（3）带下划线的文本

为文本添加下划线，使用 <u> 标签。

<u>点赞、评论、关注三连</u>，感谢各位小伙伴的支持，博文质量我会始终如一

在这里插入图片描述

（4）小号文本

对于不需要强调的inline或block类型的文本，使用 <small> 标签包裹，其内的文本将被设置为父容器字体大小的 85%

点赞、评论、关注三连，<small>感谢各位小伙伴的支持，博文质量我会始终如一</small>

在这里插入图片描述

（5）加粗

<strong>点赞、评论、关注三连</strong>，感谢各位小伙伴的支持，博文质量我会始终如一

在这里插入图片描述

（6）斜体

<em>点赞、评论、关注三连</em>，感谢各位小伙伴的支持，博文质量我会始终如一

在这里插入图片描述（7）文本对齐

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>

在这里插入图片描述

（8）引用

<div class="thumbnail">
    <blockquote>点赞、评论、关注三连</blockquote>
    感谢各位小伙伴的支持，博文质量我会始终如一
</div>

在这里插入图片描述

三、表格

1、基本实例

为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线

<table class="table">
    <tr>
        <th>姓名</th>  <!--th表示thead-->
        <th>用户名</th>
        <th>密码</th>
    </tr>
    <tr>
        <td>吴晋丞</td>
        <td>时间定义青春</td>
        <td>88888888</td>
    </tr>
    <tr>
        <td>华晨宇</td>
        <td>歌星</td>
        <td>666666</td>
    </tr>
</table>

在这里插入图片描述

2、条纹状表格

通过 .table-striped 类可以给之内的每一行增加斑马条纹样式。

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

在这里插入图片描述

3、带边框的表格

添加 .table-bordered 类为表格和其中的每个单元格增加边框。

<table class="table table-striped table-bordered">
  ...
</table>

在这里插入图片描述

4、鼠标悬停

通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。

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

这个一般不与.table-striped一起用，为什么？看下效果就晓得了：
在这里插入图片描述

5、紧缩表格

通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半。

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

在这里插入图片描述

6、表格颜色类

（1）为行设置颜色

<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="info">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>

在这里插入图片描述

（2）为单元格设置颜色

<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>