欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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>

bootstrap-图片,辅助类处理

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>

bootstrap-图片,辅助类处理

  • 背景
    以下不同的类展示了不同的背景颜色。 如果文本是个链接鼠标移动到文本上会变暗:
<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>

bootstrap-图片,辅助类处理

  • 关闭图标
    使用通用的关闭图标来关闭模态框和警告框。使用 class close 得到关闭图标,自动靠右放置。
<p class="bg-primary"> love you very much!
            <button class="close"> &times;</button>
</p>

bootstrap-图片,辅助类处理

  • 插入符
    使用插入符表示下拉功能和方向。
<p>插入符实例
        <span class="caret"></span>
        </p>

bootstrap-图片,辅助类处理

  • 快速浮动
    分别使用 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>

bootstrap-图片,辅助类处理

  • 居中内容块
<div class="center-block" style="width:200px;background-color:#ccc;">
         center-block 实例
    </div>
<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;
}

效果和前两种方法一样:
bootstrap-图片,辅助类处理

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