ブートストラップ2.3.2:スタートガイド

TwitterBootstrapロゴ

ブートストラップは CSSフレームワーク これはネットワーク全体で非常に人気があります。 彼らのスタイル 反応する ソーシャルネットワークで見られる トゥエンティ y Twitter。 これを使用すると、すべてのデバイスに適したクリーンなページスタイルを作成するために必要なすべての作業と労力が節約されるため、Webアプリケーションの開発にかかる時間を大幅に節約できます。 このフレームワークで使用されているスタイルを参照すると、今日多くのWebサイトで実装されているため、それらが私たちに馴染みのあるものであることがわかります。

構造

ブートストラップ構造イメージ

ブートストラップ流体構造

携帯電話やタブレットから当社のWebサイトにアクセスするには、Bootstrapが提供する流動的な構造を使用する必要があります。 この構造の使用は非常に簡単で、すべてが要素に基づいています スパン それは私たちを助けます レイアウト 私たちのウェブデザイン。 後で、このデザインにアクセスするとき スマートフォン o タブレット、これは自動的に上記のデバイスに適応し、ナビゲーションの品質を大幅に向上させます。 を使用します スパン 流体構造内の論理分割のクラスを使用します。

<div class="row-fluid">
   <div class="span2">Contenido</div>
</div>

ここで、数字の2はスパンのサイズを表します。 各行には、サイズ12の1スパン、またはサイズ2の6に十分なスペースが含まれており、これは必要に応じて分散できます。 行のスペースを超えると、自動的に次の行に移動し、次の行を使用できるようになります。 スパン サイズ12で改行を作成します。 スキップしたい場合 スパン 作成するとき、つまり4から開始します スパン、サイズ3を適用すると、次のコードが使用されます。

<div class="span2 offset4">Contenido</div>

これにより、除算はXNUMXつジャンプできます スパン コンテンツを表示する前に。 これは自由意志で使用でき、コードで必要なものをスキップできます。

オフセットクラスでスパンをスキップする

オフセットクラスでスパンをスキップする

デバイスごとに異なるデザイン

Bootstrapデバイスの排他クラスを含む画像

各デバイスを区別するためのCSSクラス

デバイスのタイプごとに異なる設計を適用するために、次のクラスを使用して、デバイスがどのデバイスに向けられているかを各論理区分に通知します。

このようにして、同じURLを持つデバイスごとにまったく異なるデザインを表示できます。

ボタン

カラーボタン

Bootstrapが提供するボタンのリスト

Bootstrapは、色付きのボタンのクリーンなレパートリーを提供します。その使用法は非常に簡単です。

<a class="btn btn-success" href="URL">
   Nombre del Botón
</a>

どこ btn btn-success ボタンの色を参照します。ボタンを変更するには、前の画像に示されているクラスに置き換えるだけです。

ブートストラップのインストール

このCSSフレームワークをインストールするために、投稿の最後に残すリンクからzipをダウンロードし、次のコードを記述します。 HTMLファイルの先頭に.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="./css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="./css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./js/bootstrap.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>

CSSファイルとJSファイルがHTMLファイルと同じフォルダーにあることを確認したら、レスポンシブWebサイトの設計を開始できます。

詳しくは - フォームの検証

ダウンロード- ブートストラップ:CSSフレームワーク


記事の内容は、次の原則に準拠しています。 編集倫理。 エラーを報告するには、 ここで.

コメント、あなたのコメントを残してください

コメントを残す

あなたのメールアドレスが公開されることはありません。 必須フィールドには付いています *

*

*

  1. データの責任者:MiguelÁngelGatón
  2. データの目的:SPAMの制御、コメント管理。
  3. 正当化:あなたの同意
  4. データの伝達:法的義務がある場合を除き、データが第三者に伝達されることはありません。
  5. データストレージ:Occentus Networks(EU)がホストするデータベース
  6. 権利:いつでも情報を制限、回復、削除できます。

  1.   アレ

    このフレームワークに関するチュートリアルはこれ以上ありませんか?