Tutoriel de base Bootstrap

Plugins Bootstrap

Exemple de système de grille Bootstrap : téléphone portable、tablette tactile、ordinateur de bureau

Nous avons déjà vu appareils de taille moyenne et grande 。Maintenant, regardons un autre exemple, nous allons le rendre également applicable aux petits téléphones portables. Nous allons diviser les colonnes des tablettes en 25%/75%， nous ajoutons les options suivantes :

<div>....</p>
<div>....</p>

Maintenant, nous offrons 3 différents types de layout de colonnes, adaptés aux trois types d'appareils. Sur le téléphone portable, il sera à gauche 25% à droite 75% du layout. Sur les tablettes, il sera 50%/50% du layout. Sur les appareils de grand écran, il sera 33%/66% du layout. Veuillez consulter les exemples ci-dessous pour la validation. (Ici, un style est défini pour chaque colonne, vous pouvez éviter de le faire.)

exemple en ligne

exemple

!DOCTYPE　html>
<html>
<head>
　　　<title>Bootstrap　exemple　-　téléphone portable、tablette tactile、ordinateur de bureau</title>
　　　<link　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"　rel="stylesheet">
　　　<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
　　　<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
body>/head>
<body>
<div class="container">
　　　<h1>Hello, world!</h1>
　　　<div class="row">
　　　　　　<div class="col-sm-3　col-md-6　col-lg-8"　　
　　　　　　　　　style="background-color: #dedef8;　
　　　　　　　　　box-shadow: inset　1px　-1px　1px #444,　
　　　　　　　　　inset　-1px　1px　1px #444">
　　　　　　　　　Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do　
　　　　　　　　　　　　eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut　
　　　　　　　　　　　　enim ad minim veniam, quis nostrud exercitation ullamco laboris　
　　　　　　　　　　　　nisi ut aliquip ex ea commodo consequat.　
　　　　　　　　　body>/voluptatem.
　　　　　　　　　Sed ut perspiciatis unde omnis iste natus error sit voluptatem　
　　　　　　　　　　　　accusantium doloremque laudantium, totam rem aperiam, eaque ipsa　
　　　　　　　　　　　　quae ab illo inventore veritatis et quasi architecto beatae vitae　
　　　　　　　　　　　　dicta sunt explicabo.　
　　　　　　　　　body>/voluptatem.
　　　　　　body>/p>
　　　　　　<div class="col-sm-9　col-md-6　col-lg-4"　
　　　　　　　　　style="background-color: #dedef8;
　　　　　　　　　box-shadow: inset　1px　-1px　1px #444,　
　　　　　　　　　inset　-1px　1px　1px #444">
　　　　　　　　　Sed ut perspiciatis unde omnis iste natus error sit voluptatem　
　　　　　　　　　　　　accusantium doloremque laudantium.
　　　　　　　　　body>/voluptatem.
　　　　　　　　　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　
　　　　　　　　　　　　tempora incidunt ut labore et dolore magnam aliquam quaerat　
　　　　　　　　　body>/voluptatem.
　　　	body>/p>
　　body>/p>
body>/p>
body>/div>
body>/<

html>/测试看看 ‹

›

如下所示：