bootstrap4 メモ | クズリーマンのカス備忘録

bootstrap4 メモ

html5-logo bootstrap
スポンサーリンク

今までEvernoteにメモってたんだけど、Evernote、3台以上の端末で使うと、端末解除せんといかんから(ぼく無料ユーザー)、いつでも参照しやすいようにブログにメモメモ。

基本はドットインストールさんで学んだことをメモするので、ちゃんと分かりやすく勉強したい人はそっちを見てください。

関係者の方、もし消せということであればコメントいただければ消します。

公式サイト

TOPページ

個々の記述方法が書いてるDocumentation

!impotat指定されてるからcssの上書きができない

です。

bgcolorと文字の横位置

SS

bootstrapの画面

コード


<div class="text-center bg-primary">box</div>
<div class="text-center bg-secondary">box</div>
<div class="text-right bg-info">box</div>
<div class="text-center bg-warning">box</div>
<div class="text-center bg-dark text-light font-weight-bold">box</div>

dot install動画のリンク

403 Forbidden
dotinstall.com

関連するBootstrapのヘルプ

Text
Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.
getbootstrap.com
Colors
Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.
getbootstrap.com

横幅や縦幅を%で指定する

SS

ss

code

横幅を比率で指定できる。

25%としたい場合、


w-25

縦幅も比率で指定できる。

10%としたい場合、


h-10

指定できる値は、

10%、25%、50%、75%、100%

100%の戸愚呂弟

margin, padding

 

指定方法

[p|m][location]-[size]

location:

– t, b, l, r

top, bottom, left, right
それぞれ指定したい場合

– x, y
左右両方を指定したい場合はx
上下両方を指定したい場合はy

size:
– 0: 0
– 1: 0.25rem
– 2: 0.5rem
– 3: 1.0rem
– 4: 1.5rem
– 5: 3.0rem
– auto

 

例

paddingで、左右方向で、1.5rem の場合


px-4

 

dotinstall bootstrap4 #6

403 Forbidden
dotinstall.com

ボタン

ボタンのイメージ


<button class="btn btn-primary">OK</button>
<button class="btn btn-info btn-sm">OK</button>
<button class="btn btn-danger btn-lg">OK</button>

関連するBootstrapのヘルプ

Buttons
Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
getbootstrap.com

 

グリッドシステム

グリッドのSS


<div class="container">
<div class="row mb-3">
<div class="col-4 bg-primary">1</div>
<div class="col-4 bg-secondary">2</div>
<div class="col-4 bg-success">3</div>
</div>
<div class="row mb-3">
<div class="col-8 bg-danger">1</div>
<div class="col-4 bg-warning">2</div>
</div>
<div class="row mb-3">
<div class="col-4 bg-danger">4</div>
<div class="col-4 bg-warning">4</div>
</div>
<div class="row mb-3">
<div class="col-10 bg-danger">10</div>
<div class="col-4 bg-warning">4</div>
</div>
</div>

12を分割して使う。

container

これで囲う。自動的に中央寄せにしてくれる。

row

行。

container > row > col

の位置に配置する。

col

列。

12を分割して使う。

col-●●の合計が、12未満の場合、右端が何も無しになる

col-●●の合計が、12より多い場合、途中で折り返して表示される。

 

注意点

aaaaaaaaaaaみたいに長くつなげた英数字を書くと、折り返されない。一単語とみなされるからかな？

 

グリッドシステムで、表示指定、非表示指定

指定方法

576px: sm

768px: md

992px: lg

1200px: xl

code

ミディアムなら、2:10、

スモールなら、10:2

にする場合、


<div class="col-md-2 col-sm-10 bg-primary">1</div>
<div class="col-md-10 col-sm-2 bg-secondary">2</div>

 

ミディアムなら非表示にする場合


d-md-none

基本的には非表示だが、ミディアムの場合だけ表示にする場合


d-none d-md-block

 

グリッドシステムのcolの左右順番を変える

PCとスマホで左右の順番を変えたい場合など。

code

order-サイズ-順番

みたいにする。

サイズは、smとかmdとか。

順番は1とか2とか。


<div class="row">
<div class="col-sm-8 order-sm-2">
左から2番めに表示
</div>

<div class="col-sm-4 order-sm-1">
左から1番めに表示
</div>
</div>

こんなかんじ。

 

table

code


<table class="table"%gt;

単純でござる。

bootstrapのtableにマウスオーバーしたところ

↑なかんじでマウスオーバーした行を灰色にしする場合、


.table-hover

tab

bootstrapのtab練習


    <div class="container">
      <ul class="nav nav-tabs">
        <li class="nav-item"><a href="#ios" class="nav-link active" data-toggle="tab">たぶ1</a></li>
        <li class="nav-item"><a href="#android" class="nav-link" data-toggle="tab">たぶ2</a></li>
      </ul>
    <div class="tab-content py-4">
      <div id="ios" class="tab-pane active">
        <p>たぶ1。たぶ1。たぶ1。たぶ1。たぶ1。たぶ1。たぶ1。たぶ1。たぶ1。たぶ1。たぶ1。たぶ1。たぶ1。たぶ1。</p>
      </div>
      <div id="android" class="tab-pane">
        <p>たぶ２。たぶ２。たぶ２。たぶ２。たぶ２。たぶ２。たぶ２。たぶ２。たぶ２。たぶ２。たぶ２。たぶ２。たぶ２。たぶ２。</p>
      </div>
    </div>
    </div>

 

クラスの詳細

タブタイトル

ulに付与。

nav nav-tabs

 

各タブタイトル<li>に付与。

nav-item

 

各タブタトルのリンク<a>に付与。

nav-link

最初に選択させとくのに付与。

active

 

タブコンテンツ

divでくくって、付与。

tab-content

 

各タブコンテンツにdivでくくって付与。

tab-pane

最初に選択させとくのに付与。

active

footer

bootstrapで作ったfooterのイメージ


<!--footer-->
  <footer class="text-center text-muted py-4">
    Copyright 2018 it-afi.com
  </footer>

 

tooltip

bootstrapのtooltip-上版
html側


  <p>ツールチップの<span class="font-weight-bold text-info" data-toggle="tooltip" title="クリビツテンギョウ">練習でござあぁる</span>ううぅぅ。</p>

bootstrapのtooltip−下
のように、下側にツールチップを表示する場合、
data-placement=”bottom”
を付与する。


<p>ツールチップの<span class="font-weight-bold text-info" data-toggle="tooltip" title="クリビツテンギョウ" data-placement="bottom">練習でござあぁる</span>ううぅぅ。</p>

jQuery側


    <script>
$(function() {
  'use strict';
  $('[data-toggle="tooltip"]').tooltip();
});
    </script>

ナビゲーションバー

bootstrapのナビゲーションバー


  <div class="container">
    <nav class="navbar navbar-expand navbar-light">
      <a href="" class="navbar-brand">Logo</a>
      <ul class="navbar-nav">
        <li class="navbar-item"><a href="" class="nav-link">Link</a></li>
        <li class="navbar-item"><a href="" class="nav-link">Link</a></li>
        <li class="navbar-item"><a href="" class="nav-link">Link</a></li>
      </ul>
    </nav>
  </div>

 

ハンバーガーメニュー

bootstrap ハンバーガーメニュー

↓


    <nav class="navbar navbar-expand-sm navbar-light">
      <a href="" class="navbar-brand">Logo</a>
      <!-- ハンバーガーメニュー -->
      <button class="navbar-toggler" data-toggle="collapse" data-target="#menu">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div id="menu" class="collapse navbar-collapse">
        <ul class="navbar-nav">
          <li class="navbar-item"><a href="" class="nav-link">Link</a></li>
          <li class="navbar-item"><a href="" class="nav-link">Link</a></li>
          <li class="navbar-item"><a href="" class="nav-link">Link</a></li>
        </ul>
      </div>
    </nav>

上のハイライトした部分を追加。

あと、1行目のnavbar-expandをnavbar-expand-smとした。

⇒smサイズのときだけハンバーガーメニューを表示させる。

アラート

基本

bootstrapのアラートのスクショ基本


  <!-- alert -->
  <div class="alert alert-info text-center">
    あらーとだあああ！
  </div>

 

角丸とmargin-bottomを無くす

デフォルトだと、margin-bottomがついてるから、

mb-0

も指定して除外する。
デフォルトだと、背景の四角形が角丸になってるから普通の資格にするために

rounded-0

を指定する。
上記2点をやるとこうなる。
bootstrapのアラートで角丸排除


  <!-- alert -->
  <div class="alert alert-info text-center">
    あらーとだあああ！
  </div>

アラートの表示を消すxボタンを付与する

classに

alert-dismissible

を追記。
buttonを追加。
上記2点をやるとこうなる。
bootstrapのアラートにバツボタンを付与したスクショ


  <!-- alert -->
  <div class="alert alert-info text-center mb-0 rounded-0 alert-dismissible">
    あらーとだあああ！
    <button class="close" data-dismiss="alert">
      &times;
    </button>
  </div>

xボタンを押下したときにアラート表示をフワッと消す

classに


fade show

を追加する。

code全体


  <!-- alert -->
  <div class="alert alert-info text-center mb-0 rounded-0 alert-dismissible fade show">
    あらーとだあああ！
    <button class="close" data-dismiss="alert">
      &times;
    </button>
  </div>
スポンサーリンク

コメント

タイトルとURLをコピーしました