このレスポンシブフレームワークは、フロントエンドを勉強している人なら誰でも知っているのではないでしょうか? 以前このフレームワークに触れたのは、前節のページデザインの上級編で習っていたときでした.インターフェイス、および内部の入力ボックスは非常に面倒でした。
パソコンだと横幅が違うとか、携帯電話で書くときれいなWebページの見え方が変わってしまうなど、すべて固定幅・高さで書くためレスポンスが悪いのが原因ですが、この問題は内部のソリューションは非常に優れています。これがブートストラップの最大の利点であるため、弾丸をかみ、ブートストラップの学習を開始しました。
<div class="dropdown dropup">
<button class="btn btn-info">分列式下拉菜单</button>
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu " role="menu">
<li role="menuitem"><a href="#">菜单</a></li>
</ul>
</div>ブートストラップは jquery の実行に依存しているため、コードを記述するときに jquery.js および bootstrap.min.js ファイルを導入する必要があります。これは内部のドロップダウン ボックスのコードです。そのクラスは非常に強力であると言わざるを得ません。構造とクラス名を組み合わせることで、素敵なドロップダウン メニューを実現できます。
新しいパネルもあります:
これをみんなに書いてほしいとしたら、どうやってそれを実現するのでしょうか? 私に書いてもらいたいのなら、何十行も書かないと本当に足りないのですが、ブートストラップでクラス名を使用した後、コードが非常に簡潔であることがわかります。インターフェイスは非常に美しいです。
<div class="panel panel-success">
<div class="panel-heading">
提示
</div>
<div class="panel-body">
<p>
开始进行表单和输入框的学习！
</p>
</div>
<div class="panel-footer">
<p>邮箱：[email protected]</p>
</div>
</div>ほんの数行で、自分でスタイルを書く必要はありません。背景色やフォント サイズなどについては話さないようにしましょう。
このフレームワークはクラスが多く、構造が決まっているので、習得する過程で落ち着く必要があります.もちろん自分で書くこともできますが、多くの場合、ブートストラップの構造だけでプロジェクトを完成させることができます.
そこにはたくさんのクラス名があります:
このカプセルのラベルを見て、みんなにやってもらいたいと思うと頭が痛くなる
<ul class="nav nav-pills" role="tablist">
<li class="presentation active"><a href="">信息<span class="badge">100</span></a></li>
<li class="presentation"><a href="">信息<span class="badge">100</span></a></li>
<li class="presentation"><a href="">信息<span class="badge">100</span></a></li>
</ul>そして、これらの数行しか必要ありませんが、内部のクラス名が間違っている可能性はありません。1 つ間違っていればそれは間違っています。ul が 3 つ、li が 1 つ、span が 1 つあります。面倒ですが、自分で書くよりははるかに優れています。
ブートストラップを学ぶのは難しいことではありませんが、私は辛抱強く、多くの構造やクラス名を書き留めることができないのではないかと心配しています。
要するに, ブートストラップは良いことです. それを学んだ後, それは間違いなくあなた自身のページを開発する効率を向上させます, また、非常に美しいページを設計することもできます, しかし、学習プロセスもかなり不快です. さまざまな構造とクラスが人を作る頭皮の毛麻、アニメーションなど。本当にフロントエンドをうまく学習したい場合は、このフレームワークを学び、辛抱強く待つ必要があります。