Kemahiran asas pembelajaran_javascript Bootstrap

Bootstrap ialah rangka kerja struktur bahagian hadapan berdasarkan struktur grid (sudah tentu ia juga mempunyai JS, JQuery Kelebihannya ialah rangka kerja kandungan boleh dibina dengan cepat, halaman yang dibina boleh menyesuaikan diri dengan cepat pengguna yang berbeza, tidak kira Sama ada telefon mudah alih, tablet atau PC, ia pada asasnya boleh menyesuaikan diri Sudah tentu, versi baharu tidak lagi menyokong IE6, dan sokongan untuk IE8 juga sangat terhad tidak menyokong HTML5 dengan baik. (Sejujurnya, saya sendiri tidak menyokongnya.) Saya tidak suka IE6~8 Untuk pemain junior seperti saya, keserasian kadang-kadang sangat sukar untuk projek, tetapi saya juga perlu menggunakannya untuk temuduga Adakah anda telah membuat kesilapan, semak sahaja dalam talian, anda masih perlu tahu bagaimana untuk melakukannya

Tanpa berlengah lagi, mari kita mula meringkaskan nota BS saya dalam tempoh ini!

1. Dari segi kandungan struktur, kawalan BS ke atas kandungan struktur pada asasnya dikawal oleh kelas Contohnya, kawalan ke atas struktur ialah

<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. Strukturnya telah disebutkan di atas, mari kita bincangkan tentang beberapa komponen tertentu dalam halaman Mari kita bincangkan tentang navigasi dahulu. dalam BS),

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

Tetapi dalam BS, terdapat kelas nav untuk melaksanakannya, tetapi kelas nav perlu digabungkan dengan kelas lain untuk mengeluarkan kesan halaman, seperti pil-nav dan tab-nav Jika navigasi menegak, ia berada dalam kelas Tambah nav-stacked

pada nama

<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. Selepas bercakap tentang bar navigasi, mari bercakap tentang menu lungsur turun dalam BS mesti bergantung pada fail js yang disertakan dengannya, dan jsnya sendiri juga bergantung pada JQuery. dua fail diperlukan. Perlu dijelaskan bahawa kod untuk menu lungsur ini agak rumit. Data-toggle="dropdown" dalam butang mestilah sama dengan nama kelas div luar.

<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. Nampaknya sudah tiba masanya untuk bercakap tentang borang Dalam rangka kerja Bootstrap, nama kelas `kawalan borang` diperibadikan dengan kata lain, jika elemen ini menggunakan nama kelas "kawalan borang". Mencapai beberapa kesan penyesuaian reka bentuk.

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

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya