bootstrap4 学习笔记（二）

最新推荐文章于 2022-09-02 00:39:00 发布
最新推荐文章于 2022-09-02 00:39:00 发布
阅读量257 收藏 1
点赞数 1
分类专栏： 前端 文章标签： bootstrap javascript jquery css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mr_changxin/article/details/115560333
版权

文章目录

Flex弹性布局（一）

  • 使用.d-flex和.d-inline-flex实现开启flex布局样式;
  • .flex-row可以呈现子元素水平方向的位置， 默认居左并从左到右显示(1, 2, 3)
  • .flex-row-reverse子元素水平方向居右从左到右显示(3, 2,1) ;
  • .flex-column实现子元素垂直效果，并从上往下显示(1, 2, 3)
  • .flex-column-reverse实现子元素垂直效果，并从上往下显示(3, 2，1)
  • justify-content-start(end、 center、 between、 around)实现内容对齐;
  • .align-items-start(end、center、 baseline、 stretch)实现项目对齐;
  • .align-self-start(end、center、 baseline、 stretch)实现单项目对齐;

样例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性布局</title>
    <!-- 移动设备优先 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.css">


    <style>

    </style>
</head>
<body>
<div class="d-flex flex-row border border-dark mt-5">
    <div class="p-2 border border-success">one</div>
    <div class="p-2 border border-success">two</div>
    <div class="p-2 border border-success">three</div>
</div>

<div class="d-flex flex-row-reverse border border-dark mt-5">
    <div class="p-2 border border-success">one</div>
    <div class="p-2 border border-success">two</div>
    <div class="p-2 border border-success">three</div>
</div>

<div class="d-flex flex-row-reverse border border-dark mt-5 justify-content-start">
    <div class="p-2 border border-success">one</div>
    <div class="p-2 border border-success">two</div>
    <div class="p-2 border border-success">three</div>
</div>

<div class="d-flex flex-row border border-dark mt-5 justify-content-end">
    <div class="p-2 border border-success">one</div>
    <div class="p-2 border border-success">two</div>
    <div class="p-2 border border-success">three</div>
</div>

<div class="d-flex flex-row border border-dark mt-5 justify-content-start">
    <div class="p-2 border border-success">one</div>
    <div class="p-2 border border-success">two</div>
    <div class="p-2 border border-success">three</div>
</div>

<div class="d-flex flex-row border border-dark mt-5 justify-content-center">
    <div class="p-2 border border-success">one</div>
    <div class="p-2 border border-success">two</div>
    <div class="p-2 border border-success">three</div>
</div>

<div class="d-flex flex-row border border-dark mt-5 justify-content-around">
    <div class="p-2 border border-success">one</div>
    <div class="p-2 border border-success">two</div>
    <div class="p-2 border border-success">three</div>
</div>

<div class="d-flex flex-row border border-dark mt-5 justify-content-between">
    <div class="p-2 border border-success">one</div>
    <div class="p-2 border border-success">two</div>
    <div class="p-2 border border-success">three</div>
</div>

<div class="d-flex flex-row border border-dark mt-5 align-items-end" style="height:200px;">
    <div class="p-2 border border-success">one#</div>
    <div class="p-2 border border-success">two#</div>
    <div class="p-2 border border-success">three#</div>
</div>

<div class="d-flex flex-row border border-dark mt-5 align-items-start" style="height:200px;">
    <div class="p-2 border border-success">one#</div>
    <div class="p-2 border border-success">two#</div>
    <div class="p-2 border border-success">three#</div>
</div>

<div class="d-flex flex-row border border-dark mt-5 align-items-center" style="height:200px;">
    <div class="p-2 border border-success">one#</div>
    <div class="p-2 border border-success">two#</div>
    <div class="p-2 border border-success">three#</div>
</div>

<div class="d-flex flex-row border border-dark mt-5 align-items-stretch" style="height:200px;">
    <div class="p-2 border border-success">one#</div>
    <div class="p-2 border border-success">two#</div>
    <div class="p-2 border border-success">three#</div>
</div>

<div class="d-flex flex-row border border-dark mt-5" style="height:200px;">
    <div class="p-2 border border-success align-self-center">one##</div>
    <div class="p-2 border border-success align-self-end">two##</div>
    <div class="p-2 border border-success align-self-start">three##</div>
    <div class="p-2 border border-success align-self-stretch">three##</div>
</div>

<div class="d-flex flex-column border border-dark mt-5" style="height:200px;">
    <div class="p-2 border border-success align-self-center">one##</div>
    <div class="p-2 border border-success align-self-end">two##</div>
    <div class="p-2 border border-success align-self-start">three##</div>
    <div class="p-2 border border-success align-self-stretch">three##</div>
</div>

<div class="d-flex flex-column border border-dark mt-5">
    <div class="p-2 border border-success">one</div>
    <div class="p-2 border border-success">two</div>
    <div class="p-2 border border-success">three</div>
</div>

<div class="d-flex flex-column-reverse border border-dark mt-5">
    <div class="p-2 border border-success">one</div>
    <div class="p-2 border border-success">two</div>
    <div class="p-2 border border-success">three</div>
</div>

<div class="d-flex flex-column border border-dark mt-5 justify-content-end" style="height:200px;">
    <div class="p-2 border border-success">one</div>
    <div class="p-2 border border-success">two</div>
    <div class="p-2 border border-success">three</div>
</div>

<div class="d-flex flex-column border border-dark mt-5 justify-content-start" style="height:200px;">
    <div class="p-2 border border-success">one</div>
    <div class="p-2 border border-success">two</div>
    <div class="p-2 border border-success">three</div>
</div>

<div class="d-flex flex-column border border-dark mt-5 justify-content-between" style="height:200px;">
    <div class="p-2 border border-success">one</div>
    <div class="p-2 border border-success">two</div>
    <div class="p-2 border border-success">three</div>
</div>

<div class="d-flex flex-column border border-dark mt-5 justify-content-around" style="height:200px;">
    <div class="p-2 border border-success">one</div>
    <div class="p-2 border border-success">two</div>
    <div class="p-2 border border-success">three</div>
</div>






            <!-- 先引入 jQuery.js , 再引入 poppper.js 最后引入bootstrap.js -->
    <script src="js/jquery-3.4.1.slim.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.js"></script>

</body>
</html>

Flex弹性布局（二）

  • 使用.flex-fill强制让每个元素项目占据相等的水平宽度;
  • 多个项目同时设置了.flex-fill, 则它们等比例分割宽度，适合导航项目;
  • 如果其中一个或两个没有设置.flex-fill,则没有设置的会被设置的填充宽度;
  • 使用.flex-grow-*, *表示0或1，也能实现.flex- fill的功能，设置1即可;
  • 通过元素生成的css可以看出， 其实.flex-fill就是flex族的简写形式;
  • 使用.flex-shrink-*, *表示0或1， 表示是否强制更换到新行中;
  • 使用.mr-auto和.ml-auto等对齐方式， 对flex元素进行浮动对齐;
  • 对于垂直方向，也可以使用.mb-auto和.mt-auto来设置对象方向;
  • 使用.flex-wrap(包裹) 和.flex-nowrap(不包裹， 默认)来设置子元素项目;
  • 使用.flex-wrap-reverse进行项目排序的倒序;
  • 使用.order-*,来设置子元素项目的排序顺序， 支持.order-*-*;
  • .align-content-start(end、center、 between、 around、 stretch)垂直对齐;

样例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性布局</title>
    <!-- 移动设备优先 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.css">


    <style>

    </style>
</head>

<div class="d-flex flex-row border border-dark mt-5">
    <div class="p-2 border border-success">one</div>
    <div class="p-2 border border-success flex-fill">two</div>
    <div class="p-2 border border-success">three</div>
</div>



<div class="d-flex flex-row border border-dark mt-5">
    <div class="p-2 border border-success flex-fill">one</div>
    <div class="p-2 border border-success flex-fill">two</div>
    <div class="p-2 border border-success">three</div>
</div>

<div class="d-flex flex-row border border-dark mt-5">
    <div class="p-2 border border-success flex-fill">one</div>
    <div class="p-2 border border-success flex-fill">two</div>
    <div class="p-2 border border-success flex-fill">three</div>
</div>

<div class="d-flex flex-row border border-dark mt-5">
    <div class="p-2 border border-success">one</div>
    <div class="p-2 border border-success flex-grow-1">two</div>
    <div class="p-2 border border-success">three</div>
</div>

<div class="d-flex flex-row border border-dark mt-5">
    <div class="p-2 border border-success w-100">one</div>

    <div class="p-2 border border-success flex-shrink-0">three hello</div>
</div>

<div class="d-flex flex-row border border-dark mt-5">
    <div class="p-2 border border-success mr-auto">one</div>
    <div class="p-2 border border-success">two</div>
    <div class="p-2 border border-success ml-auto">three</div>
</div>

<div class="d-flex flex-column border border-dark mt-5" style="height:300px;">
    <div class="p-2 border border-success">one</div>
    <div class="p-2 border border-success">two</div>
    <div class="p-2 border border-success mt-auto">three</div>
</div>

<div class="d-flex flex-row border border-dark mt-5 bg-dark text-light flex-wrap" style="width:150px;">
    <div class="p-2 border border-success">###1</div>
    <div class="p-2 border border-success">###2</div>
    <div class="p-2 border border-success">###3</div>
    <div class="p-2 border border-success">###4</div>
    <div class="p-2 border border-success">###5</div>
    <div class="p-2 border border-success">###6</div>
    <div class="p-2 border border-success">###7</div>
    <div class="p-2 border border-success">###8</div>
    <div class="p-2 border border-success">###9</div>
</div>
<div class="d-flex flex-row border border-dark mt-5 bg-dark text-light flex-wrap-reverse" style="width:150px;">
    <div class="p-2 border border-success">###1</div>
    <div class="p-2 border border-success">###2</div>
    <div class="p-2 border border-success">###3</div>
    <div class="p-2 border border-success">###4</div>
    <div class="p-2 border border-success">###5</div>
    <div class="p-2 border border-success">###6</div>
    <div class="p-2 border border-success">###7</div>
    <div class="p-2 border border-success">###8</div>
    <div class="p-2 border border-success">###9</div>
</div>

<div class="d-flex flex-row border border-dark mt-5">
    <div class="p-2 border border-success order-3">one</div>
    <div class="p-2 border border-success order-1">two</div>
    <div class="p-2 border border-success">three</div>
</div>

<div class="d-flex flex-column border border-dark mt-5" style="height:300px;">
    <div class="p-2 border border-success">one</div>
    <div class="p-2 border border-success flex-fill">two</div>
    <div class="p-2 border border-success">three</div>
</div>


<div class="d-flex flex-column border border-dark mt-5" style="height:300px;">
    <div class="p-2 border border-success flex-fill">one</div>
    <div class="p-2 border border-success flex-fill">two</div>
    <div class="p-2 border border-success">three</div>
</div>

