How does the Bootstrap framework work? Get started quickly
May 30, 2021 Article blog
Table of contents
What is Bootstrap?
Bootstrap is a front-end framework for rapidly developing web applications and Web sites. A n HTML, CSS, and JS framework developed by Twitter's Mark Otto and Jacob Thornton. B ootstrap, developed based on HTML5 and CSS3, is more personalized and user-friendly on the jQuery basis, creating its own unique website style and compatible with most jQuery plug-ins. A nyone who has used HTML5 and CSS3 knows that some tall sites today are not short of html5 and css3. A nd Bootstrap is officially based on these designs, and it encapsulates our ready-made collection of CSS styles. F or our direct reference. The first contact, you can understand it as a push css style collection can be.
What's so special about Bootstrap?
Bootstrap's built-in style is beautiful and useful. I nstead of making the website fancy, it's better to start with Jane. B ootstrap adds Twitter-like page elements in addition to the reset browser style, all we have to do is use them, use them with impunity and confidence, without having to think about the height of the line, calculate that width, and let the page elements that you accidentally forget to define appear awkwardly on the page. Because these Twitters have been designed for us to consider, and from Twitter's hand, after all, through the test of hundreds of millions of users, coupled with the support of Twitter's strong design team, make this framework look different.
Of course, Bootstrap has more than that, otherwise Bootstrap won't be red-hot as soon as it's released.
- Mobile device first: Since Bootstrap 3, the framework contains mobile device-first styles throughout the library.
- Browser support: Bootstrap is supported by all major browsers.
- Easy to get started: With the basics of HTML and CSS, you can start learning Bootstrap. Here's a concrete example of how to use Bootstrap quickly.
- Responsive design: Bootstrap's responsive CSS adapts to desktops, tablets, and phones.
- The main reason is that it is not only good, but also open source.
(This piece about responsive design is something our web developers will have to face in the future, because with the continuous development of a variety of mobile devices, mobile tablets are popular.) T hese mobile devices have a strong potential to become mainstream. S o we have to keep up with the trend, do a good job of PC website at the same time must consider making the site adapt to other terminals. ）
Simple use of Bootstrap
This section focuses on Bootstrap's environment installation, file structure, and shows how to use Bootstrap through a demo demo.
Start by downloading the latest version of Bootstrap: http://v3.bootcss.com/getting-started/#download Bootstrap offers two forms of compression packages, with the following directories and files visible in the downloaded package, which are placed in different directories by category, and are available in both compressed and uncompressed versions. A fter downloading the package, you can see the following (compressed version) directory structure by unzipping it to any directory: bootstrap/--css/bootstrap.css -- bootstrap.css.map, bootstrap.min.css, bootstrap-theme.css- bootstrap-theme.css map - └ - bootstrap-theme.min.css - js / - bootstrap .js - └ - bootstrap.min .js └ - fonts / . . . glyphicons-darlings-regular.eot -- glyphicons-halflings-.svg glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff2
Shown above is bootstrap's basic file structure: compiled CSS and JS (bootstrap.) files are available here, as well as compressed CSS and JS (bootstrap.min.) files. A CSS source mapping table (bootstrap..map) is also available and can be used in development tools in some browsers. Icon fonts from Glyphicons are also included and are used in the accompanying Bootstrap theme.
For compressed and uncompressed versions, use one of them when you use it.
Demo
Here's the html code that uses Bootstrap, adding some Bootstrap styles to the button.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 按钮选项</title>
<!-- 添加对Bootstrap的引用 -->
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<!-- 标准的按钮 -->
<button type="button" class="btn btn-default">默认按钮</button>
<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始按钮</button>
<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功按钮</button>
<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息按钮</button>
<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告按钮</button>
<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险按钮</button>
<!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接按钮</button>
</body>
</html>
Demo effect:
You can see that no other css code is written in the html code above, which refers entirely to Bootstrap's button style. T he key code part: class-"btn btn-default" btn: Inherits the default appearance of the fillet gray button. b tn-default is the style of the default/standard button. O ther classes are better if you want to change other styles, such as btn-danger is a danger button. Some of these styles are written in the bootstrap.min .css file, so you can open them and browse them.
In this way, the use of Bootstrap was unknowingly completed, and the other controls were different classes. Always check official documents when using them, and you'll get a lot of rewards.
In addition, it is important to note when referencing Bootstrap: that is, jquery.min.js and bootstrap.min .js the order in which files are referenced, because all of Bootstrap's JavaScript plug-ins rely on jQuery, so jQuery must be introduced before Bootstrap.
There's so much to say about Bootstrap, and it's the first time I've come into contact with this framework. B ut through this month's study and use, this framework does have many advantages, starting quickly, greatly improving the design efficiency, quality and so on in the front section of the web page. Can help us build a tall website in the shortest time.