Bootstrap basic learning_javascript skills

Bootstrap is a front-end structure framework based on grid structure (of course it also has JS, JQuery). Its advantage is that the content framework can be quickly built. Based on media query, the built page can quickly adapt to different users, regardless of Whether it is a mobile phone, a tablet, or a PC, it can basically adapt. Of course, the new version no longer supports IE6, and the support for IE8 is also very limited. After all, IE8 does not support HTML5 very well. (To be honest, I don’t support it myself.) I don't like IE6~8. For a junior player like me, compatibility is sometimes really difficult. Not only do I need to use it for projects, but I also need to use it for interviews. Have you made a mistake? If you encounter it, just check it online. Just complain, you still have to know how to do it! )

Without further ado, let’s start summarizing my BS notes during this period!

1. In terms of structural content, BS’s control over structural content is basically controlled by classes. For example, the control over structure is

<div class="container">
  <div class="row">
   <div class="col-md-4 col-xs-6">
     这一块div的类名中，是由col-md-4,col-xs-6这两个类名来控制他的框架宽度；其中col代表是栅格,md代表客户端显示器的宽度为pc中屏，同样的xs则代表客户端显示器为超小屏，也就是手机屏；4，6就代表了栅格的长度，意思就是在中屏显示器下宽度为4个栅格，在手机端宽度为6个栅格 ，一般情况下把把一整块div最多可以划成12个栅格，所以他的兄弟div在中屏下则是8个栅格！ 
   </div>
   <div class="col-md-8  text-muted">这一块div的类名中，抛去col-md-8不说，来说说text-muted.这个类则是控制这个div下的内容字体颜色的，当你把BS的css下载到本地后，你在css我文件中搜索text-muted，就会看到他的定义只有颜色，和他在一起的其他类名就分别定义了不同的颜色 </div>
  </div>
</div>

2. The structure has been mentioned above, let’s talk about some specific components in the page. Let’s talk about the navigation first. Originally, the navigation we made ourselves was composed of a basic inline ul (the following css can be implemented in BS) ,

<ul class="list-inline">
  <li>W3cplus</li>
  <li>Blog</li>
  <li>CSS3</li>
  <li>jQuery</li>
  <li>PHP</li>
</ul>

But in BS, there is the nav class to implement it, but the nav class needs to be combined with other classes to bring out the page effect, such as nav-pills and nav-tabs. If it is vertical navigation, it is in the class Add nav-stacked

to the name

<ul class="nav nav-pill">
  <li><a href="##">Home</a></li>
  <li><a href="##">CSS3</a></li>
   <li><a href="##">Sass</a></li>
   <li><a href="##">jQuery</a></li>
   <li><a href="##">Responsive</a></li>
</ul>

3. After talking about the navigation bar, let’s talk about the drop-down menu. The drop-down menu in BS must rely on a js file that comes with it, and its own js also relies on JQuery, so these two files are necessary of. It is worth explaining that the code for this drop-down menu is a bit complicated. The data-toggle="dropdown" in the button must be the same as the outer div class name.

<div class="dropdown">
 <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
  下拉菜单
  <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
 </ul>
</div>

4. It seems like it’s time to talk about forms. In the Bootstrap framework, a class name `form-control` is customized. In other words, if these elements use the class name "form-control", they will Achieve some design customization effects.

<form role="form">
 <div class="form-group">
  <label for="exampleInputEmail1">邮箱：</label>
  <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入您的邮箱地址">
 </div>
 <div class="form-group">
  <label for="exampleInputPassword1">密码</label>
  <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入您的邮箱密码">
 </div>
 <div class="checkbox">
  <label>
   <input type="checkbox"> 记住密码
  </label>
 </div>
 <button type="submit" class="btn btn-default">进入邮箱</button>
</form>

The above is the entire content of this article, I hope you all like it