Bootstrap Basic learning

Bootstrap is a front-end framework based on grid structure (of course also have JS, JQuery), it has the advantage of content framework to quickly set up, based on media queries can make up the page quickly adapt to different client, whether mobile phone, tablet, or PC, basically can be adaptive, of course, the new version already does not support IE6, support for IE8 is limited, after all IE8 support for HTML5 is not very good, (to tell the truth, I don't like IE6 ~ 8, for me the primary players, Compatibility sometimes really hard, not only on the project to use, even the interview also want to use, there is no mistake, encountered, the Internet to check 1 not on the line. Make a complaint, this meeting or must meet!!

Without further ado, start summarizing your time!

1. In terms of structure content,BS basically has classes to control structure content, such as structure control

<div class="container">
  <div class="row">
   <div class="col-md-4 col-xs-6">
      this 1 block div Is the name of a class by col-md-4,col-xs-6 These two class names control the width of his frame; Among them col The representation is a grid ,md Represents the width of the client display pc Middle screen, same thing xs On behalf of the client display is a super small screen, that is, the phone screen; 4 . 6 Represents the length of the grid, meaning the width under the mid-screen display is 0 4 A grid, with a width of 6 A grid   . 1 Handle it under normal circumstances 1 The whole piece of div That's the best I can do 12 A grid, so his brother div Below the middle screen 8 A grid!  
   </div>
   <div class="col-md-8  text-muted"> this 1 block div In the class name of col-md-8 Don't say, say text-muted. This class controls this div The content below the font color when you put it BS the css Download to local after you are in css I search in file text-muted , you'll see that his definition is only color, and he's in 1 The other class names define different colors  </div>
  </div>
</div>

Let's talk about the specific components in the page. Let's talk about the navigation. Originally, we made the navigation by ourselves by a basic inline ul (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>

In BS, however, there is the class nav, but the class nav needs to be used with other classes to make the page work, such as ES28en-ES29en and ES30en-ES31en, or for vertical navigation, nav-ES33en

<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. Speaking of the navigation bar and the drop-down menu, the drop-down menu in BS relies on one of its own js files, while the js itself relies on JQuery, so these two files are necessary. It's worth noting that the code for this drop-down menu is a bit complicated, as data-ES43en ="dropdown" 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">
   The drop-down menu 
  <span class="caret"></span>
 </button>
 <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#"> Drop down menu items </a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#"> Drop down menu items </a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#"> Drop down menu items </a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#"> Drop down menu items </a></li>
 </ul>
</div>

4. It seems that it is time to talk about the form. In the Bootstrap framework, one class name 'form-ES51en' is customized.

<form role="form">
 <div class="form-group">
  <label for="exampleInputEmail1"> Email address: </label>
  <input type="email" class="form-control" id="exampleInputEmail1" placeholder=" Please enter your email address ">
 </div>
 <div class="form-group">
  <label for="exampleInputPassword1"> password </label>
  <input type="password" class="form-control" id="exampleInputPassword1" placeholder=" Please enter your email password ">
 </div>
 <div class="checkbox">
  <label>
   <input type="checkbox">  Remember the password 
  </label>
 </div>
 <button type="submit" class="btn btn-default"> Enter the email address </button>
</form>

This is the end of this article, I hope you enjoy it