Bootstrapのモジュールを列挙してみる | 中野ピク氏流CSS設計の話

はじめに

CSSのクラス命名する参考にBootstrapで定義されているクラス名を列挙していきます。

全て列挙するというよりは自身が気になるものを適当に自分のためにまとめていくだけです。

今後のCSS設計とクラス命名に役立てたいと思います。

主にBootstrap4.5のクラス名などです。

Bootstrapは(こちら)はじめに - Bootstrap 4.5 - 日本語リファレンス

Layout

Breakpoints

// Small devices (landscape phones, 576px and up) @media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up) @media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up) @media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up) @media (min-width: 1200px) { ... }

Containers

container
container-sm
container-md
container-lg
container-xl
container-fluid

Grid system

row
col-12
col-sm-12
col-md-12
col-lg-12
col-xl-12
justify-content-md-center

Utilities for layout

{対象}-{breakpoint}-{value}みたいにするのよさそう。

d-{breakpoint}
d-{breakpoint}-{value}
- none
- inline
- inline-block
- block
- table
- table-cell
- table-row
- flex
- inline-flex

Content

Images

img-fluid

Tables

table

Figures

figure
figure-img
figure-caption

コンポーネント

Glyphicons

アイコンフォントです。fontawesomeみたいなそういうのです。 - glyphicon - glyphicon-asterisk

Alerts

alert
alert-primary
alert-secondary
alert-success
alert-danger
alert-warning
alert-info
alert-light
alert-dark

Badges

badge (カテゴリ分けしたり、Newとかのラベル)
badge-primary
badge-secondary
badge-success
badge-danger
badge-warning
badge-info
badge-light
badge-dark
badge-pill (形状)

Breadcrumbs

breadcrumb

Button (Button groups, Button dropdowns)

ボタングループとボタン自体のmodifierみたいなクラス群です。 - btn-group - btn - btn-default - btn-toolbar - btn-group-lg - btn-group-justified - btn-primary - btn-success - btn-info - btn-warning - btn-danger - btn-lg (large) - btn-sm (small) - btn-xs (extra small)

Cards

card
card-title
card-body
card-text

Dropdowns

ドロップダウンだけどselectタグで出来ているわけではなく、上に表示されるものもあります。 - dropdown - dropup

Input groups

input-group
form-control (inputタグに付与するクラス)
input-group-lg
input-group-sm

Jumbotron

jumbotron

List group

list-group
list-group-item

Modal

modal

Navs

nav
nav-tabs

Navbar

navbar
navbar-default
navbar-brand
navbar-left
navbar-right
navbar-fixed-top
navbar-fixed-bottom
navbar-static-top
navbar-header
navbar-inverse

Pagination

pagination (1, 2, 3, 4, 5とか数字でページ指定するモジュール)
pagination-lg
pagination-sm

Popovers

popover (弾けて飛び出るの意)

Progress

progress
progress-bar

Spinners

spinner
spinner-border
spinner-grow

Thumbnails

thumbnail

状態を表すもの(modifierとして使われているようなもの)

disabled
active (タブ、)
stacked (縦に並べるとき、積み上げ)
justified
collapsed
inverse
rounded
horizontal
vertical
float-left
float-right
fluid (流体)
visible (表示状態)
hidden (display: none;の状態)
invisible (visibility: hidden;の状態)

サイズを表すもの

その他の単語(単体で使われてるもの)

divider (仕切り)
separator
caret
caption

Bootstrapではない参考クラス名

reveal (詳細な説明文などの要素が付加されているパターンにつけるmodifier名)
collection (リストグループと同じ意味)
collection-item (リストアイテムと同じ意味)
floating (position: fixed;で付いてくるときのmodifier名)
icon (glyphicon)

気づいたこと

info => warning => danger ぐらいで重要度を表現するのもよさそうだけど現場によっては3段階では足りなさそう

中野ピク氏の絵のブログ

絵を描いたり、絵についての文を書いたりします。