<div class="d-flex flex-row border border-dark mt-5 bg-dark text-light flex-wrap align-content-start" style="height:300px">
    <div class="p-2 border border-success">###1</div>
    <div class="p-2 border border-success">###2</div>
    <div class="p-2 border border-success">###3</div>
    <div class="p-2 border border-success">###4</div>
    <div class="p-2 border border-success">###5</div>
    <div class="p-2 border border-success">###6</div>
    <div class="p-2 border border-success">###7</div>
    <div class="p-2 border border-success">###8</div>
    <div class="p-2 border border-success">###9</div>
    <div class="p-2 border border-success">###9</div>
    <div class="p-2 border border-success">###9</div>
    <div class="p-2 border border-success">###9</div>
    <div class="p-2 border border-success">###9</div>
    <div class="p-2 border border-success">###9</div>
    <div class="p-2 border border-success">###9</div>
    <div class="p-2 border border-success">###9</div>
</div>

<div class="d-flex flex-row border border-dark mt-5 bg-dark text-light flex-wrap align-content-end" style="height:300px">
    <div class="p-2 border border-success">###1</div>
    <div class="p-2 border border-success">###2</div>
    <div class="p-2 border border-success">###3</div>
    <div class="p-2 border border-success">###4</div>
    <div class="p-2 border border-success">###5</div>
    <div class="p-2 border border-success">###6</div>
    <div class="p-2 border border-success">###7</div>
    <div class="p-2 border border-success">###8</div>
    <div class="p-2 border border-success">###9</div>
    <div class="p-2 border border-success">###9</div>
    <div class="p-2 border border-success">###9</div>
    <div class="p-2 border border-success">###9</div>
    <div class="p-2 border border-success">###9</div>
    <div class="p-2 border border-success">###9</div>
    <div class="p-2 border border-success">###9</div>
    <div class="p-2 border border-success">###9</div>
</div>

<div class="d-flex flex-row border border-dark mt-5 bg-dark text-light flex-wrap align-content-center" style="height:300px">
    <div class="p-2 border border-success">###1</div>
    <div class="p-2 border border-success">###2</div>
    <div class="p-2 border border-success">###3</div>
    <div class="p-2 border border-success">###4</div>
    <div class="p-2 border border-success">###5</div>
    <div class="p-2 border border-success">###6</div>
    <div class="p-2 border border-success">###7</div>
    <div class="p-2 border border-success">###8</div>
    <div class="p-2 border border-success">###9</div>
    <div class="p-2 border border-success">###9</div>
    <div class="p-2 border border-success">###9</div>
    <div class="p-2 border border-success">###9</div>
    <div class="p-2 border border-success">###9</div>
    <div class="p-2 border border-success">###9</div>
    <div class="p-2 border border-success">###9</div>
    <div class="p-2 border border-success">###9</div>
</div>


<div class="d-flex flex-row border border-dark mt-5 bg-dark text-light flex-wrap align-content-between" style="height:300px">
    <div class="p-2 border border-success">###1</div>
    <div class="p-2 border border-success">###2</div>
    <div class="p-2 border border-success">###3</div>
    <div class="p-2 border border-success">###4</div>
    <div class="p-2 border border-success">###5</div>
    <div class="p-2 border border-success">###6</div>
    <div class="p-2 border border-success">###7</div>
    <div class="p-2 border border-success">###8</div>
    <div class="p-2 border border-success">###9</div>
    <div class="p-2 border border-success">###9</div>
    <div class="p-2 border border-success">###9</div>
    <div class="p-2 border border-success">###9</div>
    <div class="p-2 border border-success">###9</div>
    <div class="p-2 border border-success">###9</div>
    <div class="p-2 border border-success">###9</div>
    <div class="p-2 border border-success">###9</div>
</div>


<div class="d-flex flex-row border border-dark mt-5 bg-dark text-light flex-wrap align-content-around" style="height:300px">
    <div class="p-2 border border-success">###1</div>
    <div class="p-2 border border-success">###2</div>
    <div class="p-2 border border-success">###3</div>
    <div class="p-2 border border-success">###4</div>
    <div class="p-2 border border-success">###5</div>
    <div class="p-2 border border-success">###6</div>
    <div class="p-2 border border-success">###7</div>
    <div class="p-2 border border-success">###8</div>
    <div class="p-2 border border-success">###9</div>
    <div class="p-2 border border-success">###9</div>
    <div class="p-2 border border-success">###9</div>
    <div class="p-2 border border-success">###9</div>
    <div class="p-2 border border-success">###9</div>
    <div class="p-2 border border-success">###9</div>
    <div class="p-2 border border-success">###9</div>
    <div class="p-2 border border-success">###9</div>
</div>

<div class="d-flex flex-row border border-dark mt-5 bg-dark text-light flex-wrap align-content-stretch" style="height:300px">
    <div class="p-2 border border-success">###1</div>
    <div class="p-2 border border-success">###2</div>
    <div class="p-2 border border-success">###3</div>
    <div class="p-2 border border-success">###4</div>
    <div class="p-2 border border-success">###5</div>
    <div class="p-2 border border-success">###6</div>
    <div class="p-2 border border-success">###7</div>
    <div class="p-2 border border-success">###8</div>
    <div class="p-2 border border-success">###9</div>
    <div class="p-2 border border-success">###9</div>
    <div class="p-2 border border-success">###9</div>
    <div class="p-2 border border-success">###9</div>
    <div class="p-2 border border-success">###9</div>
    <div class="p-2 border border-success">###9</div>
    <div class="p-2 border border-success">###9</div>
    <div class="p-2 border border-success">###9</div>
</div>




            <!-- 先引入 jQuery.js , 再引入 poppper.js 最后引入bootstrap.js -->
    <script src="js/jquery-3.4.1.slim.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.js"></script>

</body>
</html>

警告提示框

  • 警告框样式

    1. 使用.alert设置警告框基础样式，并使用.alert: success设置警告框颜色;
    2. 在使用了警告框的元素内部设置超链接alert-link,会搭配相应的颜色;
    3. 使用.aler]- heading可以设置继承颜色，alert本身也可以设置水 平线段落等;

  • 警告框组件

    1. 按出和按钮就在组件一栏, 可以和浏览器交互功能，警告框的关闭效果，通过data -dismiss=" alert" 实现父元素关闭;
    2. .fade和.show实现了关闭后的淡出效果;
    3. .alert- dismissible从调试器可以看到是padding -rigt:4rem;
    4. 真正实现关闭效果的只有data-dismiss=" alert" ;
    5. 直接使用脚本的方式也可以关闭;

  • 组件会提供一些更加深入的脚本使用方法，包括各种方法和事件。

样例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>弹性布局</title>
    <!-- 移动设备优先 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.css">


    <style>

    </style>
</head>

    <div class="alert alert-success">融职教育</div>
    <div class="alert alert-primary">融职教育</div>
    <div class="alert alert-secondary">融职教育</div>
    <div class="alert alert-danger">融职教育</div>
    <div class="alert alert-warning">融职教育</div>
    <div class="alert alert-info">融职教育</div>
    <div class="alert alert-light">融职教育</div>
    <div class="alert alert-dark">融职教育</div>


<div class="alert alert-success">
    融职教育

    <a href="https://www.eduwork.cn" class="alert-link">www.eduwork.cn</a>

</div>

<div class="alert alert-success">
    <h4 class="alert-heading">融职教育</h4>
    <hr>

    <a href="https://www.eduwork.cn" class="alert-link">www.eduwork.cn</a>
    <p>在工作中学习， 在学习中工作！</p>

</div>

<div class="alert alert-warning one">
    你确定要关闭吗？
    <button class="close two">&times;</button>
</div>

<div class="alert alert-warning alert-dismissible fade show">
    你确定要关闭吗？
    <button class="close" data-dismiss="alert">&times;</button>
</div>




            <!-- 先引入 jQuery.js , 再引入 poppper.js 最后引入bootstrap.js -->
    <script src="js/jquery-3.4.1.slim.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.js"></script>


<script>
    $(".two").click(function(){
        $('.one').alert('close');
    });

</script>

</body>
</html>

徽章和面包屑布局

  • 徽章样式
    1. 使用.badge 设置徽章基础样式，并使用.badge -success等设置徽章颜色;
    2. .badeg- pill将徽章设置成椭圆胶囊式;
    3. 在超链接使用徽章，鼠标悬停时会换色;
  • 面包屑导航
    1. 使用.breadcrumb设置- 个层次导航(- 行分割显示);
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- 移动设备优先 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.css">


    <style>

    </style>
</head>

    <h1>EduWork <span class="badge badge-secondary">cn</span></h1>
    <h2>EduWork <span class="badge badge-success">cn</span></h2>
    <h3>EduWork <span class="badge badge-info">cn</span></h3>
    <h4>EduWork <span class="badge badge-danger">cn</span></h4>
    <h5>EduWork <span class="badge badge-warning">cn</span></h5>
    <h6>EduWork <span class="badge badge-light">cn</span></h6>
    <h6>EduWork <span class="badge badge-dark">cn</span></h6>


<h3>EduWork <span class="badge badge-info badge-pill">cn</span></h3>

<h3>EduWork <a href="#" class="badge badge-info badge-pill">cn</a></h3>

<nav>
    <ol class="breadcrumb">
        <li class="breadcrumb-item" ><a href="#">Home</a></li>
        <li class="breadcrumb-item" ><a href="#">Java</a></li>
        <li  class="breadcrumb-item active"><ahref="#">J2SE</a></li>
    </ol>

</nav>


            <!-- 先引入 jQuery.js , 再引入 poppper.js 最后引入bootstrap.js -->
    <script src="js/jquery-3.4.1.slim.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.js"></script>
</body>
</html>

按钮和按钮组

  • 按钮样式
    1. 使用.btn和.btn-* 实现按钮的预设样式;
    2. .btn不单单在< button>元素下使用，也可以在<a>、<input> 下使用;
    3. 使用. btn .btn-outline -*可以实现按钮的轮廓效果;
    4. 使用.btn-lg或.btn-sm可以实现按钮尺寸的大和小;
    5. 使用.btn-block将按钮进行block区块设置;
    6. 使用.active启用按钮(默认),使用. disabled禁用按钮，注意<a>的禁用(写在class里面， 其它写在外面) ;
    7. 添加data-toggle=" button" 实现按钮切换效果，使用active可以默认按下;
  • 按钮组样式
    1. 使用.btn-group实现传统方案的复选框和单选框样式;
    2. 使用.btn-group .btn-group-toggle实现全新方案的复选框和单选框;
    3. 使用.btn-group构建普通的按钮组;
    4. 使用.btn- toolbar构建分页工具类;
    5. 使用.btn-group-lg和.btn-group-sm实现大尺寸和小尺寸;
    6. 使用.btn-group-vertical设置垂直按钮组;

样例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- 移动设备优先 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.css">


    <style>
        body {
            padding:20px;
        }
    </style>
