Bootstrapノート
5846 ワード
1.HTML 5の文書型に設定:
2.適切な描画とタッチスクリーンの拡大・縮小を確保するには、次の手順に従います.
3.ズーム機能を無効にすると、ユーザーは画面をスクロールするだけで、あなたのサイトをオリジナルのアプリケーションのように見せることができます.
4.containerコンテナと.container-fluidコンテナの両方はネストできません.
5.列によっては、他の列よりも高い場合があります.この問題を克服するために、併用することを提案する.clearfixおよびレスポンスツールクラス:
6.用col-md-offset-*クラスは、列を右側にオフセットできます.
7.内蔵のグリッドシステムは内容を再びネストし、
8.使用により.col-md-push-後ろと.col-md-pull-前のクラスでは、カラムの順序を簡単に変更できます.
9.変数は事前定義されたグリッドクラスを生成する
mixinは、グリッド変数とともに使用され、各カラムに意味化されたCSSコードを生成するために使用されます.
10.デフォルト設定を使用して、2つのカラムレイアウト(カラム間に間隔がある)のケースを生成します.
11.文字構文
<html lang="zh-CN">
...
html>2.適切な描画とタッチスクリーンの拡大・縮小を確保するには、次の手順に従います.
"viewport"content="width=device-width, initial-scale=1"> 3.ズーム機能を無効にすると、ユーザーは画面をスクロールするだけで、あなたのサイトをオリジナルのアプリケーションのように見せることができます.
4.containerコンテナと.container-fluidコンテナの両方はネストできません.
"container" width=“ ”>
...
"container-fluid">/* 100%*/
...
(<768px) .col-xs-
(≥768px) .col-sm-
(≥992px) .col-md-
5.列によっては、他の列よりも高い場合があります.この問題を克服するために、併用することを提案する.clearfixおよびレスポンスツールクラス:
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3div>
<div class="clearfix visible-xs-block">div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3div>
div>6.用col-md-offset-*クラスは、列を右側にオフセットできます.
<div class="row">
<div class="col-md-4">.col-md-4div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4div>
div>7.内蔵のグリッドシステムは内容を再びネストし、
.row .col-sm-* .col-sm-* 。
（row） （column） 12（ ， 12 ）。
<div class="row">
<div class="col-sm-9"> Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6"> Level 2: .col-xs-8 .col-sm-6div>
<div class="col-xs-4 col-sm-6">Level 2: .col-xs-4 .col-sm-6div>
div>
div>
div>8.使用により.col-md-push-後ろと.col-md-pull-前のクラスでは、カラムの順序を簡単に変更できます.
9.変数は事前定義されたグリッドクラスを生成する
@grid-columns:12;@grid-gutter-width:30px;@grid-float-breakpoint:768px;
mixinは、グリッド変数とともに使用され、各カラムに意味化されたCSSコードを生成するために使用されます.
10.デフォルト設定を使用して、2つのカラムレイアウト(カラム間に間隔がある)のケースを生成します.
.wrapper{
.make-row();
}
.content-main{
.make-lg-column(8);
}
.content-secondary{
.make-lg-column(3);
.make-lg-column-offset(1);
}
"wrapper">
"content-main">...
"content-secondary">...
11.文字構文
.lead
，
.text-left/center/right
.text-nowrap
.text-uppercase/lowercase
.text-capitalize
attr /* abbr ， attribute，class attr */
ul .list-inline