首页 / js教程

    推荐:bootstrap4中常用的样式介绍

    作者:PHP中文网2018-10-13 15:46:48

    php中文网赞助会员本篇文章给大家带来的内容是关于推荐:bootstrap4中常用的样式介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

    背景

    最近在做一些小的学习项目时,多次用到了bootstrap4,所以在这里将bootstrap进行整理,用来以后查看。(免费视频课程推荐: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  //添加一个p
    progress-bar //在上面的p中添加一个progress-bar的p

    分页

    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(); 
    });

    以上就是推荐:bootstrap4中常用的样式介绍的详细内容,更多请关注php中文网其它相关文章!

    标签: bootstrap

PHP中文网

未登录