- https://getbootstrap.com/
- CDN: conotent delivery network
- http://yongfei-blog.logdown.com/posts/1889892
-
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
Need to add these two at the end of the <body>
###### Grid system:
- Better to add class into <div>
- A simple way to apply color:
.text-white{ color: #ffffff; } .background-blue{ background-color: #3b5998; }
- cols in cols:
....write something
```
##### Grid system with different screen size
-
```
some thing about a new row
- . Choose from a responsive, fixed-width container (meaning its max-width changes at each breakpoint) or fluid-width (meaning it’s 100% wide all the time).
| Detail 1 | Detail 2 | Detail 3 | Detail 4 |
|---|---|---|---|
| 234 | John | Pentesting | China |
| 234 | John | Pentesting | China |
| 234 | John | Pentesting | China |
| 234 | John | Pentesting | China |
| 234 | John | Pentesting | China |
```
- Just put nav bar content into a container div
###### Tricky to right align some navbar items
-
```
```
- ```.ml-auto```:
1. https://getbootstrap.com/docs/4.0/utilities/flex/#auto-margins
2. Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. Shown below are three examples of controlling flex items via auto margins: default (no auto margin), pushing two items to the right (.mr-auto), and pushing two items to the left (.ml-auto).
```
```
- Attention on ```.justify-content-end```. This is not going to work here
1. Use justify-content utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if flex-direction: column). Choose from start (browser default), end, center, between, or around.
2. https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content
###### Trick to change the color of any navbar items
1. Make sure our own css file is loaded after bootstrap
```
```
2. Check devtool to see which class control the color
3. Write overide color set in your own style stylesheet
```
.navbar-light .navbar-brand{
color: Yellow;
}
```
Here ```.navbar-light .navbar-brand``` are the two classes that involve in the color control
##### Centering the conotent
- This center the div block with individual internal css
```
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
```
- mt-5: margin top is 5
##### Create dropdown with bootstrap.
-
```
Log in
```
- These codes form a single dropdown list.
##### Hide scrollbar for certain class:
-``` .parallax-window::-webkit-scrollbar {
display: block;
}
```
##### Solve the text overflow in small screen
-
```
@media screen and (max-width: 992px){
.major{
min-height: 100vh;
}
```
- 992px is the media query point set by bootstrap
- .major is the outest container for the overflow content
- The overflow origins from the bootstrap setting: the box size will no longer equal to row size but its original size. However the row size is a constant in px, so it over flows.
- For some currently unknown reason, set row height to 100% is not going to work.
##### .pull-right/.pull-left
##### adjust button size
- ```
.jumbotron .btn{
padding: 15px 25px;
}
```
##### Responsive img
- img-fluid class
##### Text-align : text-right + text-right