bootstrap-图片，辅助类处理

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"> &times;</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;
}

效果和前两种方法一样：
这里写图片描述

扫描二维码关注公众号，回复： 2599510 查看本文章

显示和隐藏内容
使用 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>

bootstrap-图片，辅助类处理

1.图片处理

2.辅助类

猜你喜欢