Home > Web Front-end > JS Tutorial > Recommended: Introduction to commonly used styles in bootstrap4

Recommended: Introduction to commonly used styles in bootstrap4

不言
Release: 2018-10-13 16:08:59
forward
2406 people have browsed it

The content of this article is about recommendations: an introduction to commonly used styles in bootstrap4, which has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Background

I have used bootstrap4 many times recently when doing some small learning projects, so I will organize the bootstrap here for future review. . (Free video course recommendation: bootstrap tutorial)

bootstrap4 installation

<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>
Copy after login

Container and grid system

container container- fluid //Container class The former has a fixed width and the latter has a 100% width

Text layout

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

Color

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

Form

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

Picture

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

Information prompt box

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

Button

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

Button group

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

Progress bar

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

Paging

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

List group

list-group //列表组
list-group-item //列表li
list-group-item-action
Copy after login

Card

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

Drop-down menu

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

Navigation bar

navbar、navbar-expand-sm、bg-light
ul:navbar-nav li:nav-item
Copy after login

Form

form-group
label for email
input class form-control
Copy after login

Modal box

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>
Copy after login

Prompt box

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

The above is the detailed content of Recommended: Introduction to commonly used styles in bootstrap4. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:segmentfault.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template