Bootarp 4 下拉式選單
#推薦教學:Bootstarp手冊
下拉選單是可切換的,是以清單格式顯示連結的上下文功能表。
<div class="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Dropdown button </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div></div>
程式碼解讀
# .dropdown
類別用來指定一個下拉式選單。
我們可以使用一個按鈕或連結來開啟下拉式選單,按鈕或連結需要新增 .dropdown-toggle 和 data-toggle="dropdown
"
屬性。
.dropdown-menu
類別來設定實際下拉式選單,然後在下拉式選單的選項中新增 .dropdown-item
#類別。 下拉式功能表中的分割線
#
# #.dropdown-divider 類別用於在下拉式選單中建立一個水平的分割線:
<div class="dropdown-divider"></div>
下拉選單中的標題
.dropdown-header
類別用於在下拉式選單中新增標題:
<pre class='brush:php;toolbar:false;'><div class="dropdown-header">Dropdown header 1</div></pre>
下拉選單中的可用項目與停用項目
.active 類別會讓下拉式選單的選項高亮顯示(新增藍色背景)。 如果要停用下拉選單的選項,可以使用
.#disabled 類別。
<a class="dropdown-item active" href="#">Active</a> <a class="dropdown-item disabled" href="#">Disabled</a>
下拉選單的定位
. dropdown-menu 類別後面加上.dropdown-menu-right 類別。
<div class="dropdown-menu dropdown-menu-right">
指定向上彈出的下拉式選單
如果你希望下拉選單向上彈出,可以將 "dropup":<div class="dropup">
####按鈕中設定下拉式選單################## 我們可以在按鈕中加入下拉式選單:######<div class="btn-group">
<button type="button" class="btn btn-primary">Sony</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
<span class="caret"></span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Tablet</a>
<a class="dropdown-item" href="#">Smartphone</a>
</div></div>
############# ##
以上是bootstrap4如何設定下拉式選單的詳細內容。更多資訊請關注PHP中文網其他相關文章!

一个好的网站,不能只看外表,网站后台同样很重要。本篇文章给大家分享10款好看又实用的Bootstrap后台管理系统模板,可以帮助大家快速建立强大有美观的网站后台,欢迎下载使用!如果想要获取更多后端模板,请关注php中文网后端模板栏目!

bootstrap与jquery的关系是:bootstrap是基于jquery结合了其他技术的前端框架。bootstrap用于快速开发Web应用程序和网站,jquery是一个兼容多浏览器的javascript库,bootstrap是基于HTML、CSS、JAVASCRIPT的。

好看又实用的Bootstrap电商源码模板可以提高建站效率,下面本文给大家分享7款实用响应式Bootstrap电商源码,均可免费下载,欢迎大家使用!更多电商源码模板,请关注php中文网电商源码栏目!

好看又实用的企业公司网站模板可以提高您的建站效率,下面PHP中文网为大家分享8款Bootstrap企业公司网站模板,均可免费下载,欢迎大家使用!更多企业站源码模板,请关注php中文网企业站源码栏目!

在bootstrap中,sm是“小”的意思,是small的缩写;sm常用于表示栅格类“.col-sm-*”,是小屏幕设备类的意思,表示显示大小大于等于768px并且小于992px的屏幕设备,类似平板设备。

bootstrap modal关闭的方法:1、连接好bootstrap的插件;2、给按钮绑定模态框事件;3、通过“ $('#myModal').modal('hide');”方法手动关闭模态框即可。

bootstrap默认字体大小是“14px”;Bootstrap是一个基于HTML、CSS、JavaScript的开源框架,用于快速构建基于PC端和移动端设备的响应式web页面,并且默认的行高为“20px”,p元素行高为“10px”。

在bootstrap中,“bootstrap-datepicker”用于设置日历、时间样式,是一款时间选择插件,语法为“元素对象.datepicker({属性:属性值,...})”;可以通过不同的属性来设置时间显示样式。


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

SublimeText3漢化版
中文版,非常好用

MantisBT
Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

MinGW - Minimalist GNU for Windows
這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

禪工作室 13.0.1
強大的PHP整合開發環境

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)