bootstrap front-end framework

Let bygones be bygones
Let it pass in the past

Now the technology of the web front end is developing very fast, and web pages are getting more and more dazzling. However, as a “back-end programmer”, don’t write css, write bad javascript, don’t know jquery? It doesn’t matter, this article will introduce the front-end development artifact–bootstrap, learn to transform it into a front-end person. (Off-topic: I was also struck by the front-end development, only to find this framework, it is so cool to use!)

Who is bootstrap?

Bootstrap is an open source product released in August 2011 by Twitter’s Mark Otto and Jacob Thornton. Bootstrap is a front-end framework for rapid development of web applications and websites based on HTML, CSS, and JAVASCRIPT.
In simple terms, Bootstrap is equivalent to a packaged front-end module, and the methods (functions) in the module cover html, css, and javascript. The functions of the package include common layouts, colors, etc., and can be called directly.

How to install bootstrap?

(1) The official website downloads the compiled compressed package

Official website: http://getbootstrap.com/
Find the location below, download the zip file, and extract the css and js folders.

(2) Github source download

Explain, the official can also directly download the source code, download the css and js folder inside the dist; of course, you can also compile yourself, refer to the tutorial above github

(3) Using cdn files

To put it simply, the use of bootstrap is mainly to use the already packaged js and css files, so you can also use the officially provided cdn file instead of downloading, and add the following code to the html head.

1
2
3
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

How to use bootstrap?

Specific manuals can refer to:
http://www.runoob.com/bootstrap/bootstrap-tutorial.html
http://www.bootcss.com/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<head>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-striped">
<tr>
<th>test</th>
<th>test</th>
<th>test</th>
</tr>
<tr>
<td>test</td>
<td>test</td>
<td>test</td>
</tr>
</table>
<button type="button" class="btn btn-success">success button</button>
</body>

Description: Import js and css in the head, the template is a lot, but these three are enough, and then the specific tag can use the class to load css and js.

本文标题:bootstrap front-end framework

文章作者:nmask

发布时间:2017年08月23日 - 16:08

最后更新:2019年07月11日 - 18:07

原始链接:https://thief.one/2017/08/23/1/en/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

nmask wechat
欢迎您扫一扫上面的微信公众号,订阅我的博客!
坚持原创技术分享,您的支持将鼓励我继续创作!

热门文章推荐: