Mettre en place un projet Web avec Bootstrap 2.0

La tâche principale lors de la création d'un site Web est de mettre en page le design pour créer la structure avec xhtml et css pour définir les espaces de contenu, pour nous aider dans cette tâche, il existe des frameworks standard tels que 960gs ou Bootstrap.
Dans ce cas, je verrai Bootstrap qui a été développé et utilisé par Twitter.
Bootstrap est un framework conçu pour simplifier le processus de création de conceptions Web. Pour cela, il propose un ensemble de classes CSS et de fichiers Javascript déjà programmés, qui permettent le développement de tâches telles que :

• Conception Web qui fonctionne dans les navigateurs actuels, sans avoir à apporter de nombreuses modifications.

• Une conception Web qui peut être visualisée correctement sur différents appareils et à différentes échelles et résolutions.

• Meilleure intégration avec les bibliothèques les plus couramment utilisées, telles que jQuery.

• Un design solide basé sur les outils et standards actuels tels que CSS3/HTML5

Nous allons commencer un exemple en téléchargeant le framework http://getbootstrap.com/2.3.2/

Nous décompressons le fichier et nous verrons 2 répertoires avec les composants d'amorçage
Nous créons un fichier index.html que nous allons expliquer.
Nous créons un html avec les composants de base :

 Concevoir avec Bootstrap / * Ici ira le contenu * / 

Bootstrap plonge la structure de 980px en 12 colonnes de 60 pixels pour mettre du contenu. Les blocs pouvant être créés vont de 1 à 12 en utilisant la classe spanx, donc span1 sera un bloc de 60 pixels. Un exemple de tous les blocs de contenu que nous pouvons avoir.

Nous allons créer une structure de base d'un en-tête Web, d'une colonne de gauche, d'un contenu et d'un pied de page. Toutes les classes viennent déjà dans les frameworks

// cadre de conteneur général// définit le début d'une ligne de blocs// Bloc de 12 colonnes égal à 980px pour l'en-tête;// Bloc de 2 colonnes égal à 120px pour la colonne;// Bloc de 10 colonnes égal à 600px pour le contenu;// Bloc de 12 colonnes égal à 980px pour le pied de page;

AGRANDIR

Composants pour créer un menu
Dans la partie en-tête, vous pouvez insérer un menu de liste avec les classes de la barre de navigation pour créer un menu :

// Bloc de 12 colonnes égal à 980px pour l'en-tête;

Thème 1
Thème 2
Thème 3

Ainsi, nous pouvons voir notre menu prêt sans avoir à traiter avec css.

AGRANDIR

Ensuite, si vous souhaitez étendre le bootstrap en créant nos propres règles CSS, nous créons un autre fichier default.css et là nous mettons notre code de cette façon, puis nous ajoutons notre classe dans l'exemple de code :

Nous créons un contenu dans la colonne contenu

// Bloc de 10 colonnes égal à 600px pour le contenu;
Nous créons du contenu avec Bootstrap pour expliquer le tutoriel
// un paragraphe vide revient à laisser une ligne ou un espace Voir Bootstrap

Le résultat lors du rafraîchissement de notre exemple sera :

AGRANDIR

L'exemple n'est pas un site Web complet ou avec une esthétique appréciable, mais comme nous pouvons le voir avec peu d'effort, nous pouvons faire une démo ou créer des modèles sans avoir besoin de plus qu'un éditeur de texte et économiser beaucoup de travail avec l'ensemble de la plate-forme standardisée.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif

Ce tutoriel vous a-t-il aidé ?

Sinon

AIDEZ A AMÉLIORER CE TUTORIEL !

Pensez-vous pouvoir corriger ou améliorer ce tutoriel ? Vous pouvez envoyer votre édition avec les modifications que vous jugez utiles.
0 utilisateurs ont modifié ce tutoriel. Editez et devenez un expert reconnu !
Modifier ce tutoriel

TUTORIELS SIMILAIRES

Barre horizontale avec effet de survol en html5, css3 et bootstrapObtenez les coordonnées du client avec l'API Google Maps en JavaScript (HMTL5, CSS3 et Bootstrap)Apprendre à faire un diaporama responsive avec HTML5 + BootstrapDéveloppement d'interfaces Web avancées de Bootstrap FrameworkExtension de BootstrapNetbeans : créez des projets HTML5 avec des modèles et un pluginInterfaces utilisateur d'amorçageUtilisation des composants Bootstrap

Sans commentaires, soyez le premier!

N'attendez plus et entrez dans SolveticLaissez vos commentaires et profitez du compte utilisateur Rejoignez-nous !

• Créer un compteInscrivez-vous GRATUITEMENT pour avoir votre compte SolveticEnregistrez un compte
• IdentifierAvez-vous déjà un compte? Se connecter iciIdentifiez-moi dans mon compte