Bootstrap, de Twitter, es el marco front-end más popular en la actualidad. Bootstrap se basa en HTML, CSS y JavaScript. Es simple y flexible, lo que hace que el desarrollo web sea más rápido.
La función principal del componente del panel es tratar con algunas funciones que otros componentes no pueden completar, con diferentes códigos de origen en diferentes versiones:
Menos: paneles.
Sass: _panels.scss
El panel básico es muy simple. Utiliza el estilo de clase .Panel en un contenedor Div para generar un bloque de visualización de texto con bordes. Dado que el panel no controla el color del tema, se agrega una clase .Panel-default para controlar el color del tema al tema controlado por .panel, y agregue un cuerpo Div.Panel para colocar el contenido principal del panel.
.Panel establece principalmente ciertas configuraciones para fronteras, espaciado, esquinas redondeadas y izquierda y derecha:
.panel {margen-bottom: 20px; fondo de fondo: #ffff; borde: 1px sólido transparente; border-radio: 4px; -webkit-box-shadow: 0 1px 1px rgba (0, 0, 0, .05); box shadow: 0 1px 1px rgBa (0, 0, 0, .05);}. 15px;}Aplicación de paneles básicos:
<h1> panel básico </h1> <div> <div> Este es un panel básico con estilo de tema predeterminado </div> </div>
Panel con cabeza y cola
Para enriquecer las funciones del panel, Bootstrap agrega especialmente los efectos del cabezal del panel y la cola del panel al panel.
.Panel-Heading: Establezca el estilo del cabezal del panel
.-Panel-Footer: Establezca el estilo de cola del panel
.-Panel-Headingh y.
.Panel-Heading {Padding: 10px 15px; Border-Bottom: 1px sólido transparente; border-top-left-radius: 3px; border-top-right-radius: 3px;}. panel-heading> .dropdown .dropdown-toggle {color: inherit;}. panel-title {margen-top: 0; margen-bottom: 0; 16px; color: herhherit;}. Panel-title> a {color: herhherit;}. Panel-footer {Padding: 10px 15px; fondo de fondo: #f5f5f5; border-top: 1px sólido #ddd; border-bottom-right-radius: 3px; border-bottom-martius: 3px;}ejemplo:
<h1>Panel with head and tail</h1><div><div>Here is the head title of the panel</div><div>Here is the panel content partHere is the panel content partHere is the panel content partHere is the panel content partHere is the panel content partHere is the panel content partHere is the panel content partHere is the panel content partHere is the panel content partHere is the panel content partHere is the panel content Parte </div> </div> Aquí está la cola del panel parte </div> </div>
Paneles de color
Dado que el estilo .panel no diseña el color del tema, el componente del panel en el marco de bootstrap maneja el estilo de tema predeterminado (.panel-default), y también incluye los siguientes estilos de tema:
.panel-primario: azul
.Panel-Success: Success Green
.Panel-Info: Información azul (luz)
.
.panel-amenger: rojo peligroso
Estos estilos simplemente cambian el color de fondo, el texto y el color del borde del panel.
El método de uso es muy simple. Simplemente agregue el nombre de clase temática requerida al nombre de la clase .panel
ejemplo:
<h1> panel colorido </h1> <div> <div> canto de cabeza blanca </div> <div> capric como nieve en la montaña, tan brillante como la luna entre las nubes. Escuché que tienes dos intenciones, así que llegué a tomar una decisión. La fiesta de bebidas de hoy, Mingdangou Water Head. El agua fluye hacia el este y el oeste en las zanjas. Es triste y triste, y no hay necesidad de llorar cuando te casas. Deseo ganar el corazón de una persona y nunca dejarme para siempre. ¿Qué es el poste de bambú balanceando, qué es la cola de pescado? Los hombres valoran el impulso, entonces, ¿por qué usar el cuchillo de dinero? </div> <div> Autor: Zhuo Wenjun </div> </div> <div> <div> UNT Título </div> <div> anoche, las estrellas anoche, el viento anoche y el lado oeste del edificio de pintura estaba al este del guitang. Las dos alas voladoras del fénix sin fénix coloridos están en armonía entre sí. El vino de primavera es cálido en el asiento, y las luces de cera son rojas. Por desgracia, escuché el tambor y respondí al funcionario, y caminé sobre el Malantai y me convertí en una túnica. </div> <div> Autor: Li Shangyin </div> </div> <div> <div> Qingyu Case ・ yuanxi </div> <div> El viento del este florece miles de flores y árboles por la noche, y sopla hacia abajo, y las estrellas son como lluvia. Los carros de automóviles BMW están llenos de fragancia. El sonido del fénix se mueve, la luz de la olla de jade gira, y el pez y el dragón bailan durante la noche. Las polillas y los sauces son mechones dorados, y las sonrisas están llenas de fragancia. Lo busqué en la multitud durante miles de veces, pero cuando miré hacia atrás, el hombre estaba allí, en la tenue luz. </div> <div> Autor: Xin Qiji </div> </div> <div> <div> li si </div> <div> El mar fue una vez un terrible mar de agua, pero Wushan no estaba turbio. Miraré hacia atrás en las flores y veré la mitad de mi vida, la mitad de mi vida, la mitad de mi vida. </div> <div> Autor: Yuan Zhen </div> </div> <div> <div> flores de ciruela pintadas </div> <div> Lieve nieve acaba de desaparecer de la mitad del estanque, y dos o tres ramas se ven desde una distancia por la valla. La fragancia se extiende al corazón del cielo, y se conocen las plantas y árboles desconocidos. </div> <div> Autor: Fang Xiaoru </div> </div> <div> <div> crisantemo </div> <div> Los arbustos de otoño rodean las casas como las casas de Tao, y el sol se inclina gradualmente alrededor de la valla. No es que prefiera los crisantemos entre las flores, y no hay flores cada vez que florecen las flores. </div> <div> Autor: Yuan Zhen </div> </div>
Los efectos son los siguientes:
Mesas anidadas en paneles
En términos generales, el panel puede entenderse como un área. Al usar el panel, el contenido requerido se colocará en el contenedor .panel-cuerpo, y el contenido puede ser imágenes, tablas, listas, etc.; Echemos un vistazo a los efectos de las tablas anidadas y los grupos de listas en el panel. Aquí hay un ejemplo de tablas anidadas:
<h1> Tablas anidadas en el panel </h1> <div> <div> poemas que describen flores </div> <div> <p> El poeta sinceramente ama los crisantemos: los grupos de crisantemos florecientes se extienden por toda la casa. Caminó por la cerca de bambú y admiró estos crisantemos de otoño plantados por él mismo, y antes de que pudiera darse cuenta de que el sol se había puesto en el oeste. </p> <topla> <thead> <tr> <th> No es que las flores prefieran los crisantemos, y no hay flores cuando las flores florecen. "Chrysanthemums" </th> <th> Deseo ganar el corazón de una persona, y mi cabeza no está separada entre sí. "Song of White Head" </th> <th> se sospecha que la brillante luz de la luna frente a la cama es helada en el suelo. "Pensamientos de noche tranquilos" </th> </tr> </thead> <tbody> <td> preocuparse por el mundo antes de preocuparse, y luego por el mundo después de la alegría. "Yueyang Tower Notes" </td> <td> Quiero conocerte, y mi vida nunca terminará. "Shangxie" </td> <td> se desconoce la cara de la cara humana, y las flores de durazno todavía sonríen en la brisa de primavera. "Inscripción en el nanzhuang de la capital" </td> </tr> </tbody> </table> </div> <div> Este poema toma la concepción artística de los poemas de Tao y también se canta en un lenguaje elegante y simple, lo que no es como Tao Gong usando todas las imágenes y es profunda; Pero después de representar lo concreto, revela la razón para amar los crisantemos de una manera autodescriptible sin decirlo en una palabra, dejando atrás un espacio de imaginación para que las personas saben y masticen, lo que mejora su atractivo artístico. Por lo tanto, siempre ha sido amado por personas </div> </div>
En uso real, tal vez no hay necesidad de ser un espacio entre los bordes de la tabla y el panel, pero el cuerpo .panel establece un relleno: valor de 15px. Para lograr este efecto, la tabla se puede extraer fuera del cuerpo del panel durante el uso real:
Por ejemplo:
<div> <div> poemas que describen flores </div> <div> <p> El poeta sinceramente ama los crisantemos: los grupos de crisantemos florecientes se extienden por toda la casa. Caminó por la cerca de bambú y admiró estos crisantemos de otoño plantados por él mismo, y antes de que pudiera darse cuenta de que el sol se había puesto en el oeste. </p> </div> <table> <thead> <tr> <th> "Yueyang Tower Notes" </th> <th> "shangxie" </th> <th> "inscripción en el nanzhuang de la ciudad capital" </th> </tr> </thead> <tbody> <tr> <td> preocupación por el mundo antes de disfrutar del mundo </td> <td> td <td> yo quiero Usted, y mi vida nunca se desvanecerá </td> <td> No sé dónde está la cara humana, pero las flores de los melocotones todavía sonreír en la brisa de primavera </td> </tr> </bbody> </table> <div> Este poema toma la concepción artística de los poemas de Tao y también está cantado en lenguaje elegante y simple, lo cual no es como Tao Gong usando todas las imágenes y es profesor de Tao; Pero después de representar imágenes concretas, explica la razón para amar los crisantemos de una manera autodescriptible, dejando atrás un espacio de imaginación para que las personas saboren y masticen, lo que mejora su atractivo artístico. Por lo tanto, siempre ha sido amado por personas </div> </div>
Grupos de listas anidadas en el panel
ejemplo:
<h1> Grupo de lista anidada en el panel </h1> <div> <div> poemas que describen flores </div> <div> <p> Grupo de lista anidada de panel </p> <ul> <li> Lista de la lista 1 </li> <li> Lista de la lista 2 </li> <li> Lista de la lista 3 </li> <li> Lista de la lista 4 </li> <li> Lista de la lista 5 </li> </li> Dive: Shangyin </div> </div>
Lo mismo es cierto para las tablas anidadas de la combinación de la lista anidada del panel. Si no se requiere dicho espacio, puede extraer el grupo de lista del cuerpo .panel.
ejemplo:
<h1> Grupo de lista anidada en el panel </h1> <div> <div> poemas que describen flores </div> <div> <p> Grupo de lista anidada del panel </p> </div> <ul> <li> Lista de la lista 1 </li> <li> Lista de lista 2 </li> <li> ítem 3 </li> <li> Lista de la lista 4 </li> <li> Shangyin </div> </div>
Los efectos son los siguientes:
Lo anterior es el componente del panel del componente Bootstrap introducido por el editor. ¡Espero que sea útil para todos!