How about learning bootstrap?

Presumably everyone who studies the front end knows this responsive framework. When I came into contact with this framework before, I was learning about the advanced tutorial of page design in the previous section. At that time, I had to do that kind of login registration interface, and the input box inside was very troublesome.

Sometimes the width of the computer is different, or the appearance of a beautiful webpage is changed when it is written on the mobile phone; it is all caused by the lack of responsiveness, because the writing is of fixed width and height, but this problem is in bootstrap The solution inside is very good, this is the biggest advantage of bootstrap, so I bit the bullet and started to learn bootstrap;

<div class="dropdown dropup">
                <button class="btn btn-info">分列式下拉菜单</button>
                <button class="btn btn-info dropdown-toggle" data-toggle="dropdown">
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu " role="menu">
                    <li role="menuitem"><a href="#">菜单</a></li>
                </ul>
            </div>

Because bootstrap is dependent on jquery execution, jquery.js and bootstrap.min.js files should be introduced when writing code; this is the code of a drop-down box inside, I have to say that its class is really powerful, these The structure plus the class name can achieve a nice drop-down menu;

There is also a new panel:

If you want everyone to write this thing, how will you realize it? If you want me to write it, it’s really not enough without dozens of lines, but after using the class name in bootstrap, you will find that the code is very concise and the interface is very beautiful:

<div class="panel panel-success">
            <div class="panel-heading">
                提示
            </div>
            <div class="panel-body">
                <p>
                    开始进行表单和输入框的学习！
                </p>
            </div>
            <div class="panel-footer">
                <p>邮箱：[email protected]</p>
            </div>
        </div>

Just a few lines, you don’t need to write the style yourself, let’s not talk about the background color, font size, etc. Even these alignment methods are enough to cause headaches;

In the process of learning this framework, you must settle down, because it has many classes and its structure is fixed. Of course, you can write things by yourself, but in many cases, the structure in bootstrap is enough to complete a project;

There are a lot of class names in it:

Look at the label of this capsule, it will be a headache if you want everyone to do it

        <ul class="nav nav-pills" role="tablist">
            <li class="presentation active"><a href="">信息<span class="badge">100</span></a></li>
            <li class="presentation"><a href="">信息<span class="badge">100</span></a></li>
            <li class="presentation"><a href="">信息<span class="badge">100</span></a></li>
        </ul>

And it only needs these few lines, but the class name inside can’t be wrong, it’s wrong if one is wrong, there are three uls, one li, and one span, although it’s cumbersome, it’s much better than writing it yourself;

It is not difficult to learn bootstrap, but I am afraid that I will not be patient and cannot write down so many structures and so many class names;

In short, bootstrap is a good thing. After learning it, it will definitely improve the efficiency of developing your own pages, and you can also design very beautiful pages, but the learning process is also quite uncomfortable. Various structures and classes will make people scalp hair Hemp, animation, etc. If you really want to learn the front end well, you must learn this framework and be patient.