Bootstrap案例

最新推荐文章于 2023-06-25 16:31:42 发布

原创最新推荐文章于 2023-06-25 16:31:42 发布 · 136 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap

（1）缩略图

 <!--begin-->
        <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
            <div class="thumbnail">
                <img src="images/1.jpg" class="img-responsive">

                <div class="caption">
                    <h3 class="bg-info">Thumbnail</h3>
                </div>

                <p class="text-muted"></p>
            </div>

            <div class="text-right">
                <button class="btn btn-success"> 去看看</button>
                <button class="btn btn-primary"> 可以购买</button>
            </div>
        </div>
  <!--end-->

整体思路：先分块-放图片

响应+圆角-标题

分隔线-内容P

1️⃣.container栅格系统放在容器中，作用：把浏览器分成12列，由行和列组成，一行有12列。

col-lg-3:PC端大屏幕显示4张图片，col-md-4 ：PC端中等屏幕显示3张图片，

col-sm-6 ：平板端显示2张图片，col-xs-6：手机端显示2张图片。

2️⃣.thumbnail加圆角边框 img-responsive

img-thumbnail在图片外加圆角边框，-circle椭圆形 -rounded四角变圆角

3️⃣.caption标题

4️⃣.bg-info 深蓝色（没有下面的柔和色）背景文本颜色

5️⃣.text-muted柔和-灰色情景文本颜色

其他和下面的btn一样

6️⃣.text-right 文本对齐方式 left center

7️⃣.btn-success绿色按钮样式

.btn-primary蓝色

default白色 warning 姜黄 danger红色

（2）默认按钮（下拉列表）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewpoint" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="bootstrap/js/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>

</head>
<body>
<div class="container" style="background: #e6e6e6;">
    <h2 class="page-header">下拉列表</h2>
    <div class="dropdown">
        <button class="btn btn-default" data-toggle="dropdown">
            登录<span class="caret"></span>
        </button>

        <ul class="dropdown-menu">

            <li><a href="#">qq登录</a></li>
            <li><a href="#">微信登录</a></li>
            <li class="divider"></li>
            <li><a href="#">邮箱登录</a></li>
            <li><a href="#">手机登录</a></li>
            <li><a href="#">微博登录</a></li>
        </ul>
    </div>
</div>


</body>
</html>