python web开发 Bootstrap框架基础
生活随笔
收集整理的這篇文章主要介紹了
python web开发 Bootstrap框架基础
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
文章目錄
- 1. 安裝
- 2. Bootstrap 5 基本應(yīng)用
learning from 《python web開(kāi)發(fā)從入門(mén)到精通》
- Bootstrap 是最受歡迎的 前端組件庫(kù)，用于 HTML，CSS，JavaScript 開(kāi)發(fā)的 開(kāi)源工具集
1. 安裝
- 使用 CDN 引用
- 或者下載 https://getbootstrap.com/
popper.js cdn：https://unpkg.com/@popperjs/core@2
jquery.js https://code.jquery.com/jquery-3.6.0.js
解壓 Bootstrap 到項(xiàng)目下，并下載（復(fù)制粘貼）上面兩個(gè) js 文件到 js 文件夾里
后面使用外部文件引入即可
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>使用bootstrap框架</title><link rel="stylesheet" href="../css/bootstrap.css"><script src="../js/jquery.js"></script><script src="../js/popper.js"></script><script src="../js/bootstrap.js"></script></head> <body><div class="mt-4 p-5 bg-primary text-white rounded"><h1 style="text-align: center">Michael學(xué)習(xí)web開(kāi)發(fā)</h1><p>我的博客地址是：<a href="https://michael.blog.csdn.net/">https://michael.blog.csdn.net/</a></p></div></body> </html>bootstrap5-jumbotron 不支持https://www.runoob.com/bootstrap5/bootstrap5-jumbotron.html
2. Bootstrap 5 基本應(yīng)用
- Bootstrap 提供了很多組件，巨幕、信息提示框、按鈕、表單、導(dǎo)航欄等
可以去官網(wǎng) https://getbootstrap.com/ 查詢(xún)組件示例，快速修改
https://getbootstrap.com/docs/5.1/examples/navbars/
https://getbootstrap.com/docs/5.1/components/navbar/
例子：創(chuàng)建導(dǎo)航欄菜單
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>使用bootstrap框架制作導(dǎo)航欄</title><link rel="stylesheet" href="../css/bootstrap.css"><script src="../js/jquery.js"></script><script src="../js/popper.js"></script><script src="../js/bootstrap.js"></script></head> <body><nav class="navbar navbar-expand-sm navbar-light bg-light"><div class="container-fluid"><a class="navbar-brand" href="https://michael.blog.csdn.net/">我的導(dǎo)航</a><button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarSupportedContent"><ul class="navbar-nav me-auto mb-2 mb-lg-0"><li class="nav-item"><a class="nav-link active" aria-current="page" href="https://michael.blog.csdn.net/">主頁(yè)</a></li><li class="nav-item"><a class="nav-link" href="#">鏈接</a></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"data-bs-toggle="dropdown" aria-expanded="false">關(guān)于作者</a><ul class="dropdown-menu" aria-labelledby="navbarDropdown"><li><a class="dropdown-item" href="#">簡(jiǎn)歷</a></li><li><a class="dropdown-item" href="#">項(xiàng)目</a></li><li><hr class="dropdown-divider"></li><li><a class="dropdown-item" href="#">聯(lián)系方式</a></li></ul></li><li class="nav-item"><a class="nav-link disabled">商城</a></li></ul><form class="d-flex"><input class="form-control me-2" type="search" placeholder="輸入你的關(guān)鍵詞" aria-label="Search"><button class="btn btn-outline-success" type="submit">站內(nèi)搜索</button></form></div></div> </nav></body> </html>效果圖：
總結(jié)
以上是生活随笔為你收集整理的python web开发 Bootstrap框架基础的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： LeetCode 1953. 你可以工作
- 下一篇： 流畅的Python 1. Python数