[udemy]WebDevelopment_Bootstrap,Templates

Bootstrap Introduction

Bootstrap 相对于CSS, JS

就像PPT模板相对于PPT

说白了就是前人已经做好了(pre-build)很多模板，你可以直接拿来主义

Bootstarp 4

Two ways to use it

1. download

you will see a bunch of files

Bootstarp.min.css means they are minified

2. CDN(Content Delivery Network)

we can directly copy this code into index.html

Because JS would be read after CSS, it be put in the bottom of body part

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>Bootstrap</title>
 5     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 6 
 7 </head>
 8 <body>
 9     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
10     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
11     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
12 </body>
13 </html>

next step,

if we would like to add Navbar in our website

copy the code into your html file directly

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>Bootstrap</title>
 5     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 6 
 7 </head>
 8 <body>
 9 
10 <nav class="navbar navbar-expand-lg navbar-light bg-light">
11   <a class="navbar-brand" href="#">Navbar</a>
12   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
13     <span class="navbar-toggler-icon"></span>
14   </button>
15 
16   <div class="collapse navbar-collapse" id="navbarSupportedContent">
17     <ul class="navbar-nav mr-auto">
18       <li class="nav-item active">
19         <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
20       </li>
21       <li class="nav-item">
22         <a class="nav-link" href="#">Link</a>
23       </li>
24       <li class="nav-item dropdown">
25         <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
26           Dropdown
27         </a>
28         <div class="dropdown-menu" aria-labelledby="navbarDropdown">
29           <a class="dropdown-item" href="#">Action</a>
30           <a class="dropdown-item" href="#">Another action</a>
31           <div class="dropdown-divider"></div>
32           <a class="dropdown-item" href="#">Something else here</a>
33         </div>
34       </li>
35       <li class="nav-item">
36         <a class="nav-link disabled" href="#">Disabled</a>
37       </li>
38     </ul>
39     <form class="form-inline my-2 my-lg-0">
40       <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
41       <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
42     </form>
43   </div>
44 </nav>
45     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
46     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
47     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
48 </body>
49 </html>

Then beautiful Navbar is shown

Use the same step,

we can add Jumbotron ['dʒʌmbəutrɔn] n. 电视机的超大屏幕

and modal

You may notice that when we click the button

we have our own modal, which proves this is JS

How can we add our own custom look ?

For example, I would like to change Launch demo modal button's color

We can search buttons code, and edit the Launch demo modal's button code

Or we can change it in the style.css file

.btn-success{
    background-color: orange;
}

Bootstrap 4 Grid

This is the reason why bootstrap is so popular.

Boootstrap allowed us to create very responsive website using these ideas of columns

 1   <div class="container">
 2     <div class="row">
 3         <div class="col col-sm-6" >
 4           1 of 2
 5         </div>
 6         <div class="col col-sm-3" >
 7           2 of 2
 8         </div>
 9          </div>
10   </div>

.col{
    background-color: grey;
    border: 2px solid black;
}

The web site would be shown like this,

Bootstrap has the idea of a grid system and this grid system has 12 lines

col-sm-6 : 1 of 2 part covers 6/12

col-sm-3 : 2 of 2 part covers 3/12

 1   <div class="container">
 2     <div class="row">
 3         <div class="col col-sm-6" >
 4           1 of 2
 5         </div>
 6         <div class="col col-sm-3" >
 7           2 of 2
 8         </div>
 9         <div class="col col-sm-3" >
10           Extra
11         </div>
12          </div>
13   </div>

The web site would be shown like this,

But what if the sum of these three is over 12 ?

 1  <div class="container">
 2     <div class="row">
 3         <div class="col col-sm-6" >
 4           1 of 2
 5         </div>
 6         <div class="col col-sm-3" >
 7           2 of 2
 8         </div>
 9         <div class="col col-sm-4" >
10           Extra
11         </div>
12          </div>
13   </div>

The web site would be shown like this,

 1   <div class="container">
 2     <div class="row">
 3         <div class="col col-sm-6 col-md-12 col-lg-12" >
 4           1 of 2
 5         </div>
 6         <div class="col col-sm-3 col-md-6 col-lg-12" >
 7           2 of 2
 8         </div>
 9         <div class="col col-sm-4 col-md-6 col-lg-12" >
10           Extra
11         </div>
12          </div>
13   </div>

If the size of the window is medium then I want the whole 12 grid system to the first div, 6/12 gird to the second, 6/12 to the third.

Same logic as col-lg-12.

This is how you can create really responsive websites. And the biggest selling feature of bootstrap is that it make sure our website look good no matter what screen size.

Putting Your Website Online

github.io

DEVELOPER FUNDAMENTALS:IV

Try to use free templates:

Animate.css (https://daneden.github.io/animate.css/)

So it is very rare when build something from scratch

Create-tim(https://www.creative-tim.com/)

有已经搭好的web模板