Home > Article > Web Front-end > How to get started quickly with bootstrap

How to get started quickly with bootstrap

(*-*)浩Original: 2019-07-11 10:17:453058browse

There are two key points in learning Bootstrap. One is to understand the concept and understand how bootstrap uses divs to replace the past table layout; the other is to be familiar with common structures so that the required components can be found and combined in time. The need can be met in one click.

The biggest feeling after learning is that bootstrap changes the work of front-end layout and rendering from fill-in-the-blank questions to choices question. (Recommended learning: Bootstrap video tutorial)

Even if you don’t have strong aesthetic ability, you can still make the webpage simple and elegant, and the appearance is stunning.

BootStrap was created by two Twitter employees, Mark Otto and Jacob Thornton, in August 2010. It has been 7 years ago, but it is still the most popular front-end CSS framework. It is based on the Less front-end development library and provides common CSS and Javascript codes, so you can get started quickly.

It has the following features: complete basic CSS plug-in; rich predefined style sheets; js plug-in set based on jQuery; very flexible responsive grid system, and advocates mobile-first thinking. With the popularity of bootstrap, many excellent plug-ins have appeared, such as Font Awesome font. Bootstrap official website, demos and documentation are very rich.

What is worth mentioning here is that fonts replaces .png with font files. It uses @font-face syntax to download secure Web fonts to the client in real time, which facilitates arbitrary scaling. , change color.

Html standard template is as follows

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootstrap基础模板</title>
    <link href="../public/css/bootstrap.css" rel="stylesheet">
    <link href="../public/css/bootstrap-theme.css" rel="stylesheet">
</head>
<body>
    <header></header>
    <article></article>
    <footer></footer>
    <script type="text/javascript" src="../public/js/jquery-2.1.4.js"></script>
    <script type="text/javascript" src="../public/js/bootstrap.js"></script>
</body>
</html>

For more Bootstrap related technical articles, please visit the Bootstrap Tutorial column. study!

The above is the detailed content of How to get started quickly with bootstrap. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What are the benefits of using bootstrap?Next article：What are the benefits of using bootstrap?

See more

How to get started quickly with bootstrap

Related articles