cool hit counter Bootstrap Learning Documentation (I)_Intefrankly

Bootstrap Learning Documentation (I)


Boostrap in Chinese

1. What is Bootstrap?

Bootstrap is the most popular HTML, CSS and JS framework for developing responsive layouts, mobile-first WEB projects, using this framework can be simple and efficient development of web applications adapted to a variety of screens, that is, write a set of code for multiple platforms (PC, tablet, mobile, etc.). Bootstrap has more freedom than other frameworks, providing basic styles and basic components without constraining the developer's mind in terms of creation.

In simple object oriented terms, Bootstrap encapsulates for us while some common classes (names of classes) and interfaces (plugins for js), these classes are the custom css styles of this template, such as text centering, the css code is text-align: center; The Bootstrap wrapped class is called text-centerThis allows us to directly use text-center to center the content inside a p tag or div tag, thus enabling what we call code reuse in software engineering. The js plugin in Bootstrap does not require us to write js code to help us achieve the effect we want to achieve with js, but by using Bootstrap's custom properties.

To learn, go directly to the Bootstrap documentation here Bootstrap Chinese Website

2. Basic templates commonly used in Bootstrap

Compared to the basic template on the official website, some common settings have been added.

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <!-- enableIE Browser with the latestedge Engine rendering page -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--  Make the maximum width of the page equal to the width of the device, The page is initialized to a non-scaling state, Of course this can still be scaled -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--  above-mentioned3 sizemeta label* necessary* Put it in the forefront., Any other content is* necessary* follow closely behind! -->
    <!-- enable360 Browser renders pages with Extreme mode by default, Considering the domestic360 of a large number of users -->
    <meta name="renderer" content="webkit">
    <title>Bootstrap Commonly used templates</title>

    <!--  project-importedBootstrap ofcss compressed file -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!--  A browser defaultcss Style reset file, No more manual resets. -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">

    <!--  The following two files are the ones that makeIE9 followingIE Browser compatibility with the newHTML5 Labels andCSS3 design -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1> To my girlfriend.Bootstrap Learning Documents</h1>

    <!--  because ofBootstrap encapsulated inJavaScript Plugins provide support, And to be inBootstrap.js Previously introduced -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!--  project-importedBootstrap ofjs compressed file -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

3. raster system

  • Bootstrap's layout container
    • 1.container-fluid adaptive-width 100%
      1. The container adapts to the fixed width of the screen and takes up less width than the container
      • screen width >= 1200px Fixed width of1270px
      • 992px <= screen width <= 1200px Fixed width of970px
      • 768px <= widths <= 992px Fixed width of750px
      • widths< 768px fixed widthauto( adaptive)

Note: These two classes cannot be placed together, they can be siblings, but not nested. If you don't want the width to vary with the screen, you can give it an :important to raise the priority, in which case it's a fixed value at all sizes

The sample code is as follows.

<div class="container-fluid">
  <div style="background: red;"> Adaptive Width100%</div>
</div>
        
<div class="container" style="background: green; width: 1000px!important;"> Adapts to the fixed width of the screen</div>

 Here is the wrong way to write it
<div class="container-fluid">
  <div class="container" style="background: red;"> incorrectly written</div>
</div>
  • Bootstrap's Grid System

In Bootstrap a line is divided into 12 columns, that is, the width of the screen is divided into 12 parts, one is a twelfth of the width of the screen, the source code is implemented by the width of the percentage and floating. 1. row delegation 2. col-- representatives columns, (prefix indicating ordinal number, e.g. first, number two etc) an * Related to screen size, (prefix indicating ordinal number, e.g. first, number two etc) two * be columns criticize (i.e. enumerate shortcomings) in case columns of and exceeded the12, Then it'll be a line feed., If there is a columns, This value exceeds the12, Then it will be pressed12 go to show lg widths>1200px Expressions. The width of the screen is greater than1200, One line showsn( There are several in the structurediv) columns The width of the screen is less than1200, One line shows1 columns

 md 992px <=  widths <= 1200px
   Expressions.
     The width of the screen is greater than992 and is less than1200, One line showsn( There are several in the structurediv) columns
 The width of the screen is less than992, One line shows1 columns

 sm 768px <=  widths <= 992px
   Expressions.
     The width of the screen is greater than768 and is less than992, One line showsn( There are several in the structurediv) columns
 The width of the screen is less than768, One line shows1 columns

  xs  widths <= 768px
   Expressions.
     The width of the screen is less than768, One line always showsn( There are several in the structurediv) columns

Mnemonic mnemonics: LG (phone brand) (lg), shit (md), what (sm), want to die (xs). (Not original to myself, reference to an online joke. )

The sample code is as follows. Reduce the browser width to change the width of the div and observe the change in the number of columns.

<style>
  .row div{
    background: green;
    color: #fff;
    height: 100px;
    border: 1px solid #000;
  }
</style>

<div class="container">
  <div class="row">
      <div class="col-lg-13"> surpass12 columns la-la-la</div>
  </div>
  <div class="row">
    <div class="col-lg-1"> (prefix indicating ordinal number, e.g. first, number two etc)1 ranking1 columns</div>
    <div class="col-lg-11"> (prefix indicating ordinal number, e.g. first, number two etc)1 ranking2 columns</div>
  </div>
  <div class="row">
    <div class="col-md-4"> (prefix indicating ordinal number, e.g. first, number two etc)2 ranking1 columns</div>
    <div class="col-md-4"> (prefix indicating ordinal number, e.g. first, number two etc)2 ranking2 columns</div>
    <div class="col-md-4"> (prefix indicating ordinal number, e.g. first, number two etc)2 ranking3 columns</div>
  </div>
  <div class="row">
    <div class="col-sm-4"> (prefix indicating ordinal number, e.g. first, number two etc)3 ranking1 columns</div>
    <div class="col-sm-4"> (prefix indicating ordinal number, e.g. first, number two etc)3 ranking2 columns</div>
    <div class="col-sm-4"> (prefix indicating ordinal number, e.g. first, number two etc)3 ranking3 columns</div>
  </div>
  <div class="row">
    <div class="col-xs-4"> (prefix indicating ordinal number, e.g. first, number two etc)4 ranking1 columns</div>
    <div class="col-xs-4"> (prefix indicating ordinal number, e.g. first, number two etc)4 ranking2 columns</div>
    <div class="col-xs-4"> (prefix indicating ordinal number, e.g. first, number two etc)4 ranking3 columns</div>
  </div>
</div>

3. Combined use The sample code is as follows. Reduce the width of the browser to change the size of the div, look closely, four columns, become three columns, then two columns, and finally become a column effect

<style>
  .row div{
    background: green;
    color: #fff;
    height: 100px;
    border: 1px solid #000;
  }
</style>

<div class="container">
  <div class="row">
    <div class="col-lg-3 col-md-4 col-sm-6"> (prefix indicating ordinal number, e.g. first, number two etc)1 ranking1 columns</div>
    <div class="col-lg-3 col-md-4 col-sm-6"> (prefix indicating ordinal number, e.g. first, number two etc)1 ranking2 columns</div>
    <div class="col-lg-3 col-md-4 col-sm-6"> (prefix indicating ordinal number, e.g. first, number two etc)1 ranking3 columns</div>
    <div class="col-lg-3 col-md-4 col-sm-6"> (prefix indicating ordinal number, e.g. first, number two etc)1 ranking4 columns</div>
  </div>
  <div class="row">
    <div class="col-lg-3"> (prefix indicating ordinal number, e.g. first, number two etc)1 ranking1 columns</div>
  </div>
</div>

4. column offset col--offset- Offset to the right, the first * is related to the screen size, the second * is the number of columns to offset, and will not work if the number of offsets is greater than 12.

The sample code is as follows.

<style>
  .row div{
    background: green;
    color: #fff;
    height: 100px;
    border: 1px solid #000;
  }
</style>

<div class="container">
  <div class="row">
    <div class="col-lg-4"> (prefix indicating ordinal number, e.g. first, number two etc)1 ranking1 columns</div>
    <div class="col-lg-4"> (prefix indicating ordinal number, e.g. first, number two etc)1 ranking2 columns</div>
    <div class="col-lg-4"> (prefix indicating ordinal number, e.g. first, number two etc)1 ranking3 columns</div>
  </div>
  <div class="row">
     <!-- You can let go of the notes and try to play., Look at the results.-->
    <!--<div class="col-lg-4 col-lg-offset-4"> (prefix indicating ordinal number, e.g. first, number two etc)2 ranking1 columns</div>-->
    <!--<div class="col-lg-4 col-lg-offset-5"> (prefix indicating ordinal number, e.g. first, number two etc)2 ranking1 columns</div>-->
    <!--<div class="col-lg-4 col-lg-offset-12"> (prefix indicating ordinal number, e.g. first, number two etc)2 ranking1 columns</div>-->
    <div class="col-lg-4 col-lg-offset-13"> (prefix indicating ordinal number, e.g. first, number two etc)2 ranking1 columns</div>
  </div>
</div>

5. columns sorted col--push(pull)- (prefix indicating ordinal number, e.g. first, number two etc) an * It's related to the screen size, (prefix indicating ordinal number, e.g. first, number two etc) two * It's to the right or to the left. columns criticize (i.e. enumerate shortcomings), No more than12, Otherwise, it doesn't work.,push It's pushing to the right.,pull It's pulling to the left.。

The sample code is as follows.

<style>
  .row div{
    background: green;
    color: #fff;
    height: 100px;
    border: 1px solid #000;
  }
</style>

<div class="container" style="border: 1px solid #f00;">
  <div class="row">
    <div class="col-lg-2 col-lg-push-5"> (prefix indicating ordinal number, e.g. first, number two etc)1 ranking1 columns</div>
    <div class="col-lg-2 col-lg-push-13"> (prefix indicating ordinal number, e.g. first, number two etc)1 ranking2 columns</div>
  </div>
  
  <div class="row">
    <div class="col-lg-2 col-lg-pull-1"> (prefix indicating ordinal number, e.g. first, number two etc)2 ranking1 columns</div>
    <div class="col-lg-2 col-lg-pull-13"> (prefix indicating ordinal number, e.g. first, number two etc)2 ranking2 columns</div>
  </div>
  
  <!-- Switching position effect-->
  <div class="row">
    <div class="col-lg-2 col-lg-push-10"> (prefix indicating ordinal number, e.g. first, number two etc)3 ranking1 columns</div>
    <div class="col-lg-10 col-lg-pull-2"> (prefix indicating ordinal number, e.g. first, number two etc)3 ranking2 columns</div>
  </div>
</div>

6. The difference between column offset and column sorting

    1. column offset You can only go to the right., but (not) columns sorted(pull、push) You can both go to the right., Or you can go to the left.
    1. If there are multiple columns,offset Offset if large, It's a line break and then an offset., but (not)push It won't be a problem., Can overflow the parent's container。

The sample code is as follows.

<style>
  .row div{
    background: green;
    color: #fff;
    height: 100px;
    border: 1px solid #000;
  }
</style>

<div class="container" style="border: 1px solid #f00;">
  <!-- (prefix indicating ordinal number, e.g. first, number two etc) A difference.-->
  <div class="row">
    <div class="col-lg-2 col-lg-offset-10"> (prefix indicating ordinal number, e.g. first, number two etc)1 ranking1 columns</div>
  </div>
  <div class="row">
    <div class="col-lg-2 col-lg-push-10"> (prefix indicating ordinal number, e.g. first, number two etc)2 ranking1 columns</div>
  </div>
  <div class="row">
    <div class="col-lg-2 col-lg-pull-2"> (prefix indicating ordinal number, e.g. first, number two etc)3 ranking1 columns</div>
  </div>
  
  <!-- (prefix indicating ordinal number, e.g. first, number two etc) Two differences-->
  <!--  How many lines in a row columns Total number of copies over12 then a line break will occur-->
  <div class="row">
    <div class="col-lg-4"> (prefix indicating ordinal number, e.g. first, number two etc)4 ranking1 columns</div>
    <div class="col-lg-4 col-lg-offset-4"> (prefix indicating ordinal number, e.g. first, number two etc)4 ranking2 columns</div>
  </div>
  
  <div class="row">
    <div class="col-lg-4"> (prefix indicating ordinal number, e.g. first, number two etc)5 ranking1 columns</div>
    <div class="col-lg-4 col-lg-push-5"> (prefix indicating ordinal number, e.g. first, number two etc)5 ranking2 columns</div>
  </div>
</div>

7. nesting each of columns It's all available in the nesting One line andn( No more than12) columns, that nesting The elements inside will then be based on the parent's width, one more part12 size columns。

The sample code is as follows.

<style>
  .row div{
    background: green;
    color: #fff;
    height: 100px;
    border: 1px solid #000;
  }
</style>

<div class="container" style="border: 1px solid #f00;">
  <div class="row">
    <div class="col-lg-6">
       (prefix indicating ordinal number, e.g. first, number two etc)1 ranking1 columns
      <div class="row">
        <div class="col-lg-4"></div>
        <div class="col-lg-4"></div>
        <div class="col-lg-4"></div>
      </div>
    </div>
    <div class="col-lg-6"> (prefix indicating ordinal number, e.g. first, number two etc)1 ranking2 columns</div>
  </div>
</div>

End of this post, written at the end

Grid system for web layout, This is the web design of (prefix indicating ordinal number, e.g. first, number two etc) first step, additionallyBootstrap of Chinese online( Translated version of the official website) The way it's laid out inside is also worth learning, You can take a closer look.。

Bootstrap Series.

Bootstrap Learning Documentation (I)

Bootstrap learning documentation (II)

Bootstrap Learning Documentation (III)

Bootstrap Learning Documentation (IV)


Recommended>>
1、Introduction to the Information Security and Management Program
2、Are you ready for the 2018 Global Artificial Intelligence Conference
3、Switzerlands Crypto Valley Announces Successful Completion of First Test of Blockchain Voting System
4、The heat does not stop with Xin to give back to GCL integrated tail sales bidding platform Tuesday see
5、AutoCAD 2017 Software Series

    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号