Recommandé : Introduction aux styles couramment utilisés dans bootstrap4

Le contenu de cet article concerne les recommandations : une introduction aux styles couramment utilisés dans bootstrap4, qui a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère que cela vous sera utile.

Contexte

J'ai utilisé bootstrap4 plusieurs fois récemment lors de petits projets d'apprentissage, j'organiserai donc bootstrap ici pour un examen futur. (Recommandation de cours vidéo gratuit : Tutoriel bootstrap)

Installation 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>

Conteneur et système de grille

conteneur conteneur -fluid //Classe de conteneur, la première a une largeur fixe et la seconde une largeur de 100 %

Mise en page du texte

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

Couleur

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

Tableau

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

Image

rounded  //圆角效果
rounded-circle //椭圆效果
img-thumbnail //图片缩略图效果
img-fluid //图片响应式效果
超大屏幕
jumbotron // 屏幕
jumbotron-fluid //没有圆角的全屏幕

Boîte d'invite d'informations

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

Boutons

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

Groupe de boutons

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

Barre de progression

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

Page

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

Liste du groupe

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

Carte

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

Menu déroulant

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

Barre de navigation

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

Formulaire

form-group
label for email
input class form-control

Boîte modale

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>

Boîte d'invite

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

$(document).ready(function(){    //初始化
$('[data-toggle="tooltip"]').tooltip(); 
});

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!