O Bootstrap, do Twitter, é a estrutura de front-end mais popular no momento. O Bootstrap é baseado em HTML, CSS e JavaScript. É simples e flexível, tornando o desenvolvimento da Web mais rápido.
A principal função do componente do painel é lidar com algumas funções que outros componentes não podem concluir, com diferentes códigos de origem em diferentes versões:
Menos: painéis
Sass: _panels.scss
O painel básico é muito simples. Ele usa o estilo de classe .Panel em um contêiner Div para gerar um bloco de exibição de texto com bordas. Como o painel não controla a cor do tema, uma classe.
.Panel define principalmente certas configurações para bordas, espaçamento, cantos arredondados e esquerda e direita:
.Panel {Margin-Bottom: 20px; cor de fundo: #ffff; borda: 1px transparente sólido; radio de borda: 4px; -webkit-box-shadow: 0 1px 1px rgba (0, 0, 0, 0,05); Box-shadow: 0 1px 1px rgBa (0, 0, 0, .05); 15px;}Aplicação de painéis básicos:
<H1> Painel básico </h1> <div> <div> Este é um painel básico com estilo de tema padrão </div> </div>
Painel com cabeça e cauda
Para enriquecer as funções do painel, o bootstrap adiciona especialmente os efeitos da cabeça do painel e da cauda do painel ao painel.
.
.Panel-Footer: Defina o estilo da cauda do painel
.Panel-headingh e .Panel-Footer apenas estilos, como espaçamento e cantos arredondados.
.Panel de cabeça {preenchimento: 10px 15px; borda-fundo: 1px transparente sólido; borda-top-left-radius: 3px; borda-top-right-radius: 3px;}. 16px; cor: herdar;}. Title de painel> a {cor: herdar;}. Painel-footer {preenchimento: 10px 15px; cor de fundo: #f5f5f5; borda-top: 1px sólido #ddd; borda-bottom-rightus: 3px; border-bottom-leftius;exemplo:
<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> Aqui está a parte da cauda do painel </div> </div>
Painéis coloridos
Como o estilo .Panel não estiliza a cor do tema, o componente do painel no estilo de bootstrap lida com o estilo tema padrão (.Panel-Default) e também inclui os seguintes estilos de tema:
.Panel-primário: azul
.Panel-success: sucesso verde
.Panel-Info: Informação Blue (luz)
.Panel Warning: Aviso de amarelo
.Panel-Danger: Dangerous Red
Esses estilos apenas alteram a cor do fundo, o texto e a cor da borda do painel
O método de uso é muito simples. Basta adicionar o nome da classe tema necessária ao nome da classe .Panel
exemplo:
<H1> Painel colorido </h1> <div> <div> Canto de cabeça branca </div> <div> Capric como neve na montanha, tão brilhante quanto a lua entre as nuvens. Ouvi dizer que você tem duas intenções, então cheguei a tomar uma decisão. Festa de bebida de hoje, Mingdangou Water Head. A água flui para o leste e oeste nas valas. É triste e triste, e não há necessidade de chorar quando você se casar. Desejo conquistar o coração de uma pessoa e nunca me deixar para sempre. O que é o poste de bambu balançando, qual é a cauda de peixe? Os homens valorizam o impulso, então por que usar faca de dinheiro! </div> <div> Autor: Zhuo Wenjun </div> </div> <div> <div> unt título </div> <div> ontem à noite, as estrelas da noite passada, o vento na noite passada, e o lado oeste do edifício de pintura foi o leste do Guitang. As duas asas voadoras do Phoenix sem fênixes coloridas estão em harmonia entre si. O vinho da primavera está quente no banco e as luzes de cera estão vermelhas. Infelizmente, ouvi o tambor e respondi ao funcionário, caminhei pelo malantai e me transformei em uma túnica. </div> <div> Autor: li shangyin </div> </div> <div> <div> Qingyu Case ・ yuanxi </div> <div> O vento leste floresce milhares de flores e árvores à noite e sopra, e as estrelas são como a chuva. Os carrinhos de carro BMW estão cheios de fragrância. O som da flauta de Phoenix se move, a luz da panela de jade e a dança de peixe e dragão da noite para o dia. As mariposas e os salgueiros são mechas douradas e os sorrisos são preenchidos com fragrância. Eu procurei por ele na multidão por milhares de vezes, mas quando olhei para trás, o homem estava lá, na luz fraca. </div> <div> autor: xin qiji </div> </div> <div> <div> li si </div> <div> O mar já foi um terrível mar de água, mas Wushan não estava nublado. Vou olhar para as flores e ver metade da minha vida, metade da minha vida, metade da minha vida. </div> <div> autor: yuan zhen </div> </div> <div> <div> pintar flores de ameixa </div> <div> neve ligeira acabou de desaparecer de metade da lagoa, e dois ou três galhos são vistos de uma distância pela cerca. A fragrância se espalha para o coração do céu, e as plantas e árvores desconhecidas são conhecidas. </div> <div> Autor: Fang xiaoru </div> </div> <div> <div> crisântemos </div> <div> arbustos de outono cercam as casas como as casas de Tao, e o sol está gradualmente inclinado ao redor da cerca. Não é que eu prefira crisântemos entre as flores, e não há flores sempre que as flores florescem. </div> <div> Autor: yuan zhen </div> </div>
Os efeitos são os seguintes:
Mesas aninhadas em painéis
De um modo geral, o painel pode ser entendido como uma área. Ao usar o painel, o conteúdo necessário será colocado no contêiner .Panel-corp, e o conteúdo pode ser imagens, mesas, listas, etc.; Vamos dar uma olhada nos efeitos das tabelas aninhadas e listar grupos no painel. Aqui está um exemplo de tabelas aninhadas:
<H1> Tabelas aninhadas no painel </h1> <div> <div> poemas que descrevem flores </div> <div> <p> O poeta ama sinceramente os crisântemos: grupos de crisântemos que florescem são espalhados por toda a casa. Ele caminhou pela cerca de bambu e admirou esses crisântemos de outono plantados por si mesmo, e antes que ele pudesse perceber que o sol havia se pôs no oeste. </p> <tabela> <thead> <tr> <th> Não é que as flores prefiram crisântemos, e não há flores quando as flores florescem. "Crisântemos" </th> <th> Desejo conquistar o coração de uma pessoa, e minha cabeça não está separada uma da outra. "Song of White Head" </th> <th> A lua brilhante em frente à cama é suspeita de ser geada no chão. "Pensamentos de noite tranquila" </th> </tr> </sead> <tbody> <td> se preocupe com o mundo antes de se preocupar e depois o mundo após a alegria. "Yueyang Tower Notes" </td> <td> Eu quero conhecê -lo, e minha vida nunca terminará. "Shangxie" </td> <td> O rosto do rosto humano é desconhecido, e as flores de pêssego ainda sorriem na brisa da primavera. "Inscrição na nanzhuang da capital" </td> </tr> </tbody> </ table> </div> <div> Este poema toma a concepção artística dos poemas de Tao e também é cantada em linguagem elegante e simples, que não é como o gongo de Tao usando todas as imagens e é profundo; Mas depois de descrever o concreto, ele revela a razão para amar os crisântemos de uma maneira autodescrita sem dizer isso de uma palavra, deixando para trás um espaço de imaginação para as pessoas saborearem e mastigam, o que aumenta seu apelo artístico. Portanto, sempre foi amado pelas pessoas </div> </div>
No uso real, talvez não haja necessidade de espaçar-se entre as bordas da tabela e o painel, mas o corpo .Panel define um preenchimento: valor de 15px. Para alcançar esse efeito, a tabela pode ser extraída fora do corpo do painel durante o uso real:
Por exemplo:
<div> <div> poemas descrevendo flores </div> <div> <p> O poeta ama sinceramente os crisântemos: grupos de crisântemos florescentes estão espalhados por toda a casa. Ele caminhou pela cerca de bambu e admirou esses crisântemos de outono plantados por si mesmo, e antes que ele pudesse perceber que o sol havia se pôs no oeste. </p> </div> <tabela> <Tead> <tr> <th> "Yueyang Tower Notes" </th> <th> "shangxie" </th> <th> "inscrição na capital da cidade depois de se preocupar com a preocupação, e depois a preocupação com a preocupação, e depois a preocupação com a preocupação, e depois a preocupação com a preocupação com a preocupação, e depois a preocupação com a preocupação com a preocupação, e depois a preocupação com a preocupação com a preocupação, e depois da pensão, e depois da espetáculo, e depois a preocupação com a preocupação com a preocupação, e depois a preocupação com a preocupação, e depois a preocupação com a preocupação e, em seguida, depois de se preocupar com a preocupação, e então, e depois a preocupação, e depois a preocupação e a preocupação com a preocupação com a preocupação e, em seguida. Você, e minha vida nunca desaparecerá </td> <td> Não sei onde está o rosto humano, mas as flores de pêssego ainda sorriem na brisa da primavera </td> </tr> </tbody> </tabela> <div> Este poema toma a concepção artística do Poemas de Tao e também é que é um reflexão e a linguagem, que não é como uma linguagem, que não é uma linguagem artística, que não é como uma linguagem, que não é uma linguagem artística, que não é uma das imagens, que não é uma linguagem, que não é uma linguagem artística; Mas depois de retratar imagens concretas, ele explica a razão para amar os crisântemos de uma maneira autodescrita, deixando para trás um espaço de imaginação para as pessoas saborearem e mastigam, o que aumenta seu apelo artístico. Portanto, sempre foi amado pelas pessoas </div> </div>
Grupos de listas aninhadas no painel
exemplo:
<h1>Nested list group in the panel</h1><div><div>Poems describing flowers</div><div><p>Panel nested list group</p><ul><li>List item 1</li><li>List item 2</li><li>List item 3</li><li>List item 4</li><li>List item 5</li></ul></div><div>Author: Li Shangyin </div> </div>
O mesmo vale para tabelas aninhadas de aninhadas de lista aninhadas. Se esse espaçamento não for necessário, você pode extrair o grupo de lista do corpo .Panel.
exemplo:
<h1> Grupo de lista aninhado no painel </h1> <div> <div> Poemas descrevendo flores </div> <div> <p> Painel List Group </p> </div> <ul> <li> LISTA ITEM 1 </li> <li> LISTA ITEM 2 </li> <li> Lista 3 </li> <li> <li> <li> <li> Shangyin </div> </div>
Os efeitos são os seguintes:
O acima é o componente do painel do componente de bootstrap introduzido pelo editor. Espero que seja útil para todos!