Bootstrap système de grille Exemple: équipement moyen et grand
Dans l' exemple: le niveau de la pile , nous avons vu le système de grille de base. Ici, nous utilisons deux div, et au milieu de la largeur de la fenêtre d'entre eux 50% / 50% divisée:
<Class Div = "col-md-6"> .... </ div> <Class Div = "col-md-6"> .... </ div>
Cependant, sur les grands équipements, vous sont conçus pour durer 33% / 66%. Donc, nous avons à faire est de se préparer à modifier la largeur de colonne du point d'arrêt:
<Class Div = "col-md-6 col-lg-4"> .... </ div> <Class Div = "col-md-6 col-lg-8"> .... </ div>
Maintenant Bootstrap dans les équipements de taille moyenne, recherche les classes avecmd, et les utiliser.Dans les équipements à grande échelle, semble classe aveclg, et de les utiliser.Dans cet exemple, nos deux div de 50% / 50% divisée en 33% / 66%. Voir l'exemple ci-dessous pour la vérification. (Ici, sont définis pour chaque colonne de styles, vous pouvez éviter de le faire.)
<! DOCTYPE html>
<Html>
<Head>
<Titre> Bootstrap instance - mini-ordinateurs et du matériel de mainframes </ title>
<Link href = "/ bootstrap / css / bootstrap.min.css" rel = "stylesheet">
<Script src = "/ scripts / jquery.min.js"> </ script>
<Script src = "/ bootstrap / js / bootstrap.min.js"> </ script>
</ Head>
<Body>
<Class Div = "container">
<H1> Bonjour, monde! </ H1>
<Class Div = "ligne">
<Class Div = "col-md-6-4 col-lg" style = "background-color: # dedef8;
box-shadow: encart 1px -1px 1px # 444, encart -1px 1px 1px # 444; ">
<P> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod TEMPOR ut labore et dolore incididunt magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</ P>
<P> Sed ut perspiciatis unde omnis iste natus erreur sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, Eaque ipsa
quae ab illo inventore veritatis et architecto quasi beatae vitae
dicta sunt explicabo.
</ P>
</ Div>
<Class Div = "col-md-6-8 col-lg" style = "background-color: # dedef8;
box-shadow: encart 1px -1px 1px # 444, encart -1px 1px 1px # 444; ">
<P> Sed ut perspiciatis unde omnis iste natus erreur sit voluptatem
accusantium doloremque laudantium.
</ P>
<P> Neque porro quisquam est, Qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci velit, sed quia non numquam eius modi
tempora incidunt ut labore et dolore magnam aliquam quaerat
voluptatem.
</ P>
</ Div>
</ Div>
</ Body>
</ Html>
Les résultats sont les suivants:
