Heim  >  Artikel  >  Web-Frontend  >  Beispiel für die gemeinsame Nutzung einer Bootstrap-Responsive-Navigation

Beispiel für die gemeinsame Nutzung einer Bootstrap-Responsive-Navigation

PHPz
PHPzOriginal
2017-06-17 10:42:091762Durchsuche

In diesem Artikel wird hauptsächlich die Änderung der Bootstrap-Responsive-Navigation von 768px auf 992px vorgestellt.

Ohne weitere Umschweife werde ich den Code direkt für Sie veröffentlichen folgt:

[Ähnliche Videoempfehlungen: Bootstrap-Tutorial]

<!--响应式导航部分--> 
<header role="banner"> 
  <nav role="navigation" class="navbar navbar-static-top navbar-default"> 
    <p class="container "> 
      <p class="navbar-header"> 
        <!--设置手风琴式的navbar,然后类navbar-toggle包装在屏幕大于992px,隐藏--> 
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> 
          <!--这里的span.icon-bar 是用来在按钮中画三条线--> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
          <span class="icon-bar"></span> 
        </button> 
        <a class="navbar-brand" href="index.html" rel="external nofollow" rel="external nofollow" ><img src="img/logo.png" alt="Bootstrappin&#39;" width="120"></a> 
        <!--这里的商标图一定要设置宽度--> 
      </p> 
      <!--这里的类collapse保证默认包裹的菜单是隐藏的,如果 替换为 in 则显示--> 
      <p class="navbar-collapse collapse" id="navbar-collapse"> 
        <ul class="nav navbar-nav"> 
          <li class="active"><a href="index.html" rel="external nofollow" rel="external nofollow" > 
            <span class="icon fa fa-home "></span> Home</a></li> 
          <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
            <span class="icon fa fa-desktop"></span> Portfolio</a></li> 
          <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
            <span class="icon fa fa-group "></span> Team</a></li> 
          <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" > 
            <span class="icon fa fa-envelope "></span> Contact</a></li> 
        </ul> 
      </p><!--/.nav-collapse --> 
    </p><!--/.container --> 
  </nav> 
</header>

Dies ist ein Beispiel dafür, was ich befolgt habe, siehe erster Kommentar Oben definiert die Schaltfläche die Klasse „navbar-toggle“. Einer der Navigationsleisten-Umschaltstile ist Medienabfrage.

//bootstrap.css 
@media (min-width: 992px) { 
 .navbar-toggle { 
  display: none; 
 } 
}

Dann habe ich die Datei navbar.less noch einmal überprüft. Gefunden


//navbar.less  
.navbar-toggle { 
 position: relative; 
 float: right; 
 margin-right: @navbar-padding-horizontal; 
 padding: 9px 10px; 
 .navbar-vertical-align(34px); 
 background-color: transparent; 
 border: 1px solid transparent; 
 border-radius: @border-radius-base; 
 // Bars 
 .icon-bar { 
  display: block; 
  width: 22px; 
  height: 2px; 
  border-radius: 1px; 
 } 
 .icon-bar + .icon-bar { 
  margin-top: 4px; 
 } 
 @media (min-width: @grid-float-breakpoint) { //@grid-float-breakpoint 
  display: none; 
 } 
} 
//variables.less 
@grid-float-breakpoint:   @screen-sm-min;  //想要改成992px这里就要用这个 @grid-float-breakpoint:   @screen-md-min; 
//-------- 
@screen-sm:         768px; 
@screen-sm-min:       @screen-sm; 
@screen-md:         992px; 
@screen-md-min:       @screen-md; 
@screen-desktop:       @screen-md-min; 
// Large screen / wide desktop 
// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1 
@screen-lg:         1200px; 
@screen-lg-min:       @screen-lg; 
@screen-lg-desktop:     @screen-lg-min;

Wenn Sie also den standardmäßigen Falthaltepunkt ändern möchten, ändern Sie die obige Medienabfragevariable @grid-float-breakpoint: @screen-sm-min ;

wird so geändert, dass es ein von anderen Bootstrap definierter Haltepunkt ist. Natürlich können Sie auch eine Haltepunktvariable anpassen. Dann kompilieren Sie es erneut in eine CSS-Datei.

Hinweis: Am besten kopieren Sie variables.less nach _variables.lss. navbar.less erstellt eine Kopie von _navbar.less. Nehmen Sie dann Änderungen an der kopierten Datei vor. Kopieren Sie abschließend Bootstrap.less, importieren Sie


//bootstrap.less 
//@import "navbar.less";  
@import "_navbar.less"; 
//@import "variables.less"; 
@import "_variables.less";

, ändern Sie es und kompilieren Sie das angepasste Bootstrap.less.

Das obige ist der detaillierte Inhalt vonBeispiel für die gemeinsame Nutzung einer Bootstrap-Responsive-Navigation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn