bootstrap學習（四）輸入框、導航

輸入框組：

基本用法：

//form-control 占滿 //input-group:輸入框組 //input-group-addon：輸入框前加入一個前綴<div class="input-group"><span class="input-group-addon">@</span><input type="text" class="form-control"><span class="input-group-addon">@</span></div>

?

加入小圖標：

<div class="input-group"><span class="input-group-addon"><span class="glyphicon glyphicon-plus "></span></span><input type="text" class="form-control"></div>

?

加入按鈕：

<div class="input-group"><span class="input-group-btn"><button type="button" class="btn btn-default btn-danger">按鈕</button></span><input type="text" class="form-control"></input></div>

?

?

導航

Bootstrap 中的導航組件都依賴同一個?.nav?類，狀態類也是共用的。改變修飾類可以改變樣式。

?標簽頁：

li：標簽內部是一個鏈接或按鈕

<ul class="nav nav-tabs">{#選項卡nav-tabs 只寫nav不行#}<li><a href="">111</a></li> <li><a href="">222</a></li><li><a href="">333</a></li></ul>

?

?膠囊標簽頁：nav-pills? ? ? ?active默認選中

<ul class="nav nav-pills"><li class="active"><a href="">首頁1</a></li><li><a href="">首頁2</a></li><li><a href="">首頁3</a></li><li><a href="">首頁4</a></li></ul>

?

?

豎膠囊：nav-stacked

<ul class="nav nav-pills nav-stacked"><li class="active"><a href="">首頁1</a></li><li class="disabled"><a href="">首頁2</a></li><li><a href="">首頁3</a></li><li><a href="">首頁4</a></li></ul>

?

?

?

?禁用的標簽： .disable 不可選

<ul class="nav nav-pills"><li class="active"><a href="">首頁1</a></li><li class="disabled"><a href="">首頁2</a></li><li><a href="">首頁3</a></li><li><a href="">首頁4</a></li></ul>

?

?自適應標簽頁：nav-justfified 標簽頁自動占滿一行

<ul class="nav nav-tabs nav-justified"><li class="active"><a href="">首頁1</a></li><li class="disabled"><a href="">首頁2</a></li><li><a href="">首頁3</a></li><li><a href="">首頁4</a></li></ul>

?

?

?二級導航：.caret 向下的箭頭

<ul class="nav nav-tabs nav-justified"><li class="active"><a href="">首頁1</a></li><li><a href="" class="dropdown-toggle" data-toggle="dropdown">首頁2<span class="caret"></span></a><ul class="dropdown-menu"><li><a href="">item1</a></li><li><a href="">item2</a></li><li><a href="">item3</a></li></ul></li><li><a href="">首頁3</a></li><li><a href="">首頁4</a></li></ul>

?

?

導航條：

基礎導航： navbar-brand：字體稍微大點? ? ?navbar-header：導航頭信息

<nav class="navbar navbar-default"><div class="navbar-header"><a href="" class="navbar-brand">導航</a><ul class="nav navbar-nav"><li class="active"><a href="">item1</a></li><li class="active"><a href="">item2</a></li><li class="active"><a href="">item3</a></li></ul></div></nav>

?

?

?導航中加入表單：

<nav class="navbar navbar-default"><div class="navbar-header"><a href="" class="navbar-brand">導航</a><ul class="nav navbar-nav"><li class="active"><a href="">item1</a></li><li><a href="">item2</a></li><li><a href="">item3</a></li></ul></div><form action="" class="navbar-form"><input type="text" class="form-control"><button type="button" class="btn btn-default">按鈕</button></form></nav>

面包屑導航：

breadcrumb：面包屑樣式 <ul class="breadcrumb"><li>首頁</li><li>首頁2</li><li>首頁3</li></ul>

?

?分頁導航：可以給li設置 .active設置激活狀態

<ul class="pagination"><li><a href="">&laquo;</a></li><li><a href="">1</a></li><li><a href="">1</a></li><li><a href="">1</a></li><li><a href="">&raquo;</a></li></ul>

?

?

<ul class="pager"><li><a href="">上一頁</a></li><li><a href="">下一頁</a></li></ul>

?

?

?

?

?官方：https://v3.bootcss.com/components/#input-groups

posted @ 2019-04-30 15:07 巡山小妖N 閱讀(...) 評論(...) 編輯 收藏

總結

以上是生活随笔為你收集整理的bootstrap学习（四）输入框、导航的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。