ホームページ >ウェブフロントエンド >jsチュートリアル >ブートストラップの基本学習_JavaScriptスキル
Bootstrap は、グリッド構造に基づいたフロントエンド構造フレームワークです (もちろん JS、JQuery も備えています)。その利点は、メディア クエリに基づいてコンテンツ フレームワークを迅速に構築できることです。もちろん、新しいバージョンでは IE6 はサポートされなくなり、IE8 のサポートも非常に制限されています。 HTML5 はあまりサポートされていません (正直に言うと、私自身はサポートしていません)。IE6 ~ 8 は、私のような初心者にとっては、使用する必要があるだけでなく、非常に難しい場合があります。プロジェクトには使用する必要がありますが、間違いを犯した場合は、オンラインで確認してください。方法を知っておく必要があります。)
早速、この期間の私の BS ノートをまとめてみましょう。
1. 構造コンテンツに関しては、BS の構造コンテンツの制御は基本的にクラスによって制御されます。たとえば、構造の制御は
です。<div class="container"> <div class="row"> <div class="col-md-4 col-xs-6"> 这一块div的类名中,是由col-md-4,col-xs-6这两个类名来控制他的框架宽度;其中col代表是栅格,md代表客户端显示器的宽度为pc中屏,同样的xs则代表客户端显示器为超小屏,也就是手机屏;4,6就代表了栅格的长度,意思就是在中屏显示器下宽度为4个栅格,在手机端宽度为6个栅格 ,一般情况下把把一整块div最多可以划成12个栅格,所以他的兄弟div在中屏下则是8个栅格! </div> <div class="col-md-8 text-muted">这一块div的类名中,抛去col-md-8不说,来说说text-muted.这个类则是控制这个div下的内容字体颜色的,当你把BS的css下载到本地后,你在css我文件中搜索text-muted,就会看到他的定义只有颜色,和他在一起的其他类名就分别定义了不同的颜色 </div> </div> </div>
2. 構造については上で説明しましたが、最初にナビゲーションについて説明します。元々、私たちが作成したナビゲーションは基本的なインライン UL で構成されていました (次の CSS を実装できます)。 BS)、
<ul class="list-inline"> <li>W3cplus</li> <li>Blog</li> <li>CSS3</li> <li>jQuery</li> <li>PHP</li> </ul>
BS では、それを実装するための nav クラスがありますが、ページ効果を引き出すために nav クラスは、垂直ナビゲーションの場合、nav-pills や nav-tabs などの他のクラスと組み合わせる必要があります。それはクラスにあります nav-stacked
を名前に追加します<ul class="nav nav-pill"> <li><a href="##">Home</a></li> <li><a href="##">CSS3</a></li> <li><a href="##">Sass</a></li> <li><a href="##">jQuery</a></li> <li><a href="##">Responsive</a></li> </ul>
3. ナビゲーション バーについて説明した後、BS のドロップダウン メニューについて説明します。BS のドロップダウン メニューは付属の js ファイルに依存する必要があり、独自の js も JQuery に依存します。 2つのファイルが必要です。このドロップダウン メニューのコードは少し複雑であることを説明する価値があります。ボタン内の data-toggle="dropdown" は外側の div クラス名と同じである必要があります。
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"> 下拉菜单 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> </ul> </div>
4. フォームについて話しましょう。Bootstrap フレームワークでは、クラス名 `form-control` がカスタマイズされます。つまり、これらの要素がクラス名「form-control」を使用すると、次のようになります。いくつかのデザインのカスタマイズ効果を実現します。
<form role="form"> <div class="form-group"> <label for="exampleInputEmail1">邮箱:</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入您的邮箱地址"> </div> <div class="form-group"> <label for="exampleInputPassword1">密码</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入您的邮箱密码"> </div> <div class="checkbox"> <label> <input type="checkbox"> 记住密码 </label> </div> <button type="submit" class="btn btn-default">进入邮箱</button> </form>
上記がこの記事の全内容です。皆さんに気に入っていただければ幸いです