bootstrap 4学習まとめ

13602 ワード
ブックストリーム css

クイックスタート


css

headへの貼り付けスタイルシートのコピー

integrity
ブラウザで取得したリソースファイルのハッシュ値であり、base 64で符号化された方法で秘密化されたローメタデータが含まれています.これにより、ユーザーは取得したリソースを検証することができ、転送時に不正に改ざんされず、詳細はSubresource Integratyを参照できます.
簡単に言えばCDNによるjavascriptの改ざんを防ぐための
「anonymous」はドメイン間要求(すなわちOrigin:HTTPヘッダを含む)を開始する.ただし、認証情報は一切送信(すなわち、クッキー、X.509証明書、HTTP基本認証情報は送信).この画像は、サーバがソース局証明書(Access-Control-Allow-Origin:HTTPヘッダを設定しない)を与えない場合に汚染する使用を制限する.
リファレンス接続:https://imququ.com/post/subre...

JS


jQuery、Popperに依存する.js,bootstrap独自プラグイン

を える
:bootstrap.bundle.jsにはPopperが まれており、jQueryは まれていません.



  
    
    
    

    
    

    Hello, world!
  
  
    
Hello, world!

meta


Box-sizing


を のように します.
{
    box-sizing: content-box ---> border-box
}

Layout


Containers


ソースコード
.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

ページ の.containerはフルスクリーンではありません
@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

メディアクエリ max-widthのブレークポイントによって が になる
があるはずだ, で そうcontaine-fulidを してウィンドウ を たす

Z-index


のコンポーネントはz-indexを します.
$zindex-dropdown:          1000 !default;
$zindex-sticky:            1020 !default;
$zindex-fixed:             1030 !default;
$zindex-modal-backdrop:    1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;


:flexレイアウトとメディアクエリーに づく
コードクリップ

  

    

      One of three columns
    

    

      One of three columns
    

    

      One of three columns

まず.row
.row {
  //
  display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
  display: -ms-flexbox; /* IE 10 */
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

css の がわかる.それからmarginの はそれぞれ-15 pxを って、ここで は き ばしますと します.row の 、および.container .col-smを てみましょう

//    columns       
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
.col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
.col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md,
.col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg,
.col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl,
.col-xl-auto {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}


@media (min-width: 576px) {

.col-sm {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }

}

まず の 、ming-height: 1px、これは の に つのか、 に えば、.col-smの がテキストを まないとき、 に り む まずい は しません.ここで は の を にして して、flex を かない:)
ここでまず5 layoutといえば,extra small(<576 px),small(≧576 px),medium(≧768 px),large(≧992 px),extra large(≧1200 px)である..col-smはextra small に しています..no-gutter columnsのpaddingおよび.rowのmarginの 
.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.no-gutters > .col,
.no-gutters > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

.colすべてのlayoutに 
.col {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
}

ここではmax-widthとflex-growの がviewportを たしていることに してください.

.w-100

.w-100 {
  width: 100% !important;
}

に できるテクニック

  

    
Column

    
Column

    

    
Column

    
Column

.col-{breakpoint}-auto 
.col-md-auto {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }

このcolumnの は で げられています!

Alignment


  

    

      One of three columns
    

    

      One of three columns
    

    

      One of three columns
    

  

  

    

      One of three columns
    

    

      One of three columns
    

    

      One of three columns
    

  

  

    

      One of three columns
    

    

      One of three columns
    

    

      One of three columns

コントロールrowの 
//  .align-items-stretch .align-items-baseline       
.align-items-start {
  -webkit-box-align: start !important;
  -ms-flex-align: start !important;
  align-items: flex-start !important;
}

.align-items-end {
  -webkit-box-align: end !important;
  -ms-flex-align: end !important;
  align-items: flex-end !important;
}

.align-items-center {
  -webkit-box-align: center !important;
  -ms-flex-align: center !important;
  align-items: center !important;
}

.align-items-baseline {
  -webkit-box-align: baseline !important;
  -ms-flex-align: baseline !important;
  align-items: baseline !important;
}

.align-items-stretch {
  -webkit-box-align: stretch !important;
  -ms-flex-align: stretch !important;
  align-items: stretch !important;
}

もっとalign-itemの いはこの を にすることができます
およびalign-selfを するクラス
.align-self-auto {
  -ms-flex-item-align: auto !important;
  align-self: auto !important;
}

.align-self-start {
  -ms-flex-item-align: start !important;
  align-self: flex-start !important;
}

.align-self-end {
  -ms-flex-item-align: end !important;
  align-self: flex-end !important;
}

.align-self-center {
  -ms-flex-item-align: center !important;
  align-self: center !important;
}

.align-self-baseline {
  -ms-flex-item-align: baseline !important;
  align-self: baseline !important;
}

.align-self-stretch {
  -ms-flex-item-align: stretch !important;
  align-self: stretch !important;
}


  

    

      One of two columns
    

    

      One of two columns
    

  

  

    

      One of two columns
    

    

      One of two columns
    

  

  

    

      One of two columns
    

    

      One of two columns
    

  

  

    

      One of two columns
    

    

      One of two columns
    

  

  

    

      One of two columns
    

    

      One of two columns

justify-contentを して する
  .justify-content-sm-start {
    -webkit-box-pack: start !important;
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
  }
  .justify-content-sm-end {
    -webkit-box-pack: end !important;
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
  }
  .justify-content-sm-center {
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
  }
  .justify-content-sm-between {
    -webkit-box-pack: justify !important;
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
  }
  .justify-content-sm-around {
    -ms-flex-pack: distribute !important;
    justify-content: space-around !important;
  }

order-* 

.order-first {
  -webkit-box-ordinal-group: 0;
  -ms-flex-order: -1;
  order: -1;
}

.order-last {
  -webkit-box-ordinal-group: 14;
  -ms-flex-order: 13;
  order: 13;
}

.order-0 {
  -webkit-box-ordinal-group: 1;
  -ms-flex-order: 0;
  order: 0;
}

.order-1 {
  -webkit-box-ordinal-group: 2;
  -ms-flex-order: 1;
  order: 1;
}

.order-2 {
  -webkit-box-ordinal-group: 3;
  -ms-flex-order: 2;
  order: 2;
}

.order-3 {
  -webkit-box-ordinal-group: 4;
  -ms-flex-order: 3;
  order: 3;
}

.order-4 {
  -webkit-box-ordinal-group: 5;
  -ms-flex-order: 4;
  order: 4;
}

.order-5 {
  -webkit-box-ordinal-group: 6;
  -ms-flex-order: 5;
  order: 5;
}

.order-6 {
  -webkit-box-ordinal-group: 7;
  -ms-flex-order: 6;
  order: 6;
}

.order-7 {
  -webkit-box-ordinal-group: 8;
  -ms-flex-order: 7;
  order: 7;
}

.order-8 {
  -webkit-box-ordinal-group: 9;
  -ms-flex-order: 8;
  order: 8;
}

.order-9 {
  -webkit-box-ordinal-group: 10;
  -ms-flex-order: 9;
  order: 9;
}

.order-10 {
  -webkit-box-ordinal-group: 11;
  -ms-flex-order: 10;
  order: 10;
}

.order-11 {
  -webkit-box-ordinal-group: 12;
  -ms-flex-order: 11;
  order: 11;
}

.order-12 {
  -webkit-box-ordinal-group: 13;
  -ms-flex-order: 12;
  order: 12;
}



  
.col-md-4

  
.col-md-4 .offset-md-4





  
.col-md-3 .offset-md-3

  
.col-md-3 .offset-md-3





  
.col-md-6 .offset-md-3

いずれもmargin-leftのパーセント オフセット を します
.offset-md-0 {
    margin-left: 0;
  }
  .offset-md-1 {
    margin-left: 8.333333%;
  }
  .offset-md-2 {
    margin-left: 16.666667%;
  }
  .offset-md-3 {
    margin-left: 25%;
  }
  .offset-md-4 {
    margin-left: 33.333333%;
  }
  .offset-md-5 {
    margin-left: 41.666667%;
  }
  .offset-md-6 {
    margin-left: 50%;
  }
  .offset-md-7 {
    margin-left: 58.333333%;
  }
  .offset-md-8 {
    margin-left: 66.666667%;
  }
  .offset-md-9 {
    margin-left: 75%;
  }
  .offset-md-10 {
    margin-left: 83.333333%;
  }
  .offset-md-11 {
    margin-left: 91.666667%;
  }

でscssカスタマイズについて しますが、しばらく します.
スタイルライブラリデザインガイド
サーバコントロールのID,ClientID,UniqueIDの違い