Matériel recommandé (code source du didacticiel) pour la vidéo d'introduction du bootstrap de la Wheat Academy

Bootstrap est actuellement le framework front-end le plus populaire publié par Twitter. Bootstrap est basé sur HTML, CSS et JAVASCRIPT. Il est simple et flexible. Il encapsule complètement et parfaitement les mises en page CSS courantes, les composants couramment utilisés et les plug-ins JavaScript, permettant aux ingénieurs front-end et aux ingénieurs de développement back-end inexpérimentés de travailler rapidement. maîtriser et utiliser. Cela améliore considérablement l'efficacité du développement et standardise également dans une certaine mesure l'écriture de CSS et de JavaScript par l'équipe front-end. Bref, apprendre Bootstrap permet de développer facilement des projets WEB responsive. Le "Tutoriel vidéo d'introduction au bootstrap de la Wheat Academy" vous aidera à démarrer facilement avec le bootstrap.

Adresse de lecture du cours : http://www.php.cn/course/324.html

Le style d'enseignement du professeur :

Les cours du professeur sont vivants, pleins d'esprit, pleins d'esprit et touchants. Une métaphore vivante est comme la touche finale, ouvrant la porte à la sagesse aux étudiants ; un humour bien placé apporte un sourire entendu aux étudiants, comme boire un verre de vin moelleux, donnant aux gens un arrière-goût et une nostalgie des aphorismes d'un philosophe, des références culturelles. sont intercalés de temps en temps dans la narration, donnant aux gens réflexion et vigilance.

Le point le plus difficile de cette vidéo est le principe du système de grille Bootstrap :

Bootstrap dispose d'un système de grille fluide intégré réactif, axé d'abord sur les appareils mobiles. Si le périphérique d'écran ou la taille de la fenêtre augmente, le système le divisera automatiquement en 12 colonnes maximum.

J'appelle ici le système de grille dans Bootstrap une mise en page. Il crée une mise en page grâce à une série de combinaisons de lignes et de colonnes, puis votre contenu peut être placé dans la mise en page que vous avez créée. Ce qui suit est une brève introduction au principe de fonctionnement du système de grille Bootstrap :

Le principe de mise en œuvre du système de grille est très simple, il suffit de définir la taille du conteneur et de le diviser en 12 parties égales (il peut également être divisé en 24 ou 32 parties, mais 12 est la plus courante), puis ajustez les marges intérieures et extérieures, et enfin combinez-le avec des requêtes multimédias pour créer un puissant système de grille réactif. Le système de grille du framework Bootstrap divise le conteneur en 12 parties égales.

Lors de son utilisation, vous pouvez recompiler le code source LESS (ou Sass) en fonction de la situation réelle pour modifier la valeur de 12 (c'est-à-dire la changer en 24 ou 32. Bien sûr, vous pouvez également diviser en plus, mais il n'est pas recommandé de l'utiliser de cette façon) ).

Bootstrap dispose d'un ensemble intégré d'appareils réactifs et mobiles.

1. La ligne de données (.row) doit être contenue dans le conteneur (.Container) afin de lui donner un alignement et un remplissage appropriés. Par exemple :

<div class="<span style="color: rgb(178, 34, 34);">container</span>">
<span style="white-space: pre;">	
</span><div class="<span style="color: rgb(178, 34, 34);">row</span>"></div>
</div>

2. Des colonnes (.column) peuvent être ajoutées aux lignes (.row), mais la somme du nombre de colonnes ne peut pas dépasser le nombre total de colonnes également divisées, par exemple 12. . Par exemple :

<div class="container">
<div class="row">
  <div class="col-md-<span style="color: rgb(178, 34, 34);">4</span>"></div>
  <div class="col-md-<span style="color: rgb(178, 34, 34);">8</span>"></div>

3. Le contenu spécifique doit être placé dans le conteneur de colonne (colonne), et seule la colonne (colonne) peut être utilisée en tant qu'élément enfant direct d'un conteneur de lignes ( .row)

4. Créez l'espacement entre les colonnes en définissant le remplissage. Compensez ensuite l'effet du remplissage en définissant des marges négatives pour la première et la dernière colonne

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!