推奨: bootstrap4 でよく使用されるスタイルの紹介

この記事の内容は、bootstrap4 でよく使われるスタイルの紹介に関するもので、困っている方の参考になれば幸いです。

背景

最近、小規模な学習プロジェクトを行うときに bootstrap4 を何度も使用したため、将来のレビューのためにここでブートストラップを整理します。 (無料のビデオ コースの推奨: bootstrap チュートリアル )

bootstrap4 のインストール

f9ba78e6ee608a4cca8d7a927f90afcc
be22f17e17bf8643020513b87fa46c5a2cacc6d41bbb37262a98f745aa00fbf0
764024de193b62b10426d4fc6738c9f12cacc6d41bbb37262a98f745aa00fbf0
ace482f13b4c0348df2a0e1268233d2b2cacc6d41bbb37262a98f745aa00fbf0

コンテナとグリッド システム

コンテナ コンテナ - 流体//コンテナクラス前者は固定幅、後者は100%幅です

テキストレイアウト

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

Color

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"
b7cdcb0ee4bc36411fa74e4e5b84f4e316b28748ea4df4d9c2150843fecfba68
522dee5a9e032a609c190d198a2bc97a16b28748ea4df4d9c2150843fecfba68
b1f4a67446def6c49a9f0aa21517b1ac16b28748ea4df4d9c2150843fecfba68
 0b561c7c414147a96bbbb8cc10c3d06d
        561426e822a73b81b8a9d4ad3ad91e91模态框头部0f6dfd1e3624ce5465eb402e300e01ae
        6e52c62ccaa796a4ccb90a0458fc6482×65281c5ac262bf6d81768915a4a77ac0
      16b28748ea4df4d9c2150843fecfba68
6e1ceff927595656120650f97442eabc模态框内容..16b28748ea4df4d9c2150843fecfba68
fcea287e1681f6566fd9116658b8e4f0c92346fd5668c72f0e5c132a5c66d4da关闭65281c5ac262bf6d81768915a4a77ac016b28748ea4df4d9c2150843fecfba68

プロンプト ボックス リーリーリー

以上が推奨: bootstrap4 でよく使用されるスタイルの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。