Cara mengendalikan setiap elemen bar navigasi Bootstrap (borang, butang, teks)

Rumah

hujung hadapan web

tutorial js

Cara mengendalikan setiap elemen bar navigasi Bootstrap (borang, butang, teks)_kemahiran javascript

May 16, 2016 pm 03:22 PM

bootstrap navigasi

Artikel ini merangkumi tiga aspek utama, sila kaji dengan teliti.

1. Borang dalam bar navigasi
Borang dalam bar navigasi tidak menggunakan kelas lalai yang disebut dalam bab borang Bootstrap, ia menggunakan kelas .navbar-form. Ini memastikan penjajaran menegak yang betul bagi bentuk dan gelagat runtuh dalam port pandangan yang lebih sempit. Gunakan pilihan penjajaran (yang diterangkan secara terperinci dalam bahagian Penjajaran Komponen) untuk memutuskan di mana kandungan dalam bar navigasi diletakkan.

Contoh berikut menunjukkan ini:

&lt;!DOCTYPE html&gt; 
&lt;html&gt; 
&lt;head&gt; 
  &lt;title&gt;Bootstrap 实例 - 默认的导航栏&lt;/title&gt; 
  &lt;link href="bootstrap.min.css" rel="stylesheet"&gt; 
  &lt;script src="jquery-2.1.4.min.js"&gt;&lt;/script&gt; 
  &lt;script src="bootstrap.min.js"&gt;&lt;/script&gt; 
&lt;/head&gt; 
&lt;body&gt; 
&lt;nav class="navbar navbar-default" role="navigation"&gt; 
  &lt;div class="navbar-header"&gt; 
   &lt;a class="navbar-brand" href="#"&gt;林炳文在此～&lt;/a&gt; 
  &lt;/div&gt; 
  &lt;div&gt; 
   &lt;ul class="nav navbar-nav"&gt; 
     &lt;li class="active"&gt;&lt;a href="#"&gt;导航一&lt;/a&gt;&lt;/li&gt; 
     &lt;li&gt;&lt;a href="#"&gt;导航二&lt;/a&gt;&lt;/li&gt; 
     &lt;li class="dropdown"&gt; 
      &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt; 
        下拉菜单 
        &lt;b class="caret"&gt;&lt;/b&gt; 
      &lt;/a&gt; 
      &lt;ul class="dropdown-menu"&gt; 
        &lt;li&gt;&lt;a href="#"&gt;我是谁呢？&lt;/a&gt;&lt;/li&gt; 
        &lt;li&gt;&lt;a href="#"&gt;我也不知道&lt;/a&gt;&lt;/li&gt; 
        &lt;li&gt;&lt;a href="#"&gt;你是谁呢？&lt;/a&gt;&lt;/li&gt; 
        &lt;li class="divider"&gt;&lt;/li&gt; 
        &lt;li&gt;&lt;a href="#"&gt;分离的链接&lt;/a&gt;&lt;/li&gt; 
        &lt;li class="divider"&gt;&lt;/li&gt; 
        &lt;li&gt;&lt;a href="#"&gt;另一个分离的链接&lt;/a&gt;&lt;/li&gt; 
      &lt;/ul&gt; 
     &lt;/li&gt; 
   &lt;/ul&gt; 
  &lt;/div&gt; 
  &lt;div&gt; 
   &lt;form class="navbar-form navbar-left" role="search"&gt; 
     &lt;div class="form-group"&gt; 
      &lt;input type="text" class="form-control" placeholder="Search"&gt; 
     &lt;/div&gt; 
     &lt;button type="submit" class="btn btn-default"&gt;搜一下&lt;/button&gt; 
   &lt;/form&gt;   
  &lt;/div&gt; 
&lt;/nav&gt; 
&lt;/body&gt; 
&lt;/html&gt;

Salin selepas log masuk

Kesan:

Kesan hitam

2. Butang dalam bar navigasi
Anda boleh menggunakan kelas .navbar-btn untuk menambah butang pada elemen <butang> yang tidak berada di dalam <borang>, dengan butang dipusatkan secara menegak pada bar navigasi. .navbar-btn boleh digunakan pada <a> dan <input>

Jangan gunakan .navbar-btn pada <a> elemen di dalam .navbar-nav kerana ia bukan kelas butang standard.
Contoh berikut menunjukkan ini:

&lt;!DOCTYPE html&gt; 
&lt;html&gt; 
&lt;head&gt; 
  &lt;title&gt;Bootstrap 实例 - 默认的导航栏&lt;/title&gt; 
  &lt;link href="bootstrap.min.css" rel="stylesheet"&gt; 
  &lt;script src="jquery-2.1.4.min.js"&gt;&lt;/script&gt; 
  &lt;script src="bootstrap.min.js"&gt;&lt;/script&gt; 
&lt;/head&gt; 
&lt;body&gt; 
&lt;nav class="navbar navbar-inverse" role="navigation"&gt; 
  &lt;div class="navbar-header"&gt; 
   &lt;a class="navbar-brand" href="#"&gt;林炳文在此～&lt;/a&gt; 
  &lt;/div&gt; 
  &lt;div&gt; 
   &lt;ul class="nav navbar-nav"&gt; 
     &lt;li class="active"&gt;&lt;a href="#"&gt;导航一&lt;/a&gt;&lt;/li&gt; 
     &lt;li&gt;&lt;a href="#"&gt;导航二&lt;/a&gt;&lt;/li&gt; 
     &lt;li class="dropdown"&gt; 
      &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt; 
        下拉菜单 
        &lt;b class="caret"&gt;&lt;/b&gt; 
      &lt;/a&gt; 
      &lt;ul class="dropdown-menu"&gt; 
        &lt;li&gt;&lt;a href="#"&gt;我是谁呢？&lt;/a&gt;&lt;/li&gt; 
        &lt;li&gt;&lt;a href="#"&gt;我也不知道&lt;/a&gt;&lt;/li&gt; 
        &lt;li&gt;&lt;a href="#"&gt;你是谁呢？&lt;/a&gt;&lt;/li&gt; 
        &lt;li class="divider"&gt;&lt;/li&gt; 
        &lt;li&gt;&lt;a href="#"&gt;分离的链接&lt;/a&gt;&lt;/li&gt; 
        &lt;li class="divider"&gt;&lt;/li&gt; 
        &lt;li&gt;&lt;a href="#"&gt;另一个分离的链接&lt;/a&gt;&lt;/li&gt; 
      &lt;/ul&gt; 
     &lt;/li&gt; 
   &lt;/ul&gt; 
  &lt;/div&gt; 
  &lt;div&gt; 
   &lt;form class="navbar-form navbar-left" role="search"&gt; 
     &lt;div class="form-group"&gt; 
      &lt;input type="text" class="form-control" placeholder="Search"&gt; 
     &lt;/div&gt; 
     &lt;button type="submit" class="btn btn-default"&gt;搜一下&lt;/button&gt; 
   &lt;/form&gt;  
   &lt;button type="button" class="btn btn-default navbar-btn"&gt; 
     导航栏按钮 
   &lt;/button&gt;    
  &lt;/div&gt; 
&lt;/nav&gt; 
&lt;/body&gt; 
&lt;/html&gt;

Salin selepas log masuk

Kesannya adalah seperti berikut:

3. Teks dalam bar navigasi
Jika anda perlu memasukkan rentetan teks dalam navigasi, gunakan class .navbar-text. Ini biasanya digunakan bersama dengan tag <p> Contoh berikut menunjukkan ini:

&lt;div class="navbar-header"&gt; 
   &lt;a class="navbar-brand" href="#"&gt;林炳文在此～&lt;/a&gt;   
  &lt;/div&gt; 
  &lt;div&gt; 
   &lt;p class="navbar-text"&gt;导航栏中的文本&lt;/p&gt; 
  &lt;/div&gt; 
  &lt;div&gt;

Salin selepas log masuk

Kesannya adalah seperti berikut:

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia dapat membantu pembelajaran semua orang, supaya semua orang boleh melaksanakan bar navigasi Bootstrap dengan lebih mahir.

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn