Compilation de didacticiels Bootstrap - Mise en route + bases CSS

Quand j'ai appris Bootstrap moi-même, j'ai suivi la documentation officielle du site. Le site officiel est en fait très clair et complet, mais pour les débutants du front-end, il existe encore de nombreux points de connaissances épars qui peuvent être ignorés pour le moment.

[Recommandations vidéo associées : Tutoriel Bootstrap]

Voici donc un petit résumé des points de connaissances, j'espère que cela pourra vous aider. dans l'aspect "démarrage".

Notes bootstrap - Mise en route + Bases CSS

1. Mise en route

Citation

Télécharger via le site officiel. , ou via le service CDN fourni par bootCDN, ou reportez-vous au document via le service CDN fourni par cdnjs

bootstrap.min.css 
bootstrap.min.js

Avant de référencer bootstrap.min.js, vous devez citer jquery

jquery.min.js

Service CDN

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

Lors de la citation de nos documents, il est recommandé de l'écrire au bas du contenu de la balise body

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

Mobile d'abord

2. Afin de garantir une mise à l'échelle correcte du dessin et de l'écran tactile, vous devez ajouter la balise de métadonnées de la fenêtre d'affichage dans .

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

Sur les navigateurs mobiles, le zoom peut être désactivé en définissant l'attribut méta de la fenêtre d'affichage sur user-scalable=no.

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

Si vous souhaitez comprendre le contenu spécifique du code ci-dessus, vous souhaitez bien comprendre le problème du déplacement des pixels. Il est recommandé d'aller sur MOOC.com pour jeter un oeil aux cours WEB mobile

2. Mise en page CSS

1. Conteneur de mise en page

Conteneur de contenu, la largeur a été ajustée Fixe (avec espacement à gauche et à droite)

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

conteneur de contenu, la largeur est de 100%

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

2. Système de grille

Système de grille, la largeur de l'écran Il est divisé en 12 parties en moyenne. Combien de parties sont occupées par le div, il suffit d'écrire le numéro dans la classe

Par exemple,

 class="col-md-12"

est divisé en quatre grandes catégories pour différentes tailles d'écran, à savoir :

.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. Composition - titre

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

4. Composition - code

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

5 Table

Ajoutez un nom de classe basé sur le table>tr> traditionnel. ;td pour utiliser les effets de table fournis par bootstrap

Table de base :

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

Sur la base de .table, ajoutez ce qui suit noms de classes pour augmenter l'effet correspondant

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

Classes de statut Grâce à ces classes de statut, vous pouvez définir la couleur des lignes ou des cellules

.active La couleur définie lorsque la souris survole le row ou cell.success Identifie le succès ou l'action positive.info Identifie un message d'invite ou un avertissement d'action normal Identifie un avertissement ou nécessite l'attention de l'utilisateur Identifie un danger ou une action avec un impact négatif potentiel

6. texte, bouton, arrière-plan, etc.)

Les couleurs seront utilisées à de nombreux endroits dans les études futures

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

7 Boutons

Habituellement, nous utilisons des balises de saisie ou de bouton. pour écrire des boutons de formulaire, et nous utilisons également des balises pour imiter le bouton Écrire. Le bouton

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

a les skins, ou thèmes, ou simplement les couleurs suivants :

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

8. Symbole triangulaire

Réussi Utilisez le symbole triangulaire pour indiquer que. un élément fonctionne comme un menu déroulant. Notez que le symbole triangulaire dans le menu contextuel vers le haut est inversé.

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

9. Bouton Fermer

En utilisant une icône qui symbolise la fermeture, les cases modales et les cases d'avertissement peuvent disparaître.

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

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!