導(dǎo)航：

bootstrap中使用列表封裝了水平導(dǎo)航，其類樣式如：

類名描述

.nav	給ul或ol，用于清除列表默認樣式，并將列表項水平排列
.nav-item	給li,用于布局
.nav-link	給li里面的a,用于a布局
.justify-content-center	用于居中ul或ol（使位于屏幕中間）
.justify-content-end	用于靠右ul或ol（使位于屏幕右側(cè)）
.flex-column	給ul 或 ol，使垂直排列
.nav-tabs	選項卡式布局，對選中的項添加active類來進行標記
.nav-pills	膠囊導(dǎo)航，使有active的選項背景成藍色
.nav-justified	使導(dǎo)航的每一項都各自等寬
data-toggle=“tab”	實現(xiàn)選項卡切換功能，給鏈接（a標簽）添加，鏈接中的href指向tab-content中的錨點值;此屬性后面的值若是 pill則表示樣式為膠囊型
.tab-pane	控制選項卡內(nèi)容隱藏，給具體的內(nèi)容
.nav-tabs	實現(xiàn)選項卡中導(dǎo)航樣式

<!-- 導(dǎo)航、選項卡導(dǎo)航部分： --> <ul class="nav nav-tabs nav-pills nav-justified"><!--a標簽href屬性值指向下面內(nèi)容錨點值--><li class="nav-item"><a href="#cont1" class="nav-link active" data-toggle="tab">1</a></li><li class="nav-item"><a href="#cont2" class="nav-link" data-toggle="tab">12</a></li><li class="nav-item"><a href="#cont3" class="nav-link" data-toggle="pill">123</a></li><li class="nav-item"><a href="#cont4" class="nav-link" data-toggle="pill">1234</a></li> </ul> <!-- 結(jié)合上面導(dǎo)航部分構(gòu)成選項卡模塊，以下是選項卡內(nèi)容部分： --> <div class="tab-content"><!---tab-content隱藏下面所有的內(nèi)容，但是有active的內(nèi)容會顯示--><div id="cont1" class="tab-pane active">1</div><div id="cont2" class="tab-pane">12</div><!-- tab-pane隱藏帶有此類的div自身 --><div id="cont3" class="tab-pane">123</div><div id="cont4" class="tab-pane">1234</div> </div>

導(dǎo)航欄：

bootstrap中提供了導(dǎo)航欄功能的封裝，導(dǎo)航欄一般時放到頁面的頂部；相關(guān)類樣式如下:

類名描述

.navbar	創(chuàng)建一個導(dǎo)航欄，后面可跟 navbar-expand-S類實現(xiàn)響應(yīng)式導(dǎo)航欄；默認是垂直排列的
.navbar-expand-S	根據(jù)屏幕尺寸做出響應(yīng)式的導(dǎo)航欄，當(dāng)屏幕小于指定值時，列表會垂直排列；S的值可以是 xl、lg、md、sm
.navbar-nav	給導(dǎo)航欄上元素ul添加此類，清除ul默認樣式，并使ul水平排列
.nav-item	給navbar-nav中l(wèi)i添加此類，修改樣式
. nav-link	給nav-item中的鏈接a添加此類，清除鼠標hover下劃線樣式并進行了布局
.navbar-light	此類設(shè)置了一個黑色color，但是后面有以此為基礎(chǔ)的active類，有此項active選中的鏈接會有突顯效果
.disabled	禁用a標簽
.navbar-brand	高亮效果，用于突顯logo等，若此類用于img則圖片自適應(yīng)導(dǎo)航欄
.navbar-text	設(shè)置導(dǎo)航欄非鏈接文本
.fixed-top	用于固定導(dǎo)航欄，給nav添加此標簽將導(dǎo)航欄固定到頂部
.fixed-bottom	用于固定導(dǎo)航欄，給nav添加此標簽將導(dǎo)航欄固定到底部
.breadcrumb	定義面包屑導(dǎo)航欄，給父級容器加此類，如ul
.breadcrumb-item	導(dǎo)航欄中每一項中添加的類名，此類是一個/符

<!-- 基本導(dǎo)航欄： --> <nav class="navbar navbar-expand-sm bg-warning navbar-light"><ul class="navbar-nav"><li class="nav-item"><img src="2.png" class="navbar-brand" width='50px' height='50px'></li><li class="nav-item"><a class="nav-link navbar-brand" href="#">首頁</a></li><li class="nav-item"><a class="nav-link active" href="#">設(shè)置</a></li><li class="nav-item"><a class="nav-link disabled" href="#">個人中心</a></li></ul> </nav><!-- 折疊導(dǎo)航欄： --> <!-- 1.定義按鈕：按鈕必須有 data-toggle="collapse"實現(xiàn)功能層面、data-target=".navbox"指定需要折疊的對象--> <button data-toggle="collapse" data-target=".navbox">展示/收起</button><!-- 2.定義一個盒子用于上面按鈕折疊，同時將基礎(chǔ)導(dǎo)航欄裝入此盒子 --> <div class="navbox show"><!--這里加show解決首次點擊出現(xiàn)bug問題--><nav class="navbar navbar-expand-sm bg-warning navbar-light"><ul class="navbar-nav"><li class="nav-item"><img src="2.png" class="navbar-brand" width='50px' height='50px'></li><li class="nav-item"><a class="nav-link navbar-brand" href="#">首頁</a></li><li class="nav-item"><a class="nav-link active" href="#">設(shè)置</a></li><li class="nav-item"><a class="nav-link disabled" href="#">個人中心</a></li></ul></nav> </div><!--面包屑導(dǎo)航欄--> <ul class="breadcrumb"><li class="breadcrumb-item"><a href="#">首頁</a></li><li class="breadcrumb-item"><a href="#">設(shè)置</a></li><li class="breadcrumb-item active">個人中心</li> </ul>

表單：

bootstrap提供了類樣式供創(chuàng)建表單，其具體如下：

類名描述

.form-control	定義一個寬度100%的表單元素，給input標簽
.form-inline	定義一個水平排列的響應(yīng)式表單域（給form標簽），當(dāng)屏幕小到一定程度時表單元素會垂直排列
.form-check-inline	將一個容器中的選項水平排列
.disabled	禁用一個表單元素
.input-group-prepend	用來定義一個給輸入框前面添加文本的容器，此類給div元素，實際沒太大作用
.input-group	將input-group-append和input-group-prepend的其他元素放到一組，使在同一行上
.input-group-text	定義輸入框組中的文本,使之有樣式
.input-group-append	用來定義一個給輸入框后面添加文本的容器，此類給div元素，實際沒太大作用
.input-group-S	定義一組輸入框的大小，此類給input-group容器加，其中S值有sm和lg

<form action="" class="form-inline"><div class="form-group form-check-inline"><span>用戶名：</span><input type="url" class="form-control"><span>密碼：</span><input type="password" class="form-control"></div><div class="form-group radio-inline"><span>用戶名：</span><input type="text" class="form-control"><span>密碼：</span><input type="password" class="form-control"></div> </form>

自定義表單：

bootstrap封裝了關(guān)于表單的自定義類樣式等，如下：

類名描述

.custom-control	定義一個選框的容器，此類名做樣式布局
.custom-checkbox	定義被選中時方框中的對號
.custom-control-input	將選框的默認選框隱藏
.custom-control-label	一個偽元素用于代替隱藏的默認選框
.custom-radio	定義圓形選框及被選中時選框中的白點
.custom-control-inline	將自定義控件布局在同一行
.custom-select	定義選擇菜單（給select元素設(shè)置此類），默認是通欄顯示；但是一般會在后面加限定大小的后綴sm和lg，如： custom-select-sm
.custom-range	自定義滑塊輸入，滑動點僅為一個點，在本地測試和默認效果一樣
.custom-file-label	用于label初始化一個自適應(yīng)通欄的文件域
.custom-file-input	使元素相對定位，且 opacity: 0；使用時建議外面套一個容器并給類樣式custom-file

<!-- 自定義復(fù)選框原理：將默認的CheckBox選框隱藏掉或?qū)abel的偽元素定位到默認CheckBox的位置將其覆蓋，選中時在修改偽元素樣式--> <form method="GET"><div class="custom-control custom-checkbox"><input type="checkbox" class="custom-control-input" id="checkbox1" name="apple"><label class="custom-control-label" for="checkbox1">apple</label></div><div class="custom-control custom-checkbox"><input type="checkbox" class="custom-control-input" id="checkbox2" name="water"><label class="custom-control-label" for="checkbox2">water</label></div><input type="submit" value="提交"> </form><!-- 自定義單選框：原理和復(fù)選框一樣 --> <form method="GET"><div class="custom-control custom-radio custom-control-inline"><input type="radio" class="custom-control-input" id="checkbox1" name="sex" value='1'><label class="custom-control-label" for="checkbox1">男</label></div><div class="custom-control custom-radio custom-control-inline"><input type="radio" class="custom-control-input" id="checkbox2" name="sex" value='2'><label class="custom-control-label" for="checkbox2">女</label></div><input type="submit" value="提交"> </form><!-- 自定義選擇菜單： --> <form><select name="number" class="custom-select-sm"><option value="0" selected disabled>數(shù)字</option><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><input type="submit" value="提交"> </form><!-- 自定義滑塊輸入： --> <form method="GET"><label for="rangebox">自定義滑塊</label><input type="range" class="custom-range" id="rangebox" name="values"><input type="submit" value="提交"> </form><!-- 自定義文件域： --> <form method="POST"><div class="custom-file"><input type="file" class="custom-file-input" id="fileBox"><label class="custom-file-label" for="fileBox">選擇文件</label></div><input type="submit" value="提交"> </form>

提示：本文圖片等素材來源于網(wǎng)絡(luò)，若有侵權(quán)，請發(fā)郵件至郵箱：810665436@qq.com聯(lián)系筆者刪除。
筆者：苦海

總結(jié)

以上是生活随笔為你收集整理的bootstrap中导航、导航栏、表单及自定义表单的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。