iT邦幫忙

2024 iThome 鐵人賽

DAY 26
0
Modern Web

html跟css神奇的化學反應系列 第 26

day 26 網頁的下拉式選單

  • 分享至 

  • xImage
  •  

今天就來説説下拉式選單吧~ 我所使用的下拉式選單是來自於bootstarp的内建文件,但在開始使用bootstrap的元件之前就會很像上一篇一樣是需要先連接bootstrap的cdn的

首先,先進入https://bootstrap5.hexschool.com/ bootstrap官網。看到這個後點擊copy,兩個都需要哦,copy之後放在html裏的<head>
https://ithelp.ithome.com.tw/upload/images/20241002/20168629ASh2i63StW.png

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

這是程式碼之後才可以用bootstrap的元件哦,bootstrap上有許多文件,這樣就可以用啦!

接下來我們到bootstrap的下拉選單上,網址:https://bootstrap5.hexschool.com/docs/5.1/components/dropdowns/ 就可以開始使用或者複製程式碼來用了

https://ithelp.ithome.com.tw/upload/images/20241002/20168629SaXsyRXiwL.png
我們先來copy一個原件,複製貼上

https://ithelp.ithome.com.tw/upload/images/20241002/20168629mTqeZamiur.png

就可以用啦~

網址下面還有許多可以直接去使用的下拉式選單的元件,而且我們可以利用他去設計網頁的菜單,還有許多用處。

剩下的大家自己探索啦~我們今天就到這裏了~我們明天見~


上一篇
day 25 bootstrap 的 icon
下一篇
day 27 css 的 opacity
系列文
html跟css神奇的化學反應30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言