Bootstrap Tutorial Compilation - Getting Started + CSS Basics

When I learned Bootstrap by myself, I followed the official website documentation. The official website is actually very clear and complete, but for front-end beginners, there are still many scattered knowledge points that can be ignored for the time being.

[Related video recommendation: Bootstrap tutorial]

So here is a short summary of the knowledge points. , I hope it can help you in the "getting started" aspect.

bootstrap Notes-Starting CSS Basics

1. Getting Started

1. Quote

Download through the official website, or provide it through bootCDN CDN service, or quote the document through the CDN service provided by cdnjs

bootstrap.min.css 
bootstrap.min.js

You need to quote jquery

jquery.min.js

CDN service

https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css
https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js

before referencing bootstrap.min.js When we document, it is recommended to write it at the bottom of the body tag content

…
<bdoy>
…
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
</body>
…

2. Mobile first

In order to ensure proper drawing and touch screen scaling, you need to add it in viewport metadata tag.

   <meta name="viewport" content="width=device-width, initial-scale=1">

On mobile device browsers, the zooming function can be disabled by setting the meta attribute of the viewport to user-scalable=no.

   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

If you want to understand the specific content of the above code, you want to fully understand the problem of moving pixels. It is recommended to go to MOOC.com to take a look at the WEB mobile course

2. CSS layout

1. Layout container

Content container, the width has been adjusted Fixed (with spacing on the left and right)

<div class="container"></div>

Content container, width is 100%

<div class="container-fluid"></div>

2. Grid system

The grid system divides the screen width into 12 evenly For example,

 class="col-md-12"

is divided into four categories for different screen sizes, namely:

.col-lg-大屏幕             >1200px
.col-md-中等屏幕       992px~1200px
.col-sm-小屏幕         750px~992px
.col-xs-超小屏幕             <750px

html:

   <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-6 col-sm-12">好好学习天天向上</div>
            <div class="col-lg-3 col-md-6 col-sm-12">好好学习天天向上</div>
            <div class="col-lg-3 col-md-6 col-sm-12">好好学习天天向上</div>
            <div class="col-lg-3 col-md-6 col-sm-12">好好学习天天向上</div>
            
        </div>
    </div>

css:

<style>
div[class^="col"]{
outline-offset: 1px;
outline:1px solid red;
}
</style>

3.Typesetting-Title

<mark></mark>    标记标签
<small></small>   小文本标签/副标题标签

4.Typesetting-Code

   <kbd></kbd>  标记通过键盘输入的内容
    <code></code>  标记代码内容

5.Table

Add a class name on the basis of the traditional table>tr>td to use the table effects provided by bootstrap

Basic table:

 <table class="table"></table>

In< ;b>.table, add the following class names to add corresponding effects

.table-bordered   带边框的
.table-striped    带条纹的
.table-hover 鼠标悬停
.table-condensed 紧缩表格  单元格内的padding值减半

State classes Through these state classes, you can set colors for rows or cells

.active The color set when the mouse is hovering over a row or cell.Success Identifies success or positive action.info Identifies ordinary prompt information or action.warning Identifies warning or requires user attention.danger Identifies danger or potential Actions that bring negative impacts

6. Situational colors (text, buttons, backgrounds, etc.)

Colors will be used in many places in subsequent studies

     -default;  默认
      -primary;  首选项
      -success;  成功（一般用于表达积极向上）
      -info;     信息
      -warning;  警告
      -danger;   危险

7. Button

Usually we use input or button tags to write form buttons, and we also use a tags to imitate buttons.

       <a class="btn btn-danger" href="">百度一下</a>
        <input class="btn btn-danger" type="button" value="按钮2">
        <button class="btn btn-danger">按钮3</button>

The button has the following skins, or themes, or simply colors:

 btn-default;  默认
  btn-primary;  首选项
  btn-success;  成功（一般用于表达积极向上）
  btn-info;  b   信息
  btn-warning;  警告
  btn-danger;   危险
  btn-link;     连接（a标签的方式）

8. Triangle symbol

You can use the triangle symbol to Indicates that an element has the functionality of a drop-down menu. Note that the triangle symbol in the upward pop-up menu is reversed.

<span class="caret"></span>

9. Close button

By using an icon that symbolizes closure, modal boxes and warning boxes can be made to disappear.

  <button type="button" class="close" >
       <span>×</span>
    </button>

The above is the detailed content of Bootstrap Tutorial Compilation - Getting Started + CSS Basics. For more information, please follow other related articles on the PHP Chinese website!