Bootstrap

BootstrapとはTwitterが開発したCSSフレームワークで、CSSフレームワークの中では1番ポピュラーな存在です。 この記事では、Bootstrapの使い方をサンプルを交えて解説します。この記事自体もBootstrapを使っています。

使い方

Bootstrap
ItemDescription
URL https://getbootstrap.com/
License MIT
Bootstrap v4.5.2
ModuleSize
bootstrap.min.css156KB
bootstrap.min.js58.5KB

チートシート

  • Getting started
  • CDN
  • Background
  • .bg-*
  • Badge
  • .badge
  • .badge-primary
  • .badge-secondary
  • .badge-success
  • .badge-danger
  • .badge-warning
  • .badge-info
  • .badge-light
  • .badge-dark
  • .badge-pill
  • Button
  • .btn
  • .btn-outline-*
  • .btn-lg
  • .btn-sm
  • .btn-block
  • .btn-disabled
  • Card
  • .card-body
  • .card-title
  • .card-header
  • .card-footer
  • .card-img-top
  • Color
  • .text-*
  • Form
  • .form-control
  • .form-control-lg
  • .form-control-sm
  • .form-control-range
  • .form-check
  • .form-check-inline
  • Grid
  • Breakpoint
  • .container
  • .col
  • .col-{n}
  • Image
  • .img-fluid
  • .img-thumbnail
  • .rounded
  • .float-left
  • .float-right
  • .mx-auto .d-block
  • .text-center
  • List
  • .list-group
  • .active
  • disabled
  • .list-group-item-action
  • .list-group-item-primary
  • .list-group-item-secondary
  • .list-group-item-success
  • .list-group-item-danger
  • .list-group-item-warning
  • .list-group-item-info
  • .list-group-item-light
  • .list-group-item-dark
  • Margin
  • .mt-*
  • .mr-*
  • .mb-*
  • .ml-*
  • .mx-*
  • .my-*
  • Navigation
  • .breadcrumb
  • .nav
  • .justify-content-center
  • .justify-content-end
  • .flex-column
  • .nav-pills
  • Padding
  • .pt-*
  • .pl-*
  • Shadow
  • .shadow
  • .shadow-sm
  • .shadow-lg
  • Table
  • .table
  • .table-dark
  • .table-striped
  • .table-bordered
  • .table-borderless
  • .table-hover
  • .table-sm
  • .thead-dark
  • .thead-light