2021/9/13

最新推荐文章于 2024-09-14 17:54:00 发布

m0_55786512

最新推荐文章于 2024-09-14 17:54:00 发布

阅读量75

点赞数

分类专栏：学习小结文章标签： jquery html5 css

本文链接：https://blog.csdn.net/m0_55786512/article/details/120275507

版权

学习小结专栏收录该内容

39 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了Bootstrap的栅格系统和按钮组件的使用。首先，展示了如何利用Bootstrap创建响应式的栅格布局，包括不同屏幕尺寸下的显示方式。接着，讲解了Bootstrap的各种按钮样式，包括默认、首选项、成功、信息、警告、危险和链接等不同类型的按钮，以及它们在网页设计中的应用。此外，还提到了图片的几种响应式展示方式。

摘要由CSDN通过智能技术生成

#8：30-9：00 签到打卡

#9：30-12：00 观看javaweb视频

#14：00-18：00 写qq项目

1.Bootstrap栅格

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--ie支持-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap栅格</title>
        <!--设备代号
            xs:超小屏幕(<768px)
            sm:小屏幕(>=768px)
            md:中等屏幕(>=992px)
            lg:大屏幕(>=1200px)

        -->
    <!-- Bootstrap -->
    <link rel="stylesheet" href="css/bootstrap.min.css" rel="stylesheet">
    <style>
        div{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="container"></div><!--container留有一些留白-->
    <div class="container-fluid"><!--container-fluid填充整个行-->
        <!--定义行-->
            <div class="row">
                <!--定义元素，lg为大显示器
                    并且向上兼容
                    向下不兼容(如果小于会一个占满整行)
                    -->
                <div class="col-lg-3">栅格</div>
                <div class="col-lg-3">栅格</div>
                <div class="col-lg-3">栅格</div>
                <div class="col-lg-3">栅格</div>
                <!--最大12个格子，每个占3格-->
                <div class="col-lg-1">栅格</div>
                <!--如果超出将自动分配到下一行-->
            </div>

    </div>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
</html>

2.Bootstrap按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--ie支持-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap按钮</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!--原版样式-->
<a href="#">Link</a>
<button>Button</button>
<input type="button" value="Input">
<input type="submit" value="Submit">
<br>

<!--更好且美观的样式-->
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
<br>

<!-- 默认按钮 btn btn-default -->
<button type="button" class="btn btn-default">（默认样式）Default</button>
<!-- 首选项按钮 btn btn-primary -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<!-- 成功样式按钮 btn btn-success -->
<button type="button" class="btn btn-success">（成功）Success</button>
<!-- 一般信息按钮 btn btn-info -->
<button type="button" class="btn btn-info">（一般信息）Info</button>
<!-- 警告按钮 btn btn-warning -->
<button type="button" class="btn btn-warning">（警告）Warning</button>
<!-- 危险按钮 btn btn-danger -->
<button type="button" class="btn btn-danger">（危险）Danger</button>
<!-- 链接按钮 btn btn-link -->
<button type="button" class="btn btn-link" href="#">（链接）Link</button>
<br>

<img src="1.jpg" class="img-responsive"><!--填充图片一整行-->
<img src="1.jpg" class="img-rounded"><!--方形图片-->
<img src="1.jpg"  class="img-circle"><!--圆形-->
<img src="1.jpg"  class="img-thumbnail"><!--相框-->
</body>
</html>