當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

三、bootstrap4 组件（警告和提示框、徽章和面包屑、按钮按钮组、卡片、列表组、导航和选项卡、分页和进度条、巨幕和旋转图标、轮播图、折叠菜单、下拉菜单、导航条、滚动监听、轻量弹框、模态框、表单）

發(fā)布時(shí)間：2024/7/5 编程问答 43 豆豆

生活随笔收集整理的這篇文章主要介紹了三、bootstrap4 组件（警告和提示框、徽章和面包屑、按钮按钮组、卡片、列表组、导航和选项卡、分页和进度条、巨幕和旋转图标、轮播图、折叠菜单、下拉菜单、导航条、滚动监听、轻量弹框、模态框、表单）小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

1.1 警告提示框

1.2 徽章和面包屑

1.3 按鈕和按鈕組

1.4 卡片

1.5 列表組

1.6 導(dǎo)航和選項(xiàng)卡

1.7 分頁(yè)和進(jìn)度條

1.8 巨幕和旋轉(zhuǎn)圖標(biāo)

1.9 輪播圖

1.10 折疊菜單

1.11 下拉菜單

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>18.卡片</title><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /><link rel="stylesheet" href="./bootstrap-4.6.0-dist/css/bootstrap.css"></head><style type="text/css">body {padding: 20px;}</style><body><div class="dropdown"><button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">下拉菜單</button><div class="dropdown-menu"><a href="#" class="dropdown-item">選項(xiàng)一</a><a href="#" class="dropdown-item">選項(xiàng)二</a><a href="#" class="dropdown-item">選項(xiàng)三</a></div></div><br><div class="dropdown btn-group"><button type="button" class="btn btn-success">下拉菜單</button><button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button><div class="dropdown-menu"><a href="#" class="dropdown-item active">選項(xiàng)一</a><a href="#" class="dropdown-item">選項(xiàng)二</a><div class="dropdown-divider"></div><a href="#" class="dropdown-item">選項(xiàng)三</a><a href="#" class="dropdown-item disabled">選項(xiàng)三</a></div></div><br><br><br><br><br><br><br><br><br><br><br><br><div class="dropdown btn-group dropup"><button type="button" class="btn btn-success">下拉菜單</button><button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button><div class="dropdown-menu"><a href="#" class="dropdown-item active">選項(xiàng)一</a><a href="#" class="dropdown-item">選項(xiàng)二</a><div class="dropdown-divider"></div><a href="#" class="dropdown-item">選項(xiàng)三</a><a href="#" class="dropdown-item disabled">選項(xiàng)三</a></div></div><br><br><br><br><br><br><br><br><br><br><br><br><div class="dropdown btn-group dropright"><button type="button" class="btn btn-success">下拉菜單</button><button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button><div class="dropdown-menu"><a href="#" class="dropdown-item active">選項(xiàng)一</a><a href="#" class="dropdown-item">選項(xiàng)二</a><div class="dropdown-divider"></div><a href="#" class="dropdown-item">選項(xiàng)三</a><a href="#" class="dropdown-item disabled">選項(xiàng)三</a></div></div><script src="./js/jquery-3.5.0.js"></script><script src="bootstrap-4.6.0-dist/js/bootstrap.bundle.js"></script></body> </html>

1.12 導(dǎo)航條

1.13 滾動(dòng)監(jiān)聽

1.14 輕量彈框

1.15 模態(tài)框

1.16 表單

<form action="" class="form-row"><div class="form-group col-sm-6"><label for="user">請(qǐng)輸入用戶名：</label><input type="text" id="user" class="form-control"></div><div class="form-group col-sm-6"><label for="password">請(qǐng)輸入密碼：</label><input type="password" id="password" class="form-control"></div><div class="form-check col-sm-12 "><input type="checkbox" id="check" class="form-check-input"><label for="check">保存用戶名和密碼</label></div><div class="form-group col-sm-12"><label for="city">選擇城市：</label><select multiple="multiple" name="" id="city" class="form-control"><option value="1">北京</option><option value="2">上海</option><option value="3">廣州</option><option value="4">深圳</option></select></div><div class="form-group col-sm-12"><label for="info">請(qǐng)輸入備注：</label><textarea name="info" id="info" rows="10" cols="30" class="form-control"></textarea></div><div class="form-group col-sm-12"><label for="file">上傳頭像：</label><input type="file" id="file" class="form-control-file"></div><div class="form-group col-sm-12"><label for="email1">請(qǐng)輸入電子郵箱：</label><input type="text" id="email1" class="form-control form-control-lg"></div><div class="form-group col-sm-12"><label for="email2">請(qǐng)輸入電子郵箱2：</label><div class="input-group"><div class="input-group-prepend"><span class="input-group-text">@</span></div><input type="text" id="email2" class="form-control"></div></div><div class="form-group col-sm-12"><label for="range">請(qǐng)選擇大小：</label><input type="range" id="range" class="form-control-range"></div><div class="form-inline col-sm-12"><div class="form-check"><input type="checkbox" id="check1" class="form-check-input"><label for="check1" class="form-check-label">復(fù)選框</label></div><div class="form-check"><input type="radio" id="radio" class="form-check-input"><label for="radio" class="form-check-label">單選框</label></div></div></form>

總結(jié)

以上是生活随笔為你收集整理的三、bootstrap4 组件（警告和提示框、徽章和面包屑、按钮按钮组、卡片、列表组、导航和选项卡、分页和进度条、巨幕和旋转图标、轮播图、折叠菜单、下拉菜单、导航条、滚动监听、轻量弹框、模态框、表单）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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

上一篇：十三、CSS 3新特性详解（一）——属性
下一篇：论文阅读 - Group Normali