BootStrap-CSS樣式_佈局元件_導航欄中的(表單按鈕文字連結對齊方式)
阿新 • • 發佈：2019-01-01
導航欄中的表單
使 用 .navbar-form class。這確保了表單適當的垂直對齊和在較窄的視口中摺疊的行為。使用對齊方 式選項來決定導航欄中的內容放置在哪裡。
導航欄中的按鈕
使用 class .navbar-btn 向不在 <form> 中的 <button> 元素新增按鈕，按鈕在導航欄上 垂直居中。.navbar-btn 可被使用在 <a> 和 <input> 元素上。 不要在 .navbar-nav 內的 <a> 元素上使用 .navbar-btn，因為它不是標準的 button class。
導航欄中的文字
使用 class .navbar-text。這通常與 <p> 標籤一起使用， 確保適當的前導和顏色。
非導航連結
如果您不想在常規的導航欄導航元件內使用標準的連結，那使用 class navbar-link 來為預設的和倒轉的導航欄選項新增適當的顏色。
元件對齊方式
使用實用工具 class .navbar-left 或 .navbar-right 向左或向右對齊導航欄中的 導航鏈 接、表單、按鈕或文字 這些元件。這兩個 class 都會在指定的方向上新增 CSS 浮動。
程式碼例項：
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>導航欄表單按鈕文字</title> <link rel="stylesheet" href="../css/bootstrap.min.css"> </head> <body style="padding:50px;"> <h2>3.導航欄中的表單</h2> <!-- navbar-form樣式：在導航欄中設定表單from --> <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="#">W3Cschool</a> </div> <div> <form action="" class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">提交</button> </form> </div> </nav> <h3>4.導航欄中的按鈕</h3> <!-- navbar-btn樣式：在nav中單獨設定按鈕，加navbar-btn --> <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="#">W3Cschool</a> </div> <div> <form action="" class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">提交</button> </form> <button type="button" class="btn btn-default navbar-btn"> 導航欄按鈕 </button> </div> </nav> <h3>5.導航欄中的文字</h3> <!-- navbar-text樣式：設定文字 --> <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="#">W3Cschool</a> </div> <div> <form action="" class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">提交</button> </form> <button type="button" class="btn btn-default navbar-btn"> 導航欄按鈕 </button> <p class="navbar-text">This is Navgation Text</p> </div> </nav> <h3>6.導航欄中的鏈結</h3> <!-- navbar-link樣式：設定連線，顯示和文字樣式一直 --> <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="#">W3Cschool</a> </div> <div> <p class="navbar-text">This is Navgation Text <a href="#" class="navbar-link">測試</a> </p> </div> </nav> <h3>7.導航欄中內容的對齊方式</h3> <!-- navbar-left樣式：在導航欄中左對齊 navbar-right樣式：在導航欄中右對齊 --> <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a class="navbar-brand" href="#">W3Cschool</a> </div> <div> <ul class="nav navbar-nav navbar-left"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">jmeter</a></li> <li><a href="#">EJB</a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">分離的連結</a></li> <li class="divider"></li> <li><a href="#">另一個分離的連結</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left" role="search"> <button type="submit" class="btn btn-default"> 向左對齊-提交按鈕 </button> </form> <p class="navbar-text navbar-left">向左對齊-文字</p> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b> </a> <ul class="dropdown-menu"> <li><a href="#">jmeter</a></li> <li><a href="#">EJB</a></li> <li><a href="#">Jasper Report</a></li> <li class="divider"></li> <li><a href="#">分離的連結</a></li> <li class="divider"></li> <li><a href="#">另一個分離的連結</a></li> </ul> </li> </ul> <form class="navbar-form navbar-right" role="search"> <button type="submit" class="btn btn-default"> 向右對齊-提交按鈕 </button> </form> <p class="navbar-text navbar-right">向右對齊-文字</p> </div> <script src="../js/jquery-1.11.1.min.js"></script> <script src="../js/bootstrap.min.js"></script> </body> </html>
顯示效果：
