python web开发 Bootstrap框架基础
生活随笔
收集整理的這篇文章主要介紹了
python web开发 Bootstrap框架基础
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章目錄
- 1. 安裝
- 2. Bootstrap 5 基本應用
learning from 《python web開發從入門到精通》
- Bootstrap 是最受歡迎的 前端組件庫，用于 HTML，CSS，JavaScript 開發的 開源工具集
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 到項目下，并下載（復制粘貼）上面兩個 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學習web開發</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 基本應用
- Bootstrap 提供了很多組件，巨幕、信息提示框、按鈕、表單、導航欄等
可以去官網 https://getbootstrap.com/ 查詢組件示例，快速修改
https://getbootstrap.com/docs/5.1/examples/navbars/
https://getbootstrap.com/docs/5.1/components/navbar/
例子：創建導航欄菜單
<!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><nav class="navbar navbar-expand-sm navbar-light bg-light"><div class="container-fluid"><a class="navbar-brand" href="https://michael.blog.csdn.net/">我的導航</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/">主頁</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">關于作者</a><ul class="dropdown-menu" aria-labelledby="navbarDropdown"><li><a class="dropdown-item" href="#">簡歷</a></li><li><a class="dropdown-item" href="#">項目</a></li><li><hr class="dropdown-divider"></li><li><a class="dropdown-item" href="#">聯系方式</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="輸入你的關鍵詞" aria-label="Search"><button class="btn btn-outline-success" type="submit">站內搜索</button></form></div></div> </nav></body> </html>效果圖：
總結
以上是生活随笔為你收集整理的python web开发 Bootstrap框架基础的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： LeetCode 1953. 你可以工作
- 下一篇： 流畅的Python 1. Python数