Bootstrap grundlegende Javascript-Lernfähigkeiten

Bootstrap ist ein Front-End-Struktur-Framework, das auf einer Rasterstruktur basiert (natürlich verfügt es auch über JS, JQuery). Sein Vorteil besteht darin, dass das Inhalts-Framework schnell basierend auf Medienabfragen erstellt werden kann Verschiedene Benutzer, egal ob Mobiltelefon, Tablet oder PC, können sich grundsätzlich anpassen. Die neue Version unterstützt IE6 natürlich nicht mehr, und die Unterstützung für IE8 ist schließlich auch sehr eingeschränkt Unterstützt HTML5 nicht sehr gut. (Um ehrlich zu sein, ich selbst unterstütze es nicht.) Für einen Junior-Spieler wie mich ist die Kompatibilität manchmal wirklich schwierig für Projekte, aber ich muss es auch für Interviews verwenden. Wenn Sie darauf stoßen, überprüfen Sie es einfach online. Sie müssen immer noch wissen, wie es geht

Beginnen wir ohne weitere Umschweife damit, meine Bachelor-Notizen aus dieser Zeit zusammenzufassen!

1. In Bezug auf den strukturellen Inhalt wird die Kontrolle über den strukturellen Inhalt von BS im Wesentlichen durch Klassen gesteuert. Die Kontrolle über die Struktur ist beispielsweise

<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. Die Struktur wurde oben erwähnt. Lassen Sie uns zunächst über die Navigation sprechen. Ursprünglich bestand die Navigation aus einem einfachen Inline-UL (das folgende CSS kann implementiert werden). in BS),

<ul class="list-inline">
  <li>W3cplus</li>
  <li>Blog</li>
  <li>CSS3</li>
  <li>jQuery</li>
  <li>PHP</li>
</ul>

Aber in BS gibt es die Navigationsklasse, um es zu implementieren, aber die Navigationsklasse muss mit anderen Klassen kombiniert werden, um den Seiteneffekt hervorzuheben, wie z. B. Navigationspillen und Navigationsregisterkarten. Wenn es sich um vertikale Navigation handelt, Es befindet sich in der Klasse Füge nav-stacked

zum Namen hinzu

<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. Nachdem wir über die Navigationsleiste gesprochen haben, sprechen wir über das Dropdown-Menü in BS, das auf einer mitgelieferten js-Datei basiert, und seine eigenen js basieren ebenfalls auf JQuery Es sind zwei Dateien erforderlich. Es ist erwähnenswert, dass der Code für dieses Dropdown-Menü etwas kompliziert ist. Der data-toggle="dropdown" in der Schaltfläche muss mit dem Namen der äußeren Div-Klasse identisch sein.

<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. Es scheint, dass es an der Zeit ist, über Formulare zu sprechen. Im Bootstrap-Framework wird ein Klassenname „form-control“ angepasst. Mit anderen Worten, wenn diese Elemente den Klassennamen „form-control“ verwenden, werden sie dies tun Erzielen Sie einige Designanpassungseffekte.

<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>

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, er gefällt euch allen