bootstrap4常用样式整理

2024年5月8日 261次阅读 来源: 常峻

背景

最近在做一些小的学习项目时，多次用到了bootstrap4，所以在这里将bootstrap进行整理，用来以后查看。

bootstrap4安装

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

容器和网格系统

  • container container-fluid //容器类前者固定宽度后者100%宽度

文字排版

  • display //标题类 1-4
  • small //小文本
  • <abbr> //文本底部下面一条虚线边框

颜色

  • text-muted 柔和
  • text-primary 重要
  • text-success 成功
  • text-info 提示
  • text-warning 警告
  • text-danger 危险
  • text-secondary 副标题
  • text-dark 深灰色文字
  • text-light 浅灰色
  • text-white 白色

表格

  • table //默认样式
  • table-striped //条纹表格
  • table-bordered //边框表格
  • table-hover //鼠标悬停
  • table-dark //黑色背景表格
  • table-responsive //响应式表格

图片

  • rounded //圆角效果
  • rounded-circle //椭圆效果
  • img-thumbnail //图片缩略图效果
  • img-fluid //图片响应式效果

超大屏幕

  • jumbotron // 屏幕
  • jumbotron-fluid //没有圆角的全屏幕

信息提示框

  • alert-success //成功提示信息
  • alert-dismissable class=”close” data-dismiss=”alert” //关闭提示框

按钮

  • btn-primary //主要按钮
  • btn-secondary //次要按钮
  • btn-success //成功按钮
  • btn-info //信息按钮
  • btn-danger //危险
  • btn-outline-primary //按钮边框
  • btn-sm btn-lg //小大号按钮
  • btn-block //块级按钮
  • active //可用
  • disabled //禁用

按钮组

  • btn-group //按钮组
  • btn-group-lg|sm|xs 控制按钮组大小
  • btn-group-vertical 垂直按钮组

进度条

  • progress //添加一个div
  • progress-bar //在上面的div中添加一个progress-bar的div

分页

  • pagination //ul元素上添加
  • page-item //在li元素上添加page-item

列表组

  • list-group //列表组
  • list-group-item //列表li
  • list-group-item-action

卡片

  • card、card-header、card-body、card-footer
  • card-img-top //图片
  • card-body、card-title、card-text //图片卡片
  • card-img-overlay//设置图片为背景

下拉菜单

  • dropdown //下拉菜单默认
  • button设置dropdown-toggle data-toggle=“dropdown” //下拉button
  • dropdown-menu //下拉菜单
  • a设置样式dropdown-item

导航栏

  • navbar、navbar-expand-sm、bg-light
  • ul：navbar-nav li：nav-item

表单

  • form-group
  • label for email
  • input class form-control

模态框

button设置 data-toggle="modal" data-target="#myModal"
<div class="modal fade" id="myModal"></div>
<div class="modal-dialog"></div>
<div class="modal-content"></div>
 <div class="modal-header">
        <h4 class="modal-title">模态框头部</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
<div class="modal-body">模态框内容..</div>
<div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button></div>

提示框

  • data-toggle=”tooltip” //创建提示框
  • title=”我是提示内容!” //提示内容
  • data-placement=”top” //指定提示框位置

$(document).ready(function(){ //初始化

$('[data-toggle="tooltip"]').tooltip();

});

    原文作者：常峻
    原文地址: https://segmentfault.com/a/1190000014722776
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