前端基础之《Bootstrap（4）—全局CSS样式_图片、辅助类、响应式工具》 - 码农知识堂

前端基础之《Bootstrap（4）—全局CSS样式_图片、辅助类、响应式工具》
一、图片形状

1、圆角（.img-rounded）

2、圆形（.img-circle）

3、有边框，指甲盖效果（.img-thumbnail）
```
<body>
	<div class="container">
        <h1 class="page-header">bootstrap前端框架h1>
        <img src="bs/image/222.jpg" width="100px" class="img-rounded" alt="" />
        <img src="bs/image/222.jpg" width="100px" class="img-circle" alt="" />
        <img src="bs/image/222.jpg" width="100px" class="img-thumbnail" alt="" />
    div>
body>
```
二、辅助类（文本颜色）

1、灰色（.text-muted）

2、蓝色（.text-primary）

3、绿色（.text-success）

4、青色（.text-info）

5、黄色（.text-warning）

6、红色（.text-danger）

三、辅助类（文本背景色）

1、蓝色（.bg-primary）

2、绿色（.bg-success）

3、青色（.bg-info）

4、黄色（.bg-warning）

5、红色（.bg-danger）

四、辅助类（关闭按钮）

1、左上角关闭样式（.close）
```
<h2 class="bg-info"><span>aaaaaaaaaaaaspan><span class="close">×span>h2>
```
2、更多（.caret）
```
<button class="btn btn-primary">更多<span class="caret">span>button>
```
五、辅助类（快速浮动）

1、左浮动（.pull-left）

2、右浮动（.pull-right）

六、辅助类（清除浮动）

1、清除浮动（.clearfix）

七、辅助类（让内容居中）

1、让块标签居中（.center-block）
等同于【margin 0 auto】

八、辅助类（显示和隐藏）

1、显示（.show）
就是【display: block】

2、隐藏（.hidden）
就是【display: none】

九、响应式工具

1、表格响应式（.table-responsive）

2、图片响应式（.img-responsive）
相关阅读:
一起来庆祝属于GISer的节日GIS DAY！
数据结构与算法拾遗八（认识复杂度）
850. 矩形面积 II
「聊设计模式」之桥接模式（Bridge）
JAVA毕设项目作业自动评阅系统的设计和开发（java+VUE+Mybatis+Maven+Mysql）
Vivado初体验LED工程
 DataWorks概述
 Clickhouse MergeTree原理（二）—— 表和分区的维护
 Python课程设计之学生信息管理系统
 【MySQL】MySQL事务隔离机制与实现原理详解
原文地址：https://blog.csdn.net/csj50/article/details/127648260