profil Bootstrap
cible
Bootstrap est le cadre le plus populaire front-end, a publié son troisième version (v3.0.0). Ce tutoriel va vous prendre pour commencer à apprendre Bootstrap 3.
Vous verrez également comment utiliser différentes fonctions de cadre cadre personnalisées, telles que l'utilisation d'une grille pour créer la mise en page, la navigation est créée par nav, en utilisant carousal créer boîte déroulante, ajouter des plug-ins sociaux et Google Map et d'autres plug-ins tiers.
Qu'est-ce que Bootstrap
Bootstrap est un cadre frontal pour le développement rapide d'applications Web et des sites Web.
Dans le développement de Web moderne, il y a plusieurs éléments à presque tous les projets Web sont nécessaires.
Bootstrap vous fournit tous ces modules de base - Grille, Typographie, tableaux, formulaires, boutons et réactivité.
En outre, il y a beaucoup d'autres composants frontaux utiles, tels que Dropdowns, Navigation, modaux, Typehead, Pagination, Carrousel, ariane, onglet, Miniatures, têtes et ainsi de suite.
Avec eux, vous pouvez construire un projet Web, et laisser courir plus rapidement et facilement.
En outre, étant donné que l'ensemble du cadre repose sur des modules, vous pouvez placer votre propre CSS, ou même une grande correction après le début du projet pour personnaliser.
Il est basé sur plusieurs meilleures pratiques, nous pensons que c'est un bon endroit pour commencer à apprendre moderne opportunité de développement Web, une fois que vous avez maîtrisé les bases du HTML et JavaScript / jQuery, vous pouvez appliquer ces connaissances dans le développement Web.
Bien que certains critiques, tous les projets construits par Bootstrap ressemblent, vous ne devez pas savoir trop sur HTML + CSS connaissances peuvent construire un site web. Cependant, nous devons comprendre, Bootstrap est un cadre commun, tout comme les autres choses communes que vous devez personnaliser pour le rendre unique. Lorsque vous souhaitez personnaliser, vous avez besoin d'une étude approfondie, il n'y a pas de bonne HTML + base de CSS est pas possible.
Bootstrap sauf, bien sûr, il y a beaucoup d'autres bonnes châssis avant, en utilisant le cadre de ce qui est le développement de la sélection du personnel, mais Bootstrap est certainement la peine d'essayer.
Pourquoi le projet devrait utiliser Bootstrap?
Télécharger la structure des fichiers et comprendre
Vous pouvez choisir parmi https://github.com/twbs/bootstrap/archive/v3.0.0.zip ou https://github.com/twbs/bootstrap/releases/download/v3.0.0/bootstrap-3.0.0-dist .zip télécharger Bootstrap Version 3.0.0 sur. Nous utilisons la première, vous pouvez utiliser la seconde.
En outre, nous fournissons le code téléchargeable contient un lien pour télécharger le premier à travers le dossier du code bootstrap. Ce côté contient également l'original utilisé pour personnaliser css Bootstrap de custom.css.
Après le déballage, vous trouverez, dans le dossier racine bootstrap-3.0.0 Certains fichiers et dossiers.
Le fichier principal de CSS - bootstrap.css et sa version simplifiée de bootstrap-min.css, situé dans bootstrap-3.0.0 le fichier dans le dossier racine 'dist' dossier 'css dans le dossier.
Dans le «dist» à l'intérieur, il y a un dossier 'js de contient les principales bootstrap.js de fichiers JavaScript et sa version simplifiée.
Fichier à la racine, il y a le dossier séparé 'js' contient les différents fichiers différents plug-ins JavaScript.
Dans le fichier racine dans les «actifs», vous trouverez un autre dossier 'js de. Ceci est un endroit avec HTML5 shim de html5shiv.js, pour l'obtention d'un soutien IE8. Il y a aussi un fichier respond.min.js pour soutenir les requêtes multimédias IE8. Ce dossier contient également les js plugins jquery.js Bootstrap dépendants.
Dans le même dossier, il y a un dossier «ico» contient une variété d'appareils mobiles icônes et favicon icône.
Dans 'css' le même chemin dossier contient le fichier css du document.
le dossier '_includes' et '_layouts de contient une structure de mise en page par défaut du document, qui peut être utile pour la conception de prototypage rapide.
Le dossier racine dossier «moins» contient certains fichiers .Moins. Si vous voulez être développé sur la base MOINS, ces fichiers peuvent être utiles.
Dans le dossier racine, il y a des fichiers. Certains sont utilisés pour les fichiers de prototypage HTML de base, dont certains sont basés sur Bower pour bower.json compilé, browserstack.json. En outre, il composer.json et un _config.yml de fichier YAML.
En plus de télécharger à partir du lien donné, vous pouvez également utiliser la commande suivante pour compiler toutes les CSS, fichiers JS -
$ bower install bootstrap
Vous pouvez copier le rapport Bootstrap Git
git clone git://github.com/twbs/bootstrap.git
Pour ce tutoriel, nous avons seulement téléchargé le fichier Zip, il n'utilise pas.
Une fois que vous apprenez ce tutoriel, nous vous encourageons à bower cadre de montage pour voir comment cela fonctionne.
NetDNA compilation de support et version simplifiée de Bootstrap CSS, Js et d'autres sujets css. Vous pouvez les citer la déclaration suivante
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
Développé en utilisant v3.0.0 Bootstrap
Basic HTML
Les éléments suivants sont la structure HTML de base pour notre projet
<! DOCTYPE html>
<Html>
<Head>
<Titre> Bootstrap V3 template </ title>
<Meta name = "viewport" content = "width = dispositif de largeur, initiale échelle = 1.0">
<! - Bootstrap ->
<Link href = "/ bootstrap.min.css bootstrap-3.0.0 / dist / css" "écran" rel = media "stylesheet" =>
<! - HTML5 shim et le soutien Respond.js IE8 des éléments HTML5 et les requêtes des médias ->
<! - [Si lt IE 9]>
<Script src = "bootstrap-3.0.0 / assets / js / html5shiv.js"> </ script>
<script src = "bootstrap-3.0.0 / actifs / js / respond.min.js"> </ script>
<! [Endif] ->
</ Head>
<Body>
<H1> Bonjour, monde! </ H1>
<- JQuery (nécessaire pour les plugins JavaScript de bootstrap) ->
<Script src = "// code.jquery.com/jquery.js"> </ script>
<! - Inclure tous les plugins compilés (ci-dessous), ou inclure des fichiers individuels selon les besoins ->
<Script src = "bootstrap-3.0.0 / dist / js / bootstrap.min.js"> </ script>
</ Body>
</ Html>
S'il vous plaît noter que les modèles et html5shiv.js ajoutés respond.min.js pour obtenir le soutien IE8. Dans Bootstrap la version 3 a été ajouté à ces fichiers.
Nous twitter bootstrap-fichier dans le dossier racine du dossier du serveur Web, il a été placé bootstrap-3.0.0 dossier. Tous les fichiers HTML que nous créons seront placés dans le twitter-bootstrap. La raison d'illustrer ce point, afin de rationaliser notre processus de développement.
Personnaliser
Nous allons personnaliser différents styles de boîte CSS. Par conséquent, sur la base de la CSS d'origine ne détruit pas les fichiers sur (situé bootstrap-3.0.0 du dossier dist) dans le même dossier, nous allons créer un fichier CSS séparé nommé custom.css. Ensuite, nous avons dans le fichier HTML, immédiatement après le fichier original de CSS, référencer le fichier CSS. De cette façon, nous pouvons remplacer le style par défaut que nous voulons changer, cependant, si la Bootstrap mise à niveau, le fichier original de CSS ne détruira pas notre coutume sur la base de mise à jour. Nous recommandons également que vous suivez cette approche dans le processus de développement.
Créer navigation
Pour créer une navigation, dans le fichier HTML, suivi par le corps après la balise de début, ajoutez le code suivant.
<Nav class = "navbar navbar-fixe-top navbar-inverse" role = "navigation">
<Ul class = "nav navbar-nav">
<Li> <a href="new.html" class="navbar-brand">
<Img src = "logo.png"> </a> </ li>
<Li class = "active"> <a href="#"> Accueil </a> </ li>
<Li> <a href="price.html"> Prix </a> </ li>
<Li> <a href="contact.html"> contacter </a> </ li>
<Class Li = "déroulant">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> sociale <b class = "caret"> </ b> </a>
<Class Ul = "liste déroulante-menu">
<li class = "socials"> <g: plusone annotation = "inline" width = "150"> </ g: plusone> </ li>
<Li class = "socials"> <class = "fb-like" data-href = "https://developers.facebook.com/docs/plugins/~~number=plural" data-width = données div "La largeur de pixel du plugin" -height = "la hauteur de pixel du plugin" data-colorscheme = données-layout "light" = data-action "standard" = "comme" data-show-faces = "true" data-send = "false"> < / div> </ li>
<Li class = "socials"> <a href="https://twitter.com/share" class="twitter-share-button"> Tweet </a>
! <Script> function (d, s, id) {var js, fjs = d.getElementsByTagName (s) [0]; si {js = d.createElement (s) (d.getElementById (id)!); Js. id = id; js.src = "platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs //);}} (document," Script "," twitter-WJS "); < / script> </ li>
</ Ul>
</ Li>
</ Ul>
</ Nav>
Pour la navigation, l'utilisation Bootstrap classe «navbar» dans la hiérarchie de conteneurs. Par conséquent, il sera affecté à maintenir l'élément de navigation nav ensemble.
Nous avons utilisé la classe «navbar-inverse" pour changer la couleur par défaut de la barre de navigation, l'utilisation de la lumière avant la nuit au lieu de la valeur par défaut. classe 'top-Navbar-fixe »garantit que lorsque nous faisons défiler vers le bas de la page HTML, la barre de navigation en haut de la position fixe.
Dans Bootstrap V3.0.0, lorsque la navigation est créée lors de l' utilisation du role = "navigation" est nouvelle. Bootstrap recommander une telle utilisation, pour un accès facile à la barre de navigation.
À ce stade, nous devons augmenter le corps du document dans custom.css 'padding-top: 80px; ". Vous ajoutez au corps comme le sommet des pixels remplis peut être différent, mais à moins que vous le faites, la partie supérieure de la barre de navigation après, sera caché.
Dans le nav conteneur, nous nous avons une classe de «nav» et liste à puces 'navbar-nav'. Dans cette liste à puces, chaque élément de la liste contient un lien de navigation.
classe 'Navbar-marque »pour la présentation d'un nom de marque. Nous avons utilisé une image. Depuis la hauteur de la hauteur de l'image est supérieure à la barre de navigation de base, où nous faisons une certaine personnalisation. Le '.navbar-nav> li> un' 'line-height' propriété du 20px par défaut d'origine à 50px, changer la taille de la police à 16px.
Le lien à droite, nous avons augmenté la boîte déroulante. Pour li connexe ajouté à la classe «déroulant», puis en ajoutant une «liste déroulante-toggle 'et ancre' caret 'avec deux classes. L'ancre de notre projet contient en fait un texte d'ancrage social. Cette li contient une liste à puces, chaque élément de liste dans une liste imbriquée sont présentées dans la case suivante contient le lien.
Dans la liste déroulante que nous avons ajouté un plugin social. La première contient une li Google Plus marque, et le second contient la li tag Facebook, et le troisième contient l'affichage li tag Twitter boutons et un script js.
En outre, vous devez démarrer après la balise body, ajoutez le balisage et les scripts suivants pour rendre Facebook bouton fonctionne
<Div id = "fb-root"> </ div>
(Fonction (d, s, id) {
js var, fjs = d.getElementsByTagName (s) [0];
if (d.getElementById (id)) return;
js = d.createElement (s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore (js, FJS);
} (Document, 'script', 'facebook-jssdk'));
Pour Twitter travail de bouton, nous nous retrouvons devant la balise body, ajoutez le script suivant
(Function () {
var po = document.createElement ( 'script'); po.type = 'text / javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName ( 'script') [0]; s.parentNode.insertBefore (po, s);
}) ();
Nous utilisons le style suivant pour ajouter un peu de style supplémentaire à la classe de boutons sociaux 'socials de.
.socials {
padding: 10px;
}
Ceci complète notre navigation.
Créer un diaporama par carousal
Pour projeter la page d'accueil barre de navigation, créer un diaporama, nous allons utiliser les balises suivantes
<Div id = "carrousel exemple générique" class = "slide carrousel">
<! - Indicateurs ->
<Classe Ol = "carrousel-indicateurs">
<Li data-target = "# carrousel exemple générique" data-slide-to = "0" class = "active"> </ li>
<Li data-target = "# carrousel exemple générique" data-slide-to = "1"> </ li>
<Li data-target = "# carrousel exemple générique" data-slide-to = "2"> </ li>
</ Ol>
<! - Wrapper pour les diapositives ->
<Class Div = "carrousel intérieur">
<Class Div = "élément actif">
<Img src = "computer.jpg" alt = "...">
<Class Div = "carrousel légende">
<H1> Large Desktops sont partout </ h1>
<P> <button class = "btn btn-succès btn-lg"> Essayer 30 jours d'essai maintenant </ p>
</ Div>
</ Div>
<Class Div = "item">
<Img src = "mobile.jpg" alt = "...">
<Class Div = "carrousel légende">
<H1> Mobiles sont plus nombreux que les ordinateurs de bureau </ h1>
<P> <button class = "btn btn-succès btn-lg"> Essayer 30 jours d'essai maintenant </ p>
</ Div>
</ Div>
<Class Div = "item">
<Img src = "cloud1.jpg" alt = "...">
<Class Div = "carrousel légende">
<H1> les entreprises adoptent Cloud computing rapide </ h1>
<P> <button class = "btn btn-succès btn-lg"> Essayer 30 jours d'essai maintenant </ p>
</ Div>
</ Div>
</ Div>
<! - Commandes ->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<Span class = "icon-prev"> </ span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<Span class = "icon-next"> </ span>
</a>
</ Div>
</ Div>
Il y a quatre sections dans le Carousal. container principal moyen d'une lame de carrousel »div tag avec les définitions de classe.
Ensuite, une classe «carrousel-indicateurs» avec une liste ordonnée. ol chaque élément de la liste représente une diapositive. Lorsque la page est chargée, chargé par diaporama par défaut avec la classe «active». Lors du rendu, vous les verrez dans la rubrique des petits cercles.
Ensuite, chaque diapositive (image) est placé avec un 'élément' classe de la balise div. Chaque élément est imbriqué avec une classe «carrousel légende» de la div. carrousel légende contient l'image affichée en même temps que la balise de titre. Le paragraphe contient une h1 et un bouton, vous pouvez également inclure d'autres marque propre.
La dernière partie est utilisée pour contrôler une diapositive diapositive suivante / précédente. Ceci est l'utilisation de la «gauche» et «carrousel contrôle» sur la définition d'une classe, en utilisant le «droit» suivant et définition de «carrousel contrôle» d'une classe.
'Icon-prev' et classe 'icône-next »pour l'icône suivante et précédente.
Nous avons fait une certaine personnalisation en carousal par défaut. Nous espérons les légendes, les indicateurs et les icônes suivantes / précédentes sont rendus sur le dessus de l'emplacement par défaut de quelques pixels.
Pour ce faire, nous ajoutons les styles suivants custom.css fichier
.item .carousel-caption .carousel-inner {
position: absolute;
top: 200px
}
.carousel-indicateurs {
position: absolute;
top: 400px;
}
.navbar {
margin-bottom: 0;
}
.navbar-nav> li> a {
line-height: 50px;
font-size: 16px
}
Nous personnalisons également les h1, ajoutons une marge inférieure de 30 pixels.
h1 {
margin-bottom: 30px
}
image de réponse
Vous avez peut-être remarqué que chaque image dans la diapositive, nous avons utilisé la classe «img sensible». Ceci est un V3.0.0 Bootstrap nouvelles fonctionnalités. En utilisant la balise classe 'img sensible' img, Bootstrap de telle sorte que la réponse de l' image.
Créer une grille
Dans les diapositives suivantes, nous avons utilisé une grille pour placer le contenu. En ayant une classe «conteneur» de div commencer une grille. S'il vous plaît noter que nous allons développer un site réactif, au lieu de la version précédente de Bootstrap, où le conteneur a une seule classe, la valeur par défaut est sensible.
div Container avec imbriqué plusieurs classe «ligne» de div (la première rangée de trois, la deuxième ligne a six), pour créer un Bootstrap lignes de la grille.
Chaque ligne a une avec une classe «col-xy 'de div, pour créer des colonnes. La valeur de x peut être: xs pour les appareils mobiles pour le sm Tablet PC, md pour les ordinateurs portables et plus petit écran de bureau pour lg grand écran de bureau. Ceci est la première méthode. La valeur de y peut être un entier positif quelconque, bien que le nombre total de colonnes dans la grille ne doit pas être supérieur à 12. Dans notre projet, pour plus de simplicité, nous avons utilisé lg, mais comme nous l'avons déjà fait, vous pouvez obtenir un téléphone ou une tablette pour afficher le site du projet pour la comparaison.
Dans le tutoriel suivant, nous aurons un tutoriel complet sur Bootstrap système de grille, d'explorer sa réponse fascinante.
Dans cet exemple, nous voulons que la largeur de la colonne des trois premières rangées sont égaux, de sorte que nous utilisons pour toutes les colonnes «col-lg-4 '. Dans la deuxième ligne, nous voulons six colonnes de largeur égale, de sorte que nous utilisons pour toutes les colonnes «col-lg-2 '.
Voici la balise qui contient une grille de deux lignes, la première ligne il y a trois, la deuxième rangée a six.
<Class Div = "ligne barone"> <Class Div = "col-lg-2"> <P> <img src = "../ wp-content / uploads / 2013/10 / php.png"> </ p> </ Div> <Class Div = "col-lg-2"> <P> <img src = "../ wp-content / uploads / 2013/10 / mysql-logo.jpg"> </ p> </ Div> <Class Div = "col-lg-2"> <P> <img src = "../ wp-content / uploads / 2013/10 / javascript-logo.png"> </ p> </ Div> <Class Div = "col-lg-2"> <P> <img src = "../ wp-content / uploads / 2013/10 / java.jpg"> </ p> </ Div> <Class Div = "col-lg-2"> <P> <img src = "../ wp-content / uploads / 2013/10 / postgresql.png"> </ p> </ Div> </ Div>
Nous avons une heure et un pied de page avec les marques qui suivent la fin de la grille
<Hr> <P> Copyright @ 2013-14 par ToDo App. </ P>
Utilisez le tableau
Dans la page price.html de notre projet, nous utilisons une forme de rendre une liste de prix, étiqueté comme suit
<Class Table = "table bordée table»>
<Thead>
<Tr>
<th> Caractéristiques </ th>
<Th> individuelle </ th>
<Th> Petite équipe </ th>
<Th> Medium Equipe </ th>
<Th> Enterprise </ th>
</ Tr>
</ Thead>
<TBODY>
<Tr>
<Td> <h3> No. d'utilisateurs </ h3> </ td>
<Td> <span class = "badge"> Une </ span> </ td>
<Td> <span class = "badge"> Cinq </ span> </ td>
<Td> <span class = "badge"> Quinze </ span> </ td>
<Td> <span class = "badge"> Illimité </ span> </ td>
</ Tr>
<Tr>
<Td> <h3> Formation Pro </ h3> </ td>
<Td> <span class = "badge"> Non </ span> </ td>
<Td> <span class = "badge"> Oui </ span> </ td>
<Td> <span class = "badge"> Oui </ span> </ td>
<Td> <span class = "badge"> Oui </ span> </ td>
</ Tr>
<Tr>
<Td> <h3> Forum </ h3> </ td>
<Td> <span class = "badge"> Oui </ span> </ td>
<Td> <span class = "badge"> Oui </ span> </ td>
<Td> <span class = "badge"> Oui </ span> </ td>
<Td> <span class = "badge"> Oui </ span> </ td>
</ Tr>
<Tr>
<Td> <h3> À l'appui de personne </ h3> </ td>
<Td> <span class = "badge"> Non </ span> </ td>
<Td> <span class = "badge"> Non </ span> </ td>
<Td> <span class = "badge"> Oui </ span> </ td>
<Td> <span class = "badge"> Oui </ span> </ td>
</ Tr>
<Tr>
<Td> <h3> webinaires hebdomadaires </ h3> </ td>
<Td> <span class = "badge"> Non </ span> </ td>
<Td> <span class = "badge"> Non </ span> </ td>
<Td> <span class = "badge"> Oui </ span> </ td>
<Td> <span class = "badge"> Oui </ span> </ td>
</ Tr>
<Tr>
<Td> <h3> Prix </ h3> </ td>
<Td> <button type = classe "bouton" = "btn btn-avertissement btn-lg"> 9 $ / Mois </ button> </ td>
<Td> <button type = classe "bouton" = "btn btn-avertissement btn-lg"> 19 $ / mois </ button> </ td>
<Td> <button type = classe "bouton" = "btn btn-avertissement btn-lg"> $ 49 / Mois </ button> </ td>
<Td> <button type = classe "bouton" = "btn btn-avertissement btn-lg"> $ 99 / Mois </ button> </ td>
</ Tr>
<Tr>
<Td> </ td>
<Td> <button type = classe "bouton" = "btn btn-succès btn-lg"> Acheter maintenant le bouton </> </ td>
<Td> <button type = "button" class = "btn btn-succès btn-lg" "> Acheter maintenant le bouton </> </ td>
<Td> <button type = "button" class = "btn btn-succès btn-lg" "> Acheter maintenant le bouton </> </ td>
<Td> <button type = "button" class = "btn btn-succès btn-lg" "> Acheter maintenant le bouton </> </ td>
</ Tr>
</ Tbody>
</ Table>
Bootstrap en utilisant le fichier CSS original 'table' et deux classes 'table-bordée. Mais nous devons faire le tableau suivant en ajoutant quelques fichier CSS personnalisé dans customize.css look différent
e {
background-color: # 428bca;
color: # ec8007;
z-index: 10;
text-shadow: 1px 1px 1px #fff;
font-size: 24px;
}
Utilisez le badge
Nous utilisons la classe «badge» pour afficher un texte dans le tableau. Nous avons le CSS personnalisé suivant avec la classe de badges
.badge {
background-color: # 428bca;
couleur: #fff;
font-size: 22px;
}
Pour cette page et la page contact.html, nous avons ajouté une autre règle CSS dans le customize.css
.container> h1 {
text-align: center;
}
Ceci permet h1 centré.
L'utilisation de formulaires
Dans le fichier contact.html, nous créons trois colonnes, la première colonne, nous intégrons un formulaire. Utilisez la feuille de style par défaut.
<Form class = rôle "de forme horizontale" = "form">
<Class Div = "form-groupe">
<Label for = "email" class = "col-lg-2 control-label"> Email </ label>
<Class Div = "col-lg-10">
<Input type = classe "email" = "form-commande" id = "email" espace réservé = "Email">
</ Div>
</ Div>
<Class Div = "form-groupe">
<Label for = class "name" = "col-lg-2 contrôle-label"> Nom </ label>
<Class Div = "col-lg-10">
<Input type = "text" class = "form-commande" id = "nom" espace réservé = "Nom">
</ Div>
</ Div>
<Class Div = "form-groupe">
<Label for = "country" class = "col-lg-2 contrôle-label"> Pays </ label>
<Class Div = "col-lg-10">
<Sélectionner>
<Option> Etats-Unis </ option>
<Option> Inde </ option>
<Option> Royaume-Uni </ option>
<Option> Autralie </ option>
</ Select>
</ Div>
</ Div>
<Class Div = "form-groupe">
<Label for = classe "desc" = "2 col-lg commande label"> Message </ label>
<Class Div = "col-lg-10">
<Lignes de Textarea = "5" cols = "50"> </ textarea>
</ Div>
</ Div>
<Class Div = "form-groupe">
<Class Div = "col-lg-offset-2 col-lg-10">
<Type Bouton = "submit" class = "btn btn-default"> Envoyer </ button>
</ Div>
</ Div>
</ Form>
classe 'Form-horizontale »permet de maintenir la forme alignement horizontal. S'il vous plaît noter que pour la facilité d'accès, ajoutez role = "form". Ceci est la version 3.0.0 des nouvelles fonctionnalités.
Pour localiser chacun des contrôles de formulaire, Bootstrap 3.0.0 utilise une nouvelle classe «forme-groupe».
Dans cette page, la deuxième colonne de la grille, il suffit de placer un texte.
Ajouter Google Maps
Dans la page contact.html, la troisième colonne de la grille, nous avons ajouté une carte Google (Google Maps). Pour ce faire, nous utilisons les balises suivantes
<Div id = "map_canvas"> </ div> </ Div>
Les js suivants ajoutés à l'entête du fichier HTML dans l'en-tête
function initialize () {
var map_canvas = document.getElementById ( 'map_canvas');
map_options var = {
centre: new google.maps.LatLng (23.244066, 87.861276),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map (map_canvas, map_options)
}
google.maps.event.addDomListener (fenêtre, «charge», initialiser);
Avant dit avant js, vous devez ajouter la balise de script suivant
<Script src = "http://maps.googleapis.com/maps/api/js?sensor=false"> </ script>
Afin de rendre correctement la carte, vous devez ajouter les styles suivants custom.css
#map_canvas {
largeur: 400px;
hauteur: 400px;
}
Voici comment créer un projet simple basé sur Bootstrap V3.0.0. Mais nous avons seulement touché la surface, plus tard chapitres expliqueront plus en détail.