</head>

   <button class="btn btn-primary">我是按钮</button>
   <button class="btn btn-secondary">我是按钮</button>
   <button class="btn btn-success">我是按钮</button>
   <button class="btn btn-danger">我是按钮</button>
   <button class="btn btn-warning">我是按钮</button>
   <button class="btn btn-info">我是按钮</button>
   <button class="btn btn-light">我是按钮</button>
   <button class="btn btn-dark">我是按钮</button>
   <button class="btn btn-link">我是按钮</button>
<button class="btn btn-outline-primary">我是按钮</button>
<a href="#" class="btn btn-success">我是链接</a>
<input type="button" class="btn btn-success" value="我是按钮">
<input type="button" class="btn btn-danger" value="我是按钮">
<br>

<button class="btn btn-primary btn-lg">我是按钮</button>
<button class="btn btn-primary btn-sm">我是按钮</button>
<button class="btn btn-primary">我是按钮</button>
<br>
<button class="btn btn-primary btn-block">我是按钮</button>
<br>
<a href="#" class="btn btn-success disabled">我是链接</a>

<input type="button" class="btn btn-danger" disabled value="我是按钮">
<br>
<button class="btn btn-info"  data-toggle="button">我是按钮</button>
<br>

<div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-secondary  active">
        <input type="checkbox" checked> Java
    </label>

    <label class="btn btn-secondary">
        <input type="checkbox"> PHP
    </label>

    <label class="btn btn-secondary">
        <input type="checkbox"> Python
    </label>
</div>


<div class="btn-group  btn-group-toggle"  data-toggle="buttons">
    <label class="btn btn-secondary  active">
        <input type="radio" name="lang" checked> Java
    </label>

    <label class="btn btn-secondary">
        <input type="radio" name="lang"> PHP
    </label>

    <label class="btn btn-secondary">
        <input type="radio" name="lang"> Python
    </label>
</div>


<br>
<div class="btn-group mt-5">
    <button class="btn btn-secondary">左</button>
    <button class="btn btn-secondary">中</button>
    <button class="btn btn-secondary">右</button>

</div>

<br>
<div class="btn-toolbar">
    <div class="btn-group mt-5 mr-2">
        <button class="btn btn-secondary">1</button>
        <button class="btn btn-secondary">2</button>
        <button class="btn btn-secondary">3</button>
        <button class="btn btn-secondary">4</button>
        <button class="btn btn-secondary">5</button>

    </div>

    <div class="btn-group mt-5">
        <button class="btn btn-secondary">6</button>
        <button class="btn btn-secondary">7</button>
        <button class="btn btn-secondary">8</button>


    </div>

</div>

<div class="btn-group mt-5 btn-group-lg">
    <button class="btn btn-secondary">6</button>
    <button class="btn btn-secondary">7</button>
    <button class="btn btn-secondary">8</button>


</div>

<div class="btn-group mt-5 btn-group-sm">
    <button class="btn btn-secondary">6</button>
    <button class="btn btn-secondary">7</button>
    <button class="btn btn-secondary">8</button>


</div>

<br>

<div class="btn-group-vertical">
    <button class="btn btn-secondary">上</button>
    <button class="btn btn-secondary">中</button>
    <button class="btn btn-secondary">下</button>

</div>

            <!-- 先引入 jQuery.js , 再引入 poppper.js 最后引入bootstrap.js -->
    <script src="js/jquery-3.4.1.slim.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.js"></script>



</body>
</html>

卡片

  • 卡片是一 个内容扩展管理器，可以包含图片、列表、文本、链接等多种组合;
  • 先使用 .card来构建卡片,然后可以使用.card-body建立卡片主体内容;
  • 卡片主体标题可以使用.card-title(标题) .card-subtitle(副标题)等;
  • 片主体使用.card-text代表文本内容;
  • 卡片主体使用.card-link代表超链接;
  • 使用.card-img-top可以设计一个带主题图片的内容管理器;
  • 使用.card-header设置一 个列表组的标头;
  • 卡片默认是100%显示的， 可以使用栅格系统嵌套来固定卡片的布局;
  • 也可以使用.w-25、 .W-50、 .W-75、 .w-100来设置卡片的显示百分比;
  • 卡片中.card-img插入一 个整体的图片， 再配合.card-img-overlay实背景。 这种做法并不是真的作为背景，而是通过定位，让文字浮动在图片上进行编辑;
  • 卡片通过内部栅格,也可以实现左右水平排列的图文显示
  • 卡片可以定制自己的背景和颜色， 这里并无组件样式，均为之前所配置;
  • 卡片可以定制自 己的边框，直接使用之 前边框组件样式即可;
  • 在.card元素外层，构建一 个.card-group分组， 可以紧紧将每个卡片贴在一 起;
  • .card- group本身就具有栅格系统，但会紧贴， 对应的.card- deck提供间隙;
  • 有时， 卡片的高度不一, 上面两种会自动补全，换行也会留有巨大空隙，这时，采用.card-columns可以自我进行填充，均分空隙;

样例一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- 移动设备优先 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.css">


    <style>
        body {
            padding:20px;
        }
    </style>
</head>
    <div class="card" style="width:300px">

        <div class="card-body">
            <div class="card-title">
                卡片标题
            </div>

            <div class="card-subtitle text-muted">
                子标题
            </div>

            <p class="card-text">这是卡片体的部分</p>
        </div>

    </div>

<br>
<div class="card" style="width:300px">

    <div class="card-header">
       列表标题
    </div>

    <ul class="list-group list-group-flush">
        <li class="list-group-item">列表一</li>
        <li class="list-group-item">列表二</li>
        <li class="list-group-item">列表三</li>
    </ul>

</div>
<br>
<div class="card">

    <div class="card-header">
        页头
    </div>

    <div class="card-body">
        主体
    </div>

    <div class="card-footer">
        页脚
    </div>

</div>
<br>
<div class="container">
    <div class="row">
        <div class="col-sm-4">
            <div class="card">

                <div class="card-header">
                    页头
                </div>

                <div class="card-body">
                    主体
                </div>

                <div class="card-footer">
                    页脚
                </div>

            </div>
        </div>

        <div class="col-sm-4">
            <div class="card">

                <div class="card-header">
                    页头
                </div>

                <div class="card-body">
                    主体
                </div>

                <div class="card-footer">
                    页脚
                </div>

            </div>
        </div>

        <div class="col-sm-4">
            <div class="card">

                <div class="card-header">
                    页头
                </div>

                <div class="card-body">
                    主体
                </div>

                <div class="card-footer">
                    页脚
                </div>

            </div>
        </div>
    </div>

</div>

<br>


<div class="card">

    <img src="images/banner.jpg" class="card-img-top" alt="">

    <div class="card-body">
        主体
        <br>
        <a class="card-link" href="#">登录</a>
        <a class="card-link" href="#">注册</a>
    </div>

    <div class="card-footer">
        页脚
    </div>

</div>


            <!-- 先引入 jQuery.js , 再引入 poppper.js 最后引入bootstrap.js -->
    <script src="js/jquery-3.4.1.slim.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.js"></script>



</body>
</html>

样例二

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- 移动设备优先 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.css">


    <style>
        body {
            padding:20px;
        }
    </style>
</head>

<div class="card" style="width:500px">
    <div class="card-header">
        <ul class="nav nav-tabs card-header-tabs">
            <li class="nav-item"><a class="nav-link active" href="#">主页</a></li>
            <li class="nav-item"><a class="nav-link" href="#">内容</a></li>
            <li class="nav-item"><a class="nav-link" href="#">其它</a></li>
        </ul>
    </div>

    <div class="card-body">
        这是卡片体的部分
    </div>

</div>

<br>

<div class="card" style="width:500px">
    <div class="card-header">
        <ul class="nav nav-pills card-header-pills">
            <li class="nav-item"><a class="nav-link active" href="#">主页</a></li>
            <li class="nav-item"><a class="nav-link" href="#">内容</a></li>
            <li class="nav-item"><a class="nav-link disabled" href="#">其它</a></li>
        </ul>
    </div>

    <div class="card-body">
        这是卡片体的部分
    </div>

</div>
<br>
<div class="card" style="width:500px">

    <img src="images/banner.jpg" class="card-img" alt="">

    <div class="card-body">
        这是卡片体的部分
    </div>

</div>


<br>
<div class="card w-75 text-center bg-info text-white" >

    <img src="images/banner.jpg" class="card-img" alt="">

    <div class="card-img-overlay">
        这是卡片体的部分
    </div>

</div>

<br>

<div class="card w-75  bg-info text-white" >
    <div class="row">
        <div class="col-sm-6">
            <img src="images/banner.jpg" class="card-img" alt="">
        </div>

        <div class="col-sm-6">
            <div class="card-title">卡片标题</div>
            <div class="card-text">卡片文本</div>
        </div>
    </div>
</div>

<br>
<div class="card" >

    <img src="images/banner.jpg" class="card-img" alt="">

    <div class="card-body">
        这是卡片体的部分
    </div>

    <div class="card-footer">
        页脚
    </div>

</div>

<br>

<div class="card-group">
    <div class="card" >

        <img src="images/banner.jpg" class="card-img" alt="">

        <div class="card-body">
            这是卡片体的部分
        </div>

        <div class="card-footer">
            页脚
        </div>

    </div>

    <div class="card" >

        <img src="images/banner.jpg" class="card-img" alt="">

        <div class="card-body">
            这是卡片体的部分
        </div>

        <div class="card-footer">
            页脚
        </div>

    </div>

    <div class="card" >

        <img src="images/banner.jpg" class="card-img" alt="">

        <div class="card-body">
            这是卡片体的部分
        </div>

        <div class="card-footer">
            页脚
        </div>

    </div>

</div>


<br>

<div class="card-deck">
    <div class="card" >

        <img src="images/banner.jpg" class="card-img" alt="">

        <div class="card-body">
            这是卡片体的部分
        </div>

        <div class="card-footer">
            页脚
        </div>

    </div>

    <div class="card" >

        <img src="images/banner.jpg" class="card-img" alt="">

        <div class="card-body">
            这是卡片体的部分
        </div>

        <div class="card-footer">
            页脚
        </div>

    </div>

    <div class="card" >

        <img src="images/banner.jpg" class="card-img" alt="">

        <div class="card-body">
            这是卡片体的部分
        </div>

        <div class="card-footer">
            页脚
        </div>

    </div>

</div>

<br>


