Bootstrap, de Twitter, est actuellement le cadre frontal le plus populaire. Bootstrap est basé sur HTML, CSS et JavaScript. Il est simple et flexible, ce qui rend le développement Web plus rapide.
Points clés pour l'apprentissage:
1. Tableau
2. Bouton
Dans cette leçon, nous apprenons principalement les fonctions de table et de bouton de bootstrap et affichons divers effets riches grâce à la définition CSS intégrée.
un. feuille
Bootstrap fournit des styles de table riches à utiliser pour les développeurs.
1. Format de base
// Implémentez le style de table <table
Remarque: nous pouvons afficher le CSS correspondant via Firebug.
2. Formulaire rayée
// Laissez les lignes dans <TBOBY> produire une ligne après l'autre et un effet de fond monochrome <Bile>
Remarque: l'effet de table doit être basé sur le format de base.
3. Table avec des bordures
// Ajouter une bordure à la table <Bile>
4. Rocher la souris
// Laissez le tableau sous <TBOBY> survolez la souris pour réaliser l'effet de fond <Bile>
5. Classe de statut
// Le style d'arrière-plan de chaque ligne peut être défini séparément <TR>
Remarque: il existe cinq styles différents.
Description du style:
Une souris active planant sur la ligne ou la cellule
Signe de succès Action réussie ou positive
Les informations marquent des informations ou des actions rapides normales
AVERTISSEMENT LOGO AVERTISSEMENT ou l'attention des utilisateurs est requise
Le danger indique des actions négatives dangereuses ou potentielles
6. Masquer une ligne
// masquer la ligne <tr>
7. Tableau réactif
// Il existe une forme réactive pour l'élément parent de la table, moins de 768px, et la bordure apparaît <body>
deux. Bouton
Bootstrap offre beaucoup de boutons riches à utiliser les développeurs.
1. Étiquettes ou éléments qui peuvent être utilisés comme boutons
// Convertir en bouton normal <a href = "###"> lien </a> <fontificateur> Button </ftont> <entrée type = "Button" value = "entrée">
Il y a trois choses à noter:
(1). Choses à noter sur les composants
Bien que la classe de bouton puisse être appliquée aux éléments <a> et <button>, les composants de la barre de navigation et de navigation ne prennent en charge que les éléments <button>.
(2). Choses à noter lorsque le lien est utilisé comme un bouton
Si l'élément <a> est utilisé comme un bouton - et est utilisé pour déclencher certaines fonctions sur la page actuelle - plutôt que de lier d'autres pages ou de lier d'autres parties de la page actuelle, assurez-vous de définir la propriété Role = "Button".
(3). Affichage de croisement
La meilleure pratique que nous avons résumé est qu'il est fortement recommandé d'utiliser l'élément <button> dans la mesure du possible pour obtenir des effets de dessin correspondant sur chaque navigateur.
De plus, nous avons également découvert un bug sur le navigateur dans Firefox <30, ce qui montre qu'il nous empêche de définir l'attribut linéaire pour les boutons créés en fonction de l'élément <fort>, ce qui fait que le navigateur Firefox ne soit pas entièrement cohérent avec d'autres boutons.
2. Styles prédéfinis
// Button d'informations générales </fort>
Description du style
Style par défaut BTN-Default
style BTN-Success
BTN-Info Style d'information générale
Style d'avertissement d'arrêt BTN
style danger danger btn
Style de préférence BTN-Primaire
Style de lien BTN-Link
3. Taille
// Taille du grand au petit <fontin> Button </ Button> <Fut-Button> Button </ Button> <Fut-Button> Button </ Button> <Fut-Button> Button </ftont>
4. bouton de niveau de bloc
// BLOCK LIGE LINE BROSK <Button> Button </fut Button> <Fut-Button> Button </ Button>
5. Statut d'activation
// Activer le bouton <fontificateur> Button </fruton>
6. Désactiver le statut
// Désactiver le bouton <bouton> Button </fruton>
Ce qui précède est la table de bootstrap et les fonctions de bouton qui vous sont présentées par l'éditeur. J'espère que ce sera utile à tous!