日1:ブートストラップ基本

Feynman Technologyは、教科を教えることがあなたをより良くすると言います.このポストの間違いを見たなら、あなたは私を訂正するかもしれない

ブートストラップでスタイリング！

ブートストラップはCSSのフレームワークです.
起動するには、必要なスタイルシートをインポートする必要があります✨.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>

その後、ブートストラップ応答設計に影響を受けたいものは、コンテナの流体クラスでdivに入れ子にする必要があります.

<div class="container-fluid">
 <!-- Put the affected elements here! -->
</div>

できた?その後、設定している!

ハウツーとスタイル

要素をスタイル化するには、要素に特定のクラスを配置します.例えば、テキストを中心にしてください.

<p class="text-center">LOL</p>

それだ!追加のスタイルシート、ちょうどクラス🎉! これらのクラスは事前に決定されるので、インターネット上でこれを検索することができます.
これらのクラスは次のように組み合わせることができます.

<button class="btn btn-default">
 I am a button
</button>

我々はすぐにボタンについて話すつもりです👀)
画面サイズに応じてあなたのイメージを作るIMG応答のような他の多くのクラスがあります.

ボタン

ボタンは、特定のクラスbtnを考慮する必要があります.ボタン.また、デフォルトのスタイルを持っています(上記の例を参照ください).
それ以外に、ブロック要素のように振る舞うbtn-blockもあります.

<button class="btn btn-default btn-block">
 I'm blocked
</button>

彼らは水平方向にストレッチし、他の要素を強制的にボタンの下に移動した後.
また、デフォルトの他のスタイルがありますbtn-primary、btn-info、btn-dangerなど.

ブートストラップにおける色管理

ボタンでは、プライマリ、情報、危険色などがあります.
ただし、これはボタンに限らない.テキストもこの色の仕様を持っています.
IMO、これはあまりにもRainbow - Yスタイルの問題を回避します.そこでは、開発者がカラーを保っていて、ユニコーンFuglyサイトを形成します.私がサイトを建設している次の時、確かに私を助けるつもりです.

グリッドシステム🔥

デフォルトでは、ブートストラップはコンテナの内部に見えないグリッドを適用します.その12行のグリッドは、柔軟な行です.
同じ行に要素を置くのは次のようになります.

<div class="row">
  <!-- 1st element -->
  <!-- 2nd element -->
</div>

列を持つ要素の幅を指定するには、次の構文を使用します.

<div class="col-x-y">
  !<-- Element to be resized -->
</div>

xがスクリーンサイズ(MD、XSなど)であり、yが列数である.

余韻

それは、私が今日どれくらい得たかです.このポストを書くのが実際の学習より難しいと感じました🤣. とにかく、明日あなたに会いましょう!
Githubに従ってください!
また!