<div class="card-columns">
    <div class="card" >

        <img src="images/banner.jpg" class="card-img" alt="">


        <div class="card-footer">
            页脚
        </div>

    </div>

    <div class="card" >

        <img src="images/banner.jpg" class="card-img" alt="">

        <div class="card-body">
            这是卡片体的部分
        </div>


    </div>

    <div class="card" >



        <div class="card-body">
            这是卡片体的部分
        </div>

        <div class="card-footer">
            页脚
        </div>

    </div>



    <div class="card" >

        <img src="images/banner.jpg" class="card-img" alt="">

        <div class="card-body">
            这是卡片体的部分
        </div>


    </div>
    <div class="card" >



        <div class="card-body">
            这是卡片体的部分
        </div>

        <div class="card-footer">
            页脚
        </div>

    </div>

    <div class="card" >

        <img src="images/banner.jpg" class="card-img" alt="">


        <div class="card-footer">
            页脚
        </div>

    </div>

    <div class="card" >



        <div class="card-body">
            这是卡片体的部分
        </div>

        <div class="card-footer">
            页脚
        </div>

    </div>

    <div class="card" >



        <div class="card-body">
            这是卡片体的部分
        </div>

        <div class="card-footer">
            页脚
        </div>

    </div>

    <div class="card" >



        <div class="card-body">
            这是卡片体的部分
        </div>

        <div class="card-footer">
            页脚
        </div>
    </div>
</div>
            <!-- 先引入 jQuery.js , 再引入 poppper.js 最后引入bootstrap.js -->
    <script src="js/jquery-3.4.1.slim.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.js"></script>
</body>
</html>

列表组

样例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!-- 移动设备优先 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- 引入Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.css">


    <style>
        body {
            padding:20px;
        }
    </style>
</head>
<ul class="list-group">
    <li class="list-group-item active">列表组一</li>
    <li class="list-group-item">列表组二</li>
    <li class="list-group-item">列表组三</li>
    <li class="list-group-item">列表组四</li>
    <li class="list-group-item disabled">列表组五</li>
</ul>

<br>
<div class="list-group">
    <a href="#" class="list-group-item active list-group-item-action">列表组一</a>
    <a href="#" class="list-group-item  list-group-item-action">列表组二</a>
    <a href="#" class="list-group-item list-group-item-action">列表组三</a>
    <a href="#" class="list-group-item list-group-item-action">列表组四</a>
    <a href="#" class="list-group-item disabled">列表组五</a>
</div>

<br>
<div class="list-group list-group-flush">
    <a href="#" class="list-group-item active list-group-item-action">列表组一</a>
    <a href="#" class="list-group-item  list-group-item-action">列表组二</a>
    <a href="#" class="list-group-item list-group-item-action">列表组三</a>
    <a href="#" class="list-group-item list-group-item-action">列表组四</a>
    <a href="#" class="list-group-item disabled">列表组五</a>
</div>


<br>

<ul class="list-group list-group-horizontal-sm">
    <li class="list-group-item active">列表组一</li>
    <li class="list-group-item">列表组二</li>
    <li class="list-group-item">列表组三</li>
    <li class="list-group-item">列表组四</li>
    <li class="list-group-item disabled">列表组五</li>
</ul>


<br>
<div class="list-group list-group-flush">
    <a href="#" class="list-group-item active list-group-item-action list-group-item-info">列表组一</a>
    <a href="#" class="list-group-item  list-group-item-action list-group-item-success">列表组二</a>
    <a href="#" class="list-group-item list-group-item-action list-group-item-danger">列表组三</a>
    <a href="#" class="list-group-item list-group-item-action">列表组四</a>
    <a href="#" class="list-group-item disabled">列表组五</a>
</div>

<br>
<ul class="list-group">
    <li class="list-group-item d-flex justify-content-between align-items-center">
            列表组一

        <span class="badge badge-primary ">99</span>

    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">列表组二
        <span class="badge badge-danger ">5</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">列表组三
        <span class="badge badge-success ">3</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">列表组四
        <span class="badge badge-primary ">109</span>
    </li>
    <li class="list-group-item disabled">列表组五</li>
</ul>

            <!-- 先引入 jQuery.js , 再引入 poppper.js 最后引入bootstrap.js -->
    <script src="js/jquery-3.4.1.slim.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.js"></script>



</body>
</html>
_CX_
关注
专栏目录
bootstrap5 .me-auto .ms-auto 与 bootstrap4 .ml-auto .mr-auto
桃李不言下自成蹊
06-03 22万+
bootstrap5 .me-auto .ms-auto bootstrap4 .ml-auto .mr-auto先看css样式bootstrap5 .ms-auto元素居右 .me-auto元素居左 bootstrap4 .ml-auto元素居右 .mr-auto元素居左
BOOTSTRAP4的栅格系统详解
shanzhihang的专栏
01-04 2572
简介 Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。 网格类 Bootstrap 4 网格系统有以下 5 个类: .col- 针对所有设备 .col-sm- 平板 - 屏幕宽度等于或大于 576px .col-md- 桌面显示器 - 屏幕宽度等于或大于 768px .col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px .col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px 列与列间
Bootstrap4 .ml-auto元素居右.mr-auto元素居左
梁同学与Android
12-26 5386
Bootstrap4 导航栏元素居右 Bootstrap 4正解： .ml-auto元素居右 .mr-auto元素居左
Bootstrap样式之Flex布局
qq_44701472的博客
03-16 1425
Flex弹性布局（b站上面的李炎恢老师的视频） 1、 使用.d-flex和.d-inline-flex开启flex布局样式； 同时这一样式也支持响应式的媒体查询：.d– [ sm | md | lg | xl ]-flex; 2、 使用.flex-row呈现子元素在水平方向，默认从左至右显示； 3、 使用.flex-row-reverse让子元素从屏幕的右边开始显示，从由到左1,2,3 两个...
bootstrap4 调整元素之间距离
热门推荐
王建野的专栏
03-06 6万+
    影响元素之间的间距是可以通过style的margin或padding属性来实现，但这两个属性本意并不相同；margin影响的是本元素与相邻外界元素之间的距离，这里简称外边距；padding影响的元素本身与其内部子元素之间的距离，简称为内填充。bootstrap4提供了简写的class名，名称分别以m-开头和p-开头的类。一、影响距离大小的值有0,1,2,3,4,5,auto(1)、marg...
