bootstrap-图片，辅助类处理
程序员文章站
2022-05-27 16:09:12
...
1.图片处理
在boostrap框架中有三种图片的形式：
.img-rounded：添加 border-radius:6px 来获得图片圆角。
.img-circle：添加 border-radius:50% 来让整个图片变成圆形。
.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
<title>img</title>
<style>
img{
width: 200px;
height: 200px;
margin-right: 15px;
}
</style>
</head>
<body>
<div class="container">
<h1 class="page-header">IMG</h1>
<img src="ns.png" class="img-rounded">
<img src="ns.png" class="img-circle">
<img src="ns.png" class="img-thumbnail">
<img src="ns.png" class="img-responsive">//响应式图片，随着窗口的大小变化而变化
</div>
</body>
</html>2.辅助类
- 文本
以下不同的类展示了不同的文本颜色。如果文本是个链接鼠标移动到文本上会变暗：
<div class="container">
<h1 class="page-header">Bootstrap</h1>
<p class="text-muted"> love you very much!</p>
<p class="text-primary"> love you very much!</p>
<p class="text-success"> love you very much!</p>
<p class="text-warning"> love you very much!</p>
<p class="text-danger"> love you very much!</p>
<p class="info"> love you very much!</p>
</div>- 背景
以下不同的类展示了不同的背景颜色。 如果文本是个链接鼠标移动到文本上会变暗：
<div class="container">
<h1 class="page-header">Bootstrap</h1>
<p class="bg-primary"> love you very much!</p>
<p class="bg-success"> love you very much!</p>
<p class="bg-warning"> love you very much!</p>
<p class="bg-danger"> love you very much!</p>
<p class="bg-info"> love you very much!</p>
</div>- 关闭图标
使用通用的关闭图标来关闭模态框和警告框。使用 class close 得到关闭图标，自动靠右放置。
<p class="bg-primary"> love you very much!
<button class="close"> ×</button>
</p>- 插入符
使用插入符表示下拉功能和方向。
<p>插入符实例
<span class="caret"></span>
</p>- 快速浮动
分别使用 class pull-left 或 pull-right 来把元素向左或向右浮动。
h1 class="bg-primary"> love you very much!
<button class="btn btn-success pull-right"> 更多 <span class="caret"></span></button>
</h1>- 居中内容块
<div class="center-block" style="width:200px;background-color:#ccc;">
center-block 实例
</div>- 清除浮动
如需清除元素的浮动，请使用 .clearfix class。
在前面文章中提供了两种解决浮动的方法，现在介绍第三种：
https://blog.csdn.net/qq_39396275/article/details/81195718
<div class="wrapper clearfix">
<div class="box1 pull-left">1</div>
<div class="box1 pull-left">2</div>
</div> css:
.wrapper{
border:1px solid green;
}
.box1{
width: 100px;
height:100px;
background-color: red;
}效果和前两种方法一样：
- 显示和隐藏内容
使用 class .show 和 .hidden 来强行设置元素显示或隐藏（包括屏幕阅读器），不用js来设置。
<div class="show" style="left-margin:10px;width:300px;background-color:#ccc;">
这是 show class 的实例
</div>
<div class="hidden" style="width:200px;background-color:#ccc;">
这是 hide class 的实例
</div>上一篇： 镂空文字、类歌词进度显示文字