Qu'est-ce que BootStrap ? Introduction à la structure et à la composition de BootStrap-js tutoriel-php.cn

Qu'est-ce que BootStrap ? Introduction à la structure et à la composition de BootStrap

不言

Libérer： 2018-10-13 16:08:12

avant

3388 Les gens l'ont consulté

Le contenu de cet article porte sur ce qu'est BootStrap ? En quoi consiste BootStrap ? Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

1. Introduction

Bootstrap est un framework frontal basé sur HTML, CSS et JAVASCRIPT. Il prédéfinit un ensemble de styles CSS et le code jquery correspondant. mise en page réactive (compatible avec plusieurs terminaux), car il utilise media query (css3 Media Query) (Recommandations vidéo gratuites associées : tutoriel bootstrap)

Composition BootStrap

1.12 Système de grille : divisez l'écran en 12 colonnes, utilisez des lignes pour organiser les éléments, puis placez le contenu dans les colonnes

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

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

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

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

Copier après la connexion

2. Composants de mise en page de base : divers composants de mise en page de base fournis par bootstrap

(1) Introduction de

    <!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">

Copier après la connexion

(2) Tableau de style par défaut (tr est une ligne, td est une colonne dans une ligne, th est la colonne de titre, qui peut être équivalente à td)

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

Copier après la connexion

(3) Tableau avec bordure

 <table class="table-bordered">

Copier après la connexion

(4) Formulaire

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

Copier après la connexion

(5) Bouton

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

Copier après la connexion

3.jquery : tous les plug-ins JavaScript dans Bootstrap dépendent de Jquery (notez l'introduction de la bibliothèque jquery)

Composant 4.css : bootstrap pré-implémente de nombreux composants CSS pour nous

5.plug-in javascript : bootstrap le fait pour nous Fournit quelques plug-ins js

6. Responsive design : compatible avec plusieurs terminaux

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!