Bootstrap笔记4
mintsolace的博客
08-24 146
图片响应式 目的： 各种终端都需要正常显示图片 移动端应该使用更小（体积）的图片 实现方式 将元素中直接设置的图片背景删除，换成两个data-属性（如：data-img-sm=“小图路径”，data-img-lg=“大图路径”） 通过JS的方式获取屏幕宽度 判断屏幕宽度是否小于一定的值（如：768） 根据判断情况决定使用具体的大图还是小图 //获取屏幕宽度 var windowWidth=$(wi...
Bootstrap4学习
Suxiaomowang的博客
08-25 856
btn 按钮 btn 按钮没有边框和背景 btn-xxxx 设置按钮背景 btn-outline-primary 设置按钮边框颜色鼠标进入后修改背景颜色 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt.
bootstrap4学习笔记（一）
02-08
bootstrap4学习笔记，中文的，适用于初学者学习，知识点配合案例的。
Bootstrap3学习笔记(二)之排版
01-19
在上篇文章给大家介绍了BootStrap3学习笔记(一)之网格系统 对于标题，Bootstrap已经修改了h1–h6的样式，如果需要副标题，还可以在其中使用small标记 <h1>h1. Bootstrap heading <small>Secondary text</small></h1...
Bootstrap3.0学习笔记之表格相关
09-22
Bootstrap3.0是世界上最受欢迎的前端开发框架之一，它提供了丰富的预定义样式，使得构建美观且响应式的网页变得更加容易。本篇文章将详细讲解Bootstrap3.0中的表格组件，包括其不同类型的表格及其应用场景。 首先，...
Bootstrap源码学习笔记之bootstrap进度条
08-31
border-radius: 4px; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); } ``` 而`.progress-bar`类则设置了实际进度条的样式，包括宽度（通过`width`...
bootstrap4 使用及常用样式详细整理 (依照官网翻译)
Altaba的博客
08-01 1万+
&amp;nbsp; bootstrap4常用样式整理 简介 Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。Bootstrap4 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插...
Bootstrap4 学习笔记（一）
Mr_changxin的博客
04-09 834
文章目录1.布局系统1.1 栅格系统1.2 栅格等级 1.布局系统 Bootstrap4.x 提供了.container 和 .container-fluid两种容器布局 这两种样式是启动布局栅格系统最基本的要素 .contianer是固体自适应方式，.container-fluid是流体100%自适应方式 容器布局可以嵌套，但一般不推荐使用（需要自己清除一些边距） 自适应对应的响应式方式如下media： // Small devices(landscape phone,578px and up) @m
Bootstrap 4 更新的新功能（全）
u012125579的专栏
08-25 3399
Bootstrap 4中有太多重大的更新，本文不能面面俱到，下面是一些颇受关注的亮点： 从Less迁移到Sass： 现在，Bootstrap已加入Sass的大家庭中。得益于Libsass，Bootstrap的编译速度比以前更快； 改进网格系统：新增一个网格层适配移动设备，并整顿语义混合。 支持选择弹性盒模型（flexbox）：这是项划时代的功能——
BootStrap4（二）布局
weixin_45650998的博客
09-02 1399
Bootstrap4.4 在制作自适应页面时或多或少会用到，而且非常方便，如何实现某个元素只在PC上显示其他屏幕不显示，或者在移动小屏幕和PC上显示，平板上隐藏；要隐藏元素，只需对任何响应屏幕变化使用.d-none这个class即可，要仅在给定的屏幕尺寸间隔上显示元素，可以将一个.d-将为所有屏幕尺寸隐藏该元素，但在中型和大型则会显示。-none类与一个.d--*类组合使用，例如，
popper.js 使用
站在原型链顶端的男人
05-15 6万+
Popper.js是一款功能强大的JS定位引擎。最近在写tooltip弹窗时，需要用到提示框定位的问题，然后度娘推荐我使用popper.js库，查看了iview库和element库的源码，发现定位都是用的这个玩意儿。既然大佬们都在用这个，我也去Popper.js官网瞅了下，没有中文文档，不得不吐槽一下。然后就是demo也少的可怜，而且网上的教程也比较少。于是就手敲了一遍这个库的使用属性及方法，相关...
Bootstrap4之弹性盒子详解（flexbox）
吉帅振博客
06-21 1万+
个人认为：弹性盒子是Bootstrap中比较重要同时理解也比较困难的一部分，接下来，我就根据自己的理解详细讲述一下对于弹性盒子的看法。1.排序方式2.响应式布局...
Bootstrap 4将导航栏项目向右对齐
xfxf996的博客
08-11 3584
How do I align a navbar item to right? 如何将导航栏项目右对齐？ I want to have the login and register to the
js 设置style样式 input框颜色 border
我的博客
04-20 3万+
[0]很重要 = 。=$('#name')[0].style.border="1px solid red";$('#password')[0].style.border="1px solid red"; $('#btnLogin').on('click', function () { $.ajax({ url: "/login", t...
bootstrap学习笔记
最新发布
05-28
以下是一些 Bootstrap 学习笔记： 1. 开始使用 Bootstrap 要开始使用 Bootstrap，你需要在你的 HTML 文件中引入 Bootstrap 的 CSS 和 JavaScript 文件。你可以在 Bootstrap 的官方网站上下载这些文件，或者通过 ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_CX_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值