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.
La fonction principale du composant du panneau est de traiter certaines fonctions que d'autres composants ne peuvent pas compléter, avec différents codes source dans différentes versions:
Moins: panneaux.
Sass: _panels.scss
Le panneau de base est très simple. Il utilise le style de classe .panel dans un conteneur div pour générer un bloc d'affichage de texte avec des bordures. Étant donné que le panneau ne contrôle pas la couleur du thème, une classe .panel-défaut pour contrôler la couleur du thème est ajoutée au thème contrôlé.
.Panel définit principalement certains paramètres pour les frontières, l'espacement, les coins arrondis, et à gauche et à droite:
.Panel {margin-fond: 20px; fond-couleur: #ffff; bordure: 1px solide transparent; border-radius: 4px; -webkit-box-shadow: 0 1px 1px rgba (0, 0, 0, .05); box-shadow: 0 1px 1px rgba (0, 0, 0, .05);}. 15px;}Application des panneaux de base:
<h1> Panneau de base </h1> <div> <div> Il s'agit d'un panneau de base avec le style de thème par défaut </div> </div>
Panneau avec tête et queue
Afin d'enrichir les fonctions du panneau, Bootstrap ajoute spécialement les effets de la tête et de la queue du panneau au panneau.
.
.Panel-Footer: Réglez le style de queue du panneau
.Panel-Headingh et .Panel-Footer uniquement Styles tels que l'espacement et les coins arrondis.
.Panel Heading {Padding: 10px 15px; Border-Bottom: 1px Solid Transparent; Border-Top-Left-Radius: 3px; border-top-right-radius: 3px;}. Panel-heading> .dropdown .Dropdown-toggle {Color: hheRit;}. 16px; couleur: héritage;}.exemple:
<H1> Panel avec tête et queue </h1> <v> <div> Voici le titre de tête du panneau </div> <v> Partie </div> </div> Voici la partie de la queue du panneau </div> </div>
Panneaux de couleur
Étant donné que le style .Panel ne coiffe pas la couleur du thème, le composant de panneau dans le framework bootstrap gère le style de thème par défaut (.panel-défault) et comprend également les styles de thème suivants:
.Panel-primaire: bleu
.Panel-Success: Success Green
.Panel-Info: Information Blue (Light)
.Panel-Warning: avertissement jaune
.panel-danger: dangereux rouge
Ces styles modifient simplement la couleur d'arrière-plan, le texte et la couleur de la bordure du panneau
La méthode d'utilisation est très simple. Il suffit d'ajouter le nom de classe de thème requis au nom de classe .panel
exemple:
<h1> Panneau coloré </h1> <div> <div> chant à tête blanche </div> <div> Capric comme de la neige sur la montagne, aussi brillante que la lune parmi les nuages. J'ai entendu dire que vous avez deux intentions, alors je suis venu prendre une décision. La fête des boissons d'aujourd'hui, Mingdangou Water Head. L'eau s'écoule à l'est et à l'ouest sur les fossés. C'est triste et triste, et il n'est pas nécessaire de pleurer lorsque vous vous mariez. Je souhaite gagner le cœur d'une personne et ne jamais se quitter pour toujours. Qu'est-ce que le poteau de bambou balance, qu'est-ce que la queue de poisson? Les hommes apprécient l'impulsion, alors pourquoi utiliser Money Knife! </div> <div> Auteur: Zhuo Wenjun </div> </div> <div> <div> un titre </div> <div> Hier soir, les étoiles hier soir, le vent hier soir, et le côté ouest du bâtiment de la peinture était l'est du guitang. Les deux ailes volantes du phénix sans phénix colorées sont en harmonie les uns avec les autres. Le vin de printemps est chaud sur le siège et les lumières de cire sont rouges. Hélas, j'ai écouté le tambour et j'ai répondu au fonctionnaire, et j'ai marché sur le Malantai et je me suis transformé en tunique. </div> <div> Auteur: Li Shangyin </div> </div> <div> <div> Case Qingyu ・ Yuanxi </div> <div> Le vent oriental fleurit des milliers de fleurs et d'arbres la nuit, et souffle, et les étoiles sont comme la pluie. Les chariots de voiture BMW sont pleins de parfums. Le son de la flûte Phoenix se déplace, la lumière du pot de jade tourne et le poisson et le dragon dansent pendant la nuit. Les papillons et les saules sont des mèches dorées, et les sourires sont remplis de parfum. Je l'ai cherché dans la foule pendant des milliers de fois, mais quand j'ai regardé en arrière, l'homme était là, dans la faible lumière. </div> <div> Auteur: Xin qiji </div> </div> <div> <div> li si </div> <div> La mer était autrefois une terrible mer d'eau, mais Wushan n'était pas nuageux. Je vais regarder en arrière sur les fleurs et voir la moitié de ma vie, la moitié de ma vie, la moitié de ma vie. </div> <div> Auteur: Yuan Zhen </div> </div> <div> <div> fleurs de prune peintes </div> <div> La neige légère vient de disparaître de la moitié de l'étang, et deux ou trois branches sont vues à distance par la clôture. Le parfum se propage au cœur du ciel, et les plantes et les arbres inconnus sont connus. </div> <div> Auteur: Fang Xiaoru </div> </div> <div> <div> Chrysanthemums </div> <div> Les buissons d'automne entourent les maisons comme les maisons de Tao, et le soleil s'incline progressivement autour de la clôture. Ce n'est pas que je préfère les chrysanthèmes parmi les fleurs, et il n'y a pas de fleurs chaque fois que les fleurs fleurissent. </div> <div> Auteur: Yuan Zhen </div> </div>
Les effets sont les suivants:
Tables imbriquées dans les panneaux
D'une manière générale, le panel peut être compris comme une zone. Lorsque vous utilisez le panneau, le contenu requis sera placé dans le conteneur .panel-corps et le contenu peut être des images, des tables, des listes, etc.; Jetons un coup d'œil aux effets des tables imbriquées et listez les groupes dans le panel. Voici un exemple de tables imbriquées:
<h1> Les tables imbriquées dans le panneau </h1> <div> <div> Poèmes décrivant les fleurs </div> <div> <p> Le poète aime sincèrement les chrysanthèmes: des grappes de chrysanthèmes en fleurs sont répartis dans la maison. Il a marché le long de la clôture en bambou et a admiré ces chrysanthèmes d'automne plantés par lui-même, et avant qu'il ne puisse réaliser que le soleil s'était couché en Occident. </p> <pable> <thead> <tr> <th> Ce n'est pas que les fleurs préfèrent les chrysanthèmes, et il n'y a pas de fleurs lorsque les fleurs fleurissent. "Chrysanthemums" </th> <th> Je souhaite gagner le cœur d'une personne, et ma tête n'est pas séparée les unes des autres. "Song of White Head" </th> <th> Le clair de lune brillant devant le lit est soupçonné d'être le gel sur le sol. "Réflexions de nuit tranquilles" </th> </tr> </thead> <tbody> <td> s'inquiéter du monde avant de s'inquiéter, puis du monde après la joie. "Yueyang Tower Notes" </td> <td> Je veux vous connaître et ma vie ne finira jamais. "Shangxie" </td> <td> Le visage du visage humain est inconnu, et les fleurs de pêche sourient toujours dans la brise printanière. "Inscription sur le nanzhuang de la capitale" </td> </tr> </tbody> </pally> </div> <div> Ce poème prend la conception artistique des poèmes de Tao et est également chanté dans un langage élégant et simple, qui ne ressemble pas à Tao Gong en utilisant toutes les images et est profond; Mais après avoir dépeint le béton, il révèle la raison d'aimer les chrysanthèmes de manière auto-décripable sans le dire en un mot, laissant derrière lui un espace d'imagination pour que les gens savourent et mâchent, ce qui améliore son attrait artistique. Par conséquent, il a toujours été aimé par les gens </div> </div>
Dans une utilisation réelle, il n'est peut-être pas nécessaire de l'espacement entre les bords de la table et du panneau, mais le corps .panel définit une valeur de rembourrage: 15px. Afin d'atteindre cet effet, le tableau peut être extrait à l'extérieur du panneau de panneau pendant l'utilisation réelle:
Par exemple:
<div> <div> Poèmes décrivant les fleurs </div> <div> <p> Le poète aime sincèrement les chrysanthèmes: des grappes de chrysanthèmes fleuris sont répartis dans la maison. Il a marché le long de la clôture en bambou et a admiré ces chrysanthèmes d'automne plantés par lui-même, et avant qu'il ne puisse réaliser que le soleil s'était couché en Occident. </p> </div> <pable> <thead> <tr> <th> "Yueyang Tower Notes" </th> <th> "Shangxie" </th> <th> "Inscription sur la nanzhuang de la capitale" </th> </tr> </thead> <tbody> <Tr> <Td> Je veux que je sois de m'inquiéter, et ensuite à profiter du monde après la joie <TD> Vous, et ma vie ne se fanera jamais </td> <td> Je ne sais pas où se trouve le visage humain, mais les fleurs de pêche sourient toujours dans la brise printanière </td> </tr> </pbody> </pally> <v> Ce poème prend la conception artistique des poèmes de Tao et est également chanté dans le profond et le profond; Mais après avoir dépeint des images concrètes, il explique la raison d'aimer les chrysanthèmes de manière auto-décrivable, laissant derrière lui un espace d'imagination pour que les gens savourent et mâchent, ce qui améliore son attrait artistique. Par conséquent, il a toujours été aimé par les gens </div> </div>
Groupes de listes imbriquées dans le panel
exemple:
<h1> Groupe de liste imbriquée dans le panneau </h1> <div> <div> Poèmes décrivant les fleurs </div> <div> <p> Groupe de liste de listes imbriquées </p> <ul> <li> Élément de liste 1 </li> <li> Article de liste 2 </ li> Shangyin </div> </div>
Il en va de même pour les tables imbriquées de la liste imbriquée du panneau. Si un tel espacement n'est pas requis, vous pouvez extraire le groupe de liste du corps .panel.
exemple:
<h1> Groupe de liste imbriquée dans le panneau </h1> <div> <div> Poèmes décrivant les fleurs </div> <div> <p> Groupe de liste de listes imbriquées </p> </div> <ul> <li> Élément de liste 1 </li> <li> Élément de liste 2 </li> <li> Élément de liste 3 </li> <li> Liste 4 </li> <li> Élément de liste 5 </ li> Shangyin </div> </div>
Les effets sont les suivants:
Ce qui précède est le composant de panneau du composant bootstrap qui vous est présenté par l'éditeur. J'espère que ce sera utile à tous!