Home > Developer > Web Develop
Bootstrap3 study notes, bootstrap3 video tutorial
Bootstrap3 introduction ---- Topic 1
Disclaimer: This article adds memories to students who are new to bootstrap3. There must be many shortcomings and imperfections. I hope to help you, I also hope that more people can understand bootup and use it in their own projects.
All the code in this article should be tested in the latest browser.
Bootstrap is an open-source front-end development toolkit launched by Twitter. It was developed by Twitter designer Mark Otto and Jacob Thornton. It is a CSS/HTML framework. Bootstrap provides elegant HTML and CSS specifications, which are written by the dynamic CSS language Less. Since its launch, Bootstrap has become a popular open-source project on GitHub. It is used by Breaking News of NASA's MSNBC (Microsoft National Broadcasting Corporation.
Bootstrap3 (hereinafter referred to as BT) Environment ConstructionFrom http://getbootstrap.com/getting-started/the three folders including CSS fonts js in the backend are introduced in the HTML file header.
If you do not want to download it, you can also use the official CDN
<!-- Latest compiled and minified CSS --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"><!-- Optional theme --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"><!-- Latest compiled and minified JavaScript --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
A grid refers to dividing a page into a grid and dividing it into 12 columns based on each row (if you want to change it to 24 columns, you can re-compile it LESS ). the grid system can arrange the columns vertically when the device's response is smaller than 767px according to the device's view. Of course, the total number of columns is 12. the following is an example.
<!DOCTYPE html>
The container here makes the content in the middle of the page a container TypographicalThe default font of some commonly used. BT files is Helvetica. If there is no final sans-serif. font-size 14px line-height 20px section margin-bottom 10px
Set paragraph color to indicate different Semantics
<p class="text-warning">warning</p><p class="text-info">info</p><p class="text-success">success</p>TableThere are four table Styles in BT3: table-striped background
Table-bordered with border
Place the table-hover mouse over the highlighted
Table-condensed compact table
The following is a code demonstration
<!DOCTYPE html>
You can also add the success warning info style in three colors for each row. The above Section has already been introduced as follows: FormThe form provided by BT3 allows the input box to have rounded corners, and blue halo appears when selected.
<!DOCTYPE html>It is recommended that the input box be placed in form-group. To enhance search engine reading, a label is required, but you can add. sr-only to prevent display.You can add a form-horizontal class to a horizontally arranged form.
The height and width of the input box can be controlled by using the grid system col-md-xx.
<form role="form"> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control input-lg" id="exampleInputEmail1" placeholder="Enter email"> </div></form>
You can add some tips in front of the input box.
<div class="form-group"> <div class="input-group"> <div class="input-group-addon">@</div> <input class="form-control" type="email" placeholder="Enter email"> </div> </div>ButtonBT3 provides. 7 button styles, different colors, and 4 button sizes. One of them is btn-block, which means to fill the button with the entire line.
Please refer to the code
<button type="button" class="btn">button</button> <button type="button" class="btn btn-primary btn-lg">button</button> <button type="button" class="btn btn-info btn-sm">button</button> <button type="button" class="btn btn-success btn-xs">button</button> <button type="button" class="btn btn-warning btn-block">button</button> <button type="button" class="btn btn-danger">button</button> <button type="button" class="btn btn-link">button</button>
How to translate Study NotesStudy note
How to take study notes?Copy the wrong question and repeat it with your own memories.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
