首頁 > web前端 > js教程 > 主體

Bootstrap框架下下拉式選單的實作(程式碼範例)

不言
發布: 2018-10-15 16:52:35
轉載
6542 人瀏覽過

這篇文章帶給大家的內容是關於Bootstrap框架下下拉選單的實作(程式碼範例),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

網頁互動的時候常常會需要上下文選單或隱藏/顯示選單項目,Bootstrap預設提供了用於顯示連結清單的可切換、有上下文的選單。而且在各種互動狀態下的選單展示需要和javascript插件配合才能使用。本文將詳細介紹Bootstrap下拉選單(免費課程推薦:bootstrap教學

#使用方法

##在使用Bootstrap框架的下拉式選單時,必須呼叫Bootstrap框架提供的bootstrap.js檔。當然,如果使用的是未編譯版本,在js資料夾下能找到一個名為「dropdown.js」的文件,也可以呼叫這個js檔案

因為Bootstrap的元件互動效果都是依賴jQuery函式庫寫的插件,所以在使用bootstrap.js之前一定要先載入jquery.js才會產生效果

##
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
登入後複製

#基本用法

在使用Bootstrap框架中的下拉式選單元件時,其結構運用的正確與否非常的重要,如果結構和類別名稱未使用正確,直接影響元件是否能正常運用

1、使用一個名為「dropdown」的容器包裹了整個下拉式選單元素

<div class="dropdown"></div>
登入後複製

2、使用了一個

相關標籤:
來源:cnblogs.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板