bootstrap

最後更新: 2021-10-11

目錄

介紹

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

 

 

 

 

Creative Commons license icon Creative Commons license icon