最後更新: 2021-10-11
目錄
- Download
- Bower
- Components
- View
- JS Plugin
- - modal.js
- table css
- Doc
- Other
介紹
Code: https://github.com/twbs/bootstrap
* Query required (所以一定要 include jquery 入去)
* Bootstrap automatically adapts your pages for various screen sizes.
* Bootstrap is mobile first
Bootstrap utilizes LESS CSS, is compiled via Node, and is managed through GitHub
LESS = Leaner Style Sheets # A backwards-compatible language extension for CSS
Version
bootstrap jquery 4.6 3.5.1 3.4.1 1.12.4
Download
Download Link:
bootstrap:
# Source
wget https://github.com/twbs/bootstrap/archive/refs/tags/v3.4.1.zip
wget https://github.com/twbs/bootstrap/releases/download/v3.4.1/bootstrap-3.4.1-dist.zip
jquery:
wget http://code.jquery.com/jquery-1.12.4.min.js
CDN:
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <!-- jquery --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
Precompiled Bootstrap
# bootstrap-3.3.0-dist.zip dist/ ├── css │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ └── bootstrap-theme.min.css ├── fonts │ ├── glyphicons-halflings-regular.eot │ ├── glyphicons-halflings-regular.svg │ ├── glyphicons-halflings-regular.ttf │ └── glyphicons-halflings-regular.woff └── js ├── bootstrap.js ├── bootstrap.min.js └── npm.js
map.css
i.e.: bootstrap.css.map
當載入 bootstrap.min.css 時, 在 browsers’ developer tools 模式下會用到它
bootstrap.min.css
... /#sourceMappingURL=bootstrap.min.css.map/
Bower
manage Bootstrap's Less, CSS, JavaScript, and fonts
bower install bootstrap
Usage
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> ... <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="js/jquery-1.11.1.min.js"></script> </head> <body> ... <!-- CODE HERE --> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>
Bootstrap requires the use of the HTML5 doctype.
<!DOCTYPE html>
<html lang="en">
CSS
"<link>" into your <head> before all other stylesheets to load our CSS
JS
Near the end of your pages but before </body> tag
* jQuery must come first, then Popper, and then bootstrap JavaScript plugins.
Other