Heim > Web-Frontend > js-Tutorial > Hauptteil

Empfohlen: Einführung in häufig verwendete Stile in Bootstrap4

不言
Freigeben: 2018-10-13 16:08:59
nach vorne
2387 Leute haben es durchsucht

Beim Inhalt dieses Artikels geht es um Empfehlungen: Eine Einführung in häufig verwendete Stile in Bootstrap4, die einen gewissen Referenzwert hat. Ich hoffe, dass sie für Sie hilfreich ist.

Hintergrund

Ich habe Bootstrap4 in letzter Zeit oft bei einigen kleinen Lernprojekten verwendet, daher werde ich Bootstrap hier für zukünftige Überprüfungen organisieren. (Kostenlose Videokursempfehlung: 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>
Nach dem Login kopieren

Container- und Gittersystem

Container-Container-Flüssigkeit //Containerklasse, erstere hat eine feste Breite und letztere hat eine Breite von 100 %

Textlayout

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

Farbe

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

Tabelle

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

Bild

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

Infofeld

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

Schaltfläche

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

Schaltflächengruppe

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

Fortschrittsbalken

progress  //添加一个p
progress-bar //在上面的p中添加一个progress-bar的p
Nach dem Login kopieren

Paging

pagination //ul元素上添加
page-item //在li元素上添加page-item
Nach dem Login kopieren

Listengruppe

list-group //列表组
list-group-item //列表li
list-group-item-action
Nach dem Login kopieren

Karte

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

Dropdown-Menü

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

Navigationsleiste

navbar、navbar-expand-sm、bg-light
ul:navbar-nav li:nav-item
Nach dem Login kopieren

Formular

form-group
label for email
input class form-control
Nach dem Login kopieren

Modalfeld

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>
Nach dem Login kopieren

Eingabeaufforderungsfeld

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

Das obige ist der detaillierte Inhalt vonEmpfohlen: Einführung in häufig verwendete Stile in Bootstrap4. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:segmentfault.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!