Maison > Article > interface Web > 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
f9ba78e6ee608a4cca8d7a927f90afcc be22f17e17bf8643020513b87fa46c5a2cacc6d41bbb37262a98f745aa00fbf0 764024de193b62b10426d4fc6738c9f12cacc6d41bbb37262a98f745aa00fbf0 ace482f13b4c0348df2a0e1268233d2b2cacc6d41bbb37262a98f745aa00fbf0
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" b7cdcb0ee4bc36411fa74e4e5b84f4e316b28748ea4df4d9c2150843fecfba68 522dee5a9e032a609c190d198a2bc97a16b28748ea4df4d9c2150843fecfba68 b1f4a67446def6c49a9f0aa21517b1ac16b28748ea4df4d9c2150843fecfba68 0b561c7c414147a96bbbb8cc10c3d06d 561426e822a73b81b8a9d4ad3ad91e91模态框头部0f6dfd1e3624ce5465eb402e300e01ae 6e52c62ccaa796a4ccb90a0458fc6482×65281c5ac262bf6d81768915a4a77ac0 16b28748ea4df4d9c2150843fecfba68 6e1ceff927595656120650f97442eabc模态框内容..16b28748ea4df4d9c2150843fecfba68 fcea287e1681f6566fd9116658b8e4f0c92346fd5668c72f0e5c132a5c66d4da关闭65281c5ac262bf6d81768915a4a77ac016b28748ea4df4d9c2150843fecfba68
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!