ブートストラップ ナビゲーション バーとその応答性の高い実装を分析する

1. この記事の目的: プログラミング技術をより高いレベルに向上させるために、ブートストラップ ナビゲーション バーとその応答性の高い実装を分析することです

2. まず実装方法を分析しましょう。最初のステップは、ブートストラップ ナビゲーション バー テンプレート

2. コードは次のとおりです

 1 <nav class="navbar navbar-default navbar-fixed-top"> 2         
 <div class="container-fluid"> 3           <div class="navbar-header"> 4             
 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 
 data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 5               
 <span class="sr-only">Toggle navigation</span> 6               
 <span class="icon-bar"></span> 7               
 <span class="icon-bar"></span> 8               <span class="icon-bar"></span> 9             
 </button>10             <a class="navbar-brand" href="#">Project name</a>11           
 </div>12           <div id="navbar" class="navbar-collapse collapse">13             
 <ul class="nav navbar-nav">14               <li class="active"><a href="#">Home</a>
 </li>15               <li><a href="#">About</a></li>16               
 <li><a href="#">Contact</a></li>17               <li class="dropdown">18                 
 <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>19                 <ul class="dropdown-menu">20                   <li><a href="#">Action</a></li>21                   <li><a href="#">Another action</a></li>22                   <li><a href="#">Something else here</a></li>23                   <li role="separator" class="divider"></li>24                   <li class="dropdown-header">Nav header</li>25                   <li><a href="#">Separated link</a></li>26                   <li><a href="#">One more separated link</a></li>27                 </ul>28               </li>29             </ul>30             <ul class="nav navbar-nav navbar-right">31               32             </ul>33           </div><!--/.nav-collapse -->34         </div><!--/.container-fluld -->35       </nav>

効果は次のとおりです。

モバイル端末:

3.

分析する各ラベルの外側から内側へ、そしてそのスタイルの役割

3.1 最も外側の div コンテナ (スタイルは navbar navbar-default navbar-fixed-top):

ソースコード

.navbar {
  position: relative;
  min-height: 50px;/**导航条最小宽度为50px**/
  margin-bottom: 20px;/****/
  border: 1px solid transparent;
}@media (min-width: 768px) {/**>=768的设备，其实就是pc，移动设备width属性都小于768px**//**可能有很多人不理解，实际上移动端的width属性是以device-width来计量的，不是单纯的像数的概念，建议有疑问的同学自行搜索device-width关键字**/
  .navbar {
    border-radius: 4px;/****/
  }}
.navbar-default {/**设备导航栏的配色**/
  background-color: #f8f8f8;
  border-color: #e7e7e7;
}.navbar-fixed-top,
.navbar-fixed-bottom {
  position: fixed;/**相对浏览器定位**/
  right: 0;
  left: 0;
  z-index: 1030;/**样式层叠在上层的优先级**/
}

ソースからわかるようにこのコードでは、最も外側の div コンテナの主な機能は、ブラウザ (.navbar-fixed-top) を基準にして配置された、高さ 50 ピクセルの最小限の A バー コンテナ (.navbar) を作成することであり、ナビゲーション バーの色を決定します ( .navbar-default)

device-width に関する関連知識については、この記事を参照してください

3.2 navbar-header としてスタイル設定された div コンテナ

CSS ソースコードは次のとおりです

<br>

/**在pc端显示时向右浮动，在移动端此样式无效**/

rreee

この表示効果PC とモバイルの div は次のとおりです

PC:

Mobile:

PC 側ではブラウザの幅が十分であり、この div は小さなブロックとしてのみ存在していることがわかります。 level 要素; モバイル側では、画面の幅が足りないため、ナビゲーション バーの他の要素はドロップダウン メニューの形式で実装され、この div のみが親コンテナーに表示されます。

navbar-header の下には 2 つの単語要素があります: navbar-toggle スタイルの と navbar-brand の

CSS ソース コードは次のとおりです:

@media (min-width: 768px) {
  .navbar-header {
    float: left;
  }}

この時点で、navbar -header これはレスポンシブなレイアウトであり、モバイル側では navbar-header がナビゲーション バー全体とその他の部分を独占的に表示します。隠蔽されます。

3.3 引き続き navbar-collapse 崩壊コンポーネントを見てみましょう

ソースコード:

.navbar-toggle {/**在最右侧画了一个圆角矩形**/
  position: relative;
  float: right;
  padding: 9px 10px;
  margin-top: 8px;
  margin-right: 15px;
  margin-bottom: 8px;
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}.navbar-toggle:focus {
  outline: 0;
}@media (min-width: 768px) {/**此button在pc端不显示**/
  .navbar-toggle {
    display: none;
  }}
.navbar-toggle .icon-bar {/**icon-bar负责在button盒子里画横线**/
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
}.navbar-brand {
  float: left;
  height: 50px;
  padding: 15px 15px;
  font-size: 18px;
  line-height: 20px;
}

/**由于.navbar-collapse，.navbar-collapse.in，.collapse在（@meida min-width:768px）pc端均有定义，故一下的属性只对移动端有效**/

.collapse.in {/**クリック イベントが発生すると、表示をカバーするブロック レベルの要素として表示されます: none**/

display: block;<br>}<br>

.navbar-collapse {
  padding-right: 15px;
  padding-left: 15px;
  overflow-x: visible;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid transparent;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}.navbar-collapse.in {/**点击navbar-header的navbar-toggle的button后， navbar-collapse collapse会被js修改成。navbar-collapse collapse in**/
  overflow-y: auto;
}.collapse {/**决定了本组件在移动端时不显示**/
  display: none;/**点击事件发生后将被覆盖**/
}<br>

この時点では、私たちはそれを理解しました navbar-collapse モバイル側で折りたたみコンポーネントがどのように非表示になるか navbar-collapse はコンポーネントの外観スタイルを担当し、 .collapse はコンポーネント全体が表示されるかどうかを担当します（通常は PC 側で表示されます） 、モバイル側では表示されず（表示：なし）、クリックイベントが発生してブロックレベルの要素として表示されます）

4. 概要

ブートストラップナビゲーションバーのソースコードの分析から、次のことがわかります。ポイント

4.1: ブートストラップのサイズ スタイルとカラー マッチング スタイルは個別に設定されます。この設定は任意であることが想像できます。この組み合わせによりコードの再利用性が高まり、必要に応じてカラー マッチングを変更することもできます。 。

4.2: ナビゲーション バーの実装: ナビゲーション バーの固定方法は

navbar-fixed-top によって実装されます。他の値には navbar-static-top とその表示効果も含まれます。異なる（ディスプレイ位置のナビゲーションバー全体を決定する）.注: マージンパディングの変更などの詳細の多くは、この記事では説明されていません。この記事を参照してください。

以上がブートストラップ ナビゲーション バーとその応答性の高い実装を分析するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。