Home > Article > Web Front-end > What is BootStrap? Introduction to the structure and composition of BootStrap

What is BootStrap? Introduction to the structure and composition of BootStrap

不言forward: 2018-10-13 15:51:163315browse

This article brings you what is BootStrap? What does BootStrap consist of? It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. Introduction

Bootstrap is a front-end framework based on HTML, CSS, and JAVASCRIPT. It predefines a set of CSS styles and corresponding jquery code. The biggest feature is the use of responsive layout (compatible with multiple Terminal), because he uses media query (css3 Media Query) (Related free video recommendation: bootstrap tutorial)

2.BootStrap composition

1.12 Grid system: Divide the screen into 12 columns, use rows to organize elements, and then place content within the columns

/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

2. Basic layout components: Various basic layout components provided by bootstrap

(1) Introduction of

    <!DOCTYPE html>
    <html lang="zh-CN">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
        <!-- Bootstrap -->
        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">

(2) Default style Table (tr is a row, td is a column in a row, th is the title column, which can be equivalent to td)

 <table class="table">
   
 <th scope="row">1</th>

(3 ) Table with border

 <table class="table-bordered">

(4) Form

<form>
    <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>

(5) Button

  <button type="submit" class="btn btn-default">Submit</button>
  <button type="submit" class="btn btn-primary">Transfer cash</button>

3.jquery: All JavaScript plug-ins of Bootstrap depend on Jquery (note Introducing jquery library)

4.css component: bootstrap pre-implements many CSS components for us

5.javascript plug-in: bootstrap provides us with some js plug-ins

6 .Responsive design: compatible with multiple terminals

The above is the detailed content of What is BootStrap? Introduction to the structure and composition of BootStrap. For more information, please follow other related articles on the PHP Chinese website!

Statement：

This article is reproduced at:segmentfault.com. If there is any infringement, please contact admin@php.cn delete

Previous article：Recommended: Introduction to commonly used styles in bootstrap4Next article：Recommended: Introduction to commonly used styles in bootstrap4

See more

What is BootStrap? Introduction to the structure and composition of BootStrap

Related articles