Bootstrapグローバルスタイル-レイアウトとリンク

4491 ワード

インテリジェントポイント
Bootstrap 3では、モバイルデバイスが優先されます.適切な描画とタッチスクリーンのスケールを確保するには、viewportメタデータラベルを追加する必要があります.

モバイルデバイスブラウザで、ビューポート(viewport)にmetaプロパティをuser-scalable=noに設定することで、ズーム機能を無効にできます.注意、この方法は状況に応じて使用すべきで、すべてのサイトが適用されるわけではありません.

レイアウトとリンク
  • body要素にbackground-color:#fffを設定する.
  • @font-family-base、@font-size-baseおよび@line-height-base変数をレイアウトの基本パラメータとして使用する
  • すべてのリンクに基本色@link-colorを設定し、リンクが:hover状態の場合に下線
  • を追加します.
    レイアウトコンテナ.containerクラスは、幅を固定し、応答レイアウトをサポートするためのコンテナである..container-fluidクラスは、幅100%で、ビューポート全体を占めるコンテナに使用されます.注意:この2つのコンテナクラスは互いにネストできません.
    タイトルBootstrapには、すべてのHTMLタイトル(h 1~h 6)のスタイルが定義されています.タイトルにはsmallラベルとsmallクラスも含まれており、副タイトルをマークするために使用されます.
        

    h1. 36px

    h2. 30px

    h3. 24px

    h4. 18px

    h5. 14px
    h6. 12px
    ページ本体font-sie:!4px;line-height:1.428は、これらの属性が要素とすべての段落要素に直接付与される.要素はまた、1/2行の高さ(すなわち10 px)に等しい底部外側距離(margin)を設けられる..leadはテキストを強調します.
    インラインテキスト要素
  • mark:
  • 削除:
  • 不要テキスト:
  • 挿入テキスト:
  • 下線付きテキスト:
  • トランペットテキスト:または.small
  • 重点:
  • 斜体:
  • 配置
        

    Left aligned text.

    Center aligned text.

    Right aligned text.

    Justified text.

    No wrap text.

    大文字と小文字
        

    Lowercased text.

    Uppercased text.

    Capitalized text.

    略語
        attr
        HTML
    
    アドレスを参照すると、ソースの名前はラベルに包まれることができる.直接参照はを使用する..blockquote-reverseは、参照されたテキストを右揃えに表示することができる.
    実例
    
    
    
        
        
        
        
          
        
        
        
        
    
    
    
    

    container-fluid: 100%

    container

    h1. 36px

    h2. 30px

    h3. 24px

    h4. 18px

    h5. 14px
    h6. 12px

    p,

    lead

    Left aligned text.

    Center aligned text.

    Right aligned text.

    Justified text.

    No wrap text.

    Lowercased text.

    Uppercased text.

    Capitalized text.

    attr HTML