當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2024/7/5 编程问答 40 豆豆

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

1.1 警告提示框

1.2 徽章和面包屑

1.3 按鈕和按鈕組

1.4 卡片

1.5 列表組

1.6 導航和選項卡

1.7 分頁和進度條

1.8 巨幕和旋轉圖標

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">選項一</a><a href="#" class="dropdown-item">選項二</a><a href="#" class="dropdown-item">選項三</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">選項一</a><a href="#" class="dropdown-item">選項二</a><div class="dropdown-divider"></div><a href="#" class="dropdown-item">選項三</a><a href="#" class="dropdown-item disabled">選項三</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">選項一</a><a href="#" class="dropdown-item">選項二</a><div class="dropdown-divider"></div><a href="#" class="dropdown-item">選項三</a><a href="#" class="dropdown-item disabled">選項三</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">選項一</a><a href="#" class="dropdown-item">選項二</a><div class="dropdown-divider"></div><a href="#" class="dropdown-item">選項三</a><a href="#" class="dropdown-item disabled">選項三</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 導航條

1.13 滾動監聽

1.14 輕量彈框

1.15 模態框

1.16 表單

<form action="" class="form-row"><div class="form-group col-sm-6"><label for="user">請輸入用戶名：</label><input type="text" id="user" class="form-control"></div><div class="form-group col-sm-6"><label for="password">請輸入密碼：</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">請輸入備注：</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">請輸入電子郵箱：</label><input type="text" id="email1" class="form-control form-control-lg"></div><div class="form-group col-sm-12"><label for="email2">請輸入電子郵箱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">請選擇大小：</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">復選框</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>

總結

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

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

上一篇：十三、CSS 3新特性详解（一）——属性
下一篇：三、Java 面向对象高级——数据结构、