The learning of bootstrap is very simple, and the style it provides is very beautiful. Just a little simple study can create beautiful pages.
bootstrap Chinese website: http://v3.bootcss.com/
bootstrap provides three types of downloads:
Bootstrap for production environments
Compile and compressed CSS, JavaScript, and font files. Do not contain documents and source files.
Bootstrap source code
Less, JavaScript, and font files source code and with documentation. Requires the Less compiler and some setup work.
Sass
This is a source porting project from Less to Sass for rapid introduction in Rails, Compass, or Sass-only projects.
In fact, we can use it without downloading bootstrap:
Bootstrap Chinese website has specially built its own free CDN acceleration service for Bootstrap. Based on the CDN service of domestic cloud manufacturers, the access speed is faster, the acceleration effect is more obvious, there is no speed and bandwidth limitation, and it is permanently free.
base.html
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* be placed first, and any other content *must* follow them! --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"> </head> <body> <h1>Hello, bootstrap! </h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> </body></html>
Bootstrap has been introduced in base.html. Save it and we can use the styles provided by bootstrap.
Font icon
bootstrap provides more than 200 icons by default. We can use these icons through the span tag:
<h3>Icon</h3> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span>
Button
The <button></button> tag is used to create buttons, and bootstrap provides rich button styles. <h3>Button</h3> <button type="button">Button</button> <button type="button">primary</button> <button type="button">success</button> <button type="button">info</button> <button type="button">warning</button> <button type="button">warning</button> <button type="button">danger</button> <h3>Button size</h3> <button type="button">button</button> <button type="button">primary</button> <button type="button">success</button> <button type="button">info</button> <h3>Show the icon in the button</h3> <button type="button"><span></span>Button</button>
In addition to the default size of the button, bootstrap also provides three parameters to adjust the size of the button, namely: btn-lg, btn-sm and btn-xs.
Pull-down menu
The drop-down menu is one of the most common interactions, and bootstrap provides beautiful styles.
<h3>Drop down menu</h3> <div> <button type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true"> Dropdown <span></span> </button> <ul role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> </ul> </div>
Input box
Use the <input></input> tag to create an input box.
<h3>Input box</h3> <div> <span></span> <input type="text" placeholder="username"> </div> <div> <span></span> <input type="password" placeholder="password"> </div>
Navigation bar
Navigation bar is essential as a guide to the entire website.
<h3>Navigation Bar</h3> <nav> <div id="navbar"> <ul> <li><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> <li> <a href="#">data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span></span></a> <ul role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li></li> <li>Nav header</li> <li><a href="#">Separated link</a></li> </li> </li> </ul> </div><!--/.nav-collapse --> </div> </nav>
Form
The data transfer between people and systems needs to be completed by forms. For example, the submission of registration/login information, the submission of query conditions, etc. Use the <form></form> tag to create a form.
<h3>Form</h3> <form> <div> <span></span> <input type="email" id="exampleInputEmail1" placeholder="Enter email"> </div> <div> <span></span> <input type="password" id="exampleInputPassword1" placeholder="Password"> </div> <div> <label for="exampleInputFile">File input</label> <input type="file" id="exampleInputFile"> <p>Example block-level help text here.</p> </div> <div> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit">Submit</button> </form>
Warning box
Warning boxes are an important means for the system to convey information and provide guidance to users. There is no label for warning boxes, and the style provided by bootstrap can instantly create beautiful warning boxes.
<h3>Warning box</h3> <div role="alert"> <button type="button" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button> <strong>Warning!</strong> Better check yourself, you're not looking too good. </div> <div role="alert"> <a href="#">success!</a> </div> <div role="alert"> <a href="#">info!</a> </div> <div role="alert"> <a href="#">warning!</a> </div> <div role="alert"> <a href="#">danger!</a> </div>
Progress bar
The system's processing process often requires users to wait, and the progress bar allows users to perceive the system's processing process, thereby increasing tolerance.
<h3>Progress Bar</h3> <div> <div role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"> 70% </div> </div>
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.
If you still want to learn in depth, you can click here to learn and attach two exciting topics to you: Bootstrap learning tutorial Bootstrap practical tutorial