English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Learning Bootstrap is very simple, and the styles it provides are very beautiful. Just a little simple learning can create beautiful pages.
Bootstrap Chinese website: http://v3.bootcss.com/
Bootstrap provides three types of downloads:
Bootstrap for production environment
Compiled and compressed CSS, JavaScript, and font files. Does not include documentation and source code files.
Bootstrap source code
Source code of Less, JavaScript, and font files, with documentation. Requires Less compiler and some settings.
Sass
This is the source code migration project from Less to Sass for Bootstrap, used for quickly introducing it into Rails, Compass, or projects targeting Sass only.
Actually, we can use Bootstrap without downloading it:
Bootstrap Chinese website has built its own free CDN acceleration service for Bootstrap. Based on domestic cloud vendor CDN services, access speed is faster, acceleration effect is more obvious, no speed and bandwidth limit, free forever.
base.html
<!DOCTYPE html> <html lang="zh-CN">-CN"> <head> <meta charset="utf-8">-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- above3meta tags*Must*be placed at the top, any other content*Must*Follow! --> <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>
base.html has already imported Bootstrap, save it, and we can use the styles provided by Bootstrap.
Font icon
Bootstrap provides more than two hundred default icons. We can use these icons through span tags:
<h3>Icon</h3> <span class="glyphicon glyphicon-home"></span> <span class="glyphicon glyphicon-signal"></span> <span class="glyphicon glyphicon-cog"></span> <span class="glyphicon glyphicon-apple"></span> <span class="glyphicon glyphicon-trash"></span> <span class="glyphicon glyphicon-play-circle"></span> <span class="glyphicon glyphicon-headphones"></span>
Button
<button></The button> tag is used to create buttons, Bootstrap provides a variety of button styles. <h3>Button</h3> <button type="button" class="btn btn-default">Button</button> <button type="button" class="btn btn-primary">primary</button> <button type="button" class="btn btn-success">success</button> <button type="button" class="btn btn-info">info</button> <button type="button" class="btn btn-warning">warning</button> <button type="button" class="btn btn-danger">danger</button> <h3>Button Size</h3> <button type="button" class="btn btn-default">Button</button> <button type="button" class="btn btn-primary btn-lg">primary</button> <button type="button" class="btn btn-success btn-sm">success</button> <button type="button" class="btn btn-info btn-xs">info</button> <h3>Display icon within button</h3> <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-home"></span> Button</button>
Buttons have default sizes, Bootstrap also provides three parameters to adjust the size of buttons, namely: btn-lg, btn-sm and btn-xs.
Dropdown menu
Dropdown menu is one of the most common interactions, Bootstrap provides beautiful styles.
<h3>下拉菜单</h3>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a>
Input box
Through the <input></Use the <input> tag to create an input box.
<h3>Input box</h3>
<div class="input-group">
<span class="glyphicon glyphicon-user"></span>
<input type="text" placeholder="username">
</div>
<div class="input-group">
<span class="glyphicon glyphicon-lock"></span>
<input type="password" placeholder="password">
</div>
Navigation bar
The navigation bar is an indispensable guide for the entire website.
<h3>Navigation bar</h3>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a>
nav>
Form/such as submitting login information, submitting query conditions, etc. Data transmission between people and the system must rely on forms to be completed. For example, registration/form>tags to create forms.
<h3>Form</h3>
<form>
<div class="form-group">
<span class="glyphicon glyphicon-user"></span>
<input type="email" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<span class="glyphicon glyphicon-lock"></span>
<input type="password" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Warning Box
The warning box is an important means for the system to convey information to users and provide guidance. Without a specific label for the warning box, beautiful warning boxes can be created instantly with the styles provided by Bootstrap.
<h3>Warning Box</h3>
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" 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 class="alert alert-success" role="alert">
<a href="#" class="alert-link">success!</a>
</div>
<div class="alert alert-info" role="alert">
<a href="#" class="alert-link">info!</a>
</div>
<div class="alert alert-warning" role="alert">
<a href="#" class="alert-link">warning!</a>
</div>
<div class="alert alert-danger" role="alert">
<a href="#" class="alert-link">danger!</a>
</div>
Progress Bar
The processing process of the system often requires users to wait, and the progress bar can make users aware of the processing process of the system, thereby increasing tolerance.
<h3>Progress Bar</h3>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
70%
</div>
</div>
That's all for this article. I hope it will be helpful to your studies, and I also hope that everyone will support and cheer for the tutorial.
If you want to learn more deeply, you can click here to learn, and I will also attach two excellent topics for you: Bootstrap Learning Tutorial Bootstrap Practical Tutorial
Statement: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been edited by humans, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email to report abuse, and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.)