Este artigo compartilha o código de desenvolvimento do site BOOTSTRAP3 para sua referência. O conteúdo específico é o seguinte
Usei o Bootstrap3 pela primeira vez e descobri que ele apoia muito o celular e poderia desenvolver rapidamente um site que suporta Mobile e PC.
A seguir, é apresentado um exemplo deste artigo, o código específico:
A linha do tempo vem de um site estrangeiro, e o CSS usado é o seguinte
.timeline {estilo de listar: nenhum; preenchimento: 20px 0 20px; Posição: relativa;}. Linha do tempo: antes de {top: 0; Inferior: 0; Posição: Absoluto; contente: " "; Largura: 3px; Background-Color: #eeeeee; Esquerda: 50%; margem-esquerda: -1.5px;}. Linha do tempo> li {margem-fundo: 20px; Posição: relativa;}. Linha do tempo> Li: Antes, .Timeline> li: após {content: ""; Exibir: tabela;}. Linha do tempo> li: após {clear: ambos;}. Linha do tempo> li: antes, .timeline> li: após {content: ""; Exibir: tabela;}. Linha do tempo> li: após {limpar: ambos;}. Linha do tempo> li> .timeline-painel {width: 46%; flutuar: esquerda; borda: 1px sólido #d4d4d4; Radio de fronteira: 2px; preenchimento: 20px; Posição: relativa; -webkit-box-shadow: 0 1px 6px rgba (0, 0, 0, 0,175); Shadow de caixa: 0 1px 6px rgba (0, 0, 0, 0.175); } .timeline> li> .timeline-pain: antes de {posição: absoluto; TOP: 26px; Direita: -15px; Exibição: bloco embutido; Top de borda: 15px transparente sólido; Interação da borda: 15px sólido #ccc; Fronteira: 0 Solid #CCC; fundo da fronteira: 15px transparente sólido; contente: " "; } .timeline> li> .timeline-pain: após {posição: absoluto; TOP: 27px; Direita: -14px; Exibição: bloco embutido; Top de borda: 14px transparente sólido; Border-Ift: 14px sólido #fff; Right-Right: 0 #FFF sólido; fundo da fronteira: 14px transparente sólido; Conteúdo: "";}. Linha do tempo> li> .timeline-badge {color: #fff; Largura: 50px; Altura: 50px; altura da linha: 50px; tamanho de fonte: 1.4em; Alinhamento de texto: centro; Posição: Absoluto; Top: 16px; Esquerda: 50%; margem -esquerda: -25px; Background-Color: #999999; Index z: 100; Radio de borda-top-right: 50%; Radio de borda-top-esquerda: 50%; Radio-R-Right-Right-Right: 50%; Radio de borda-de-borda-esquerda: 50%; Fronteiro-Bottom-Left-Radius: 50%;}. Linha do tempo> li.timeline-Inverted> .timeline-panel {float: direita;}. largura da fronteira: 15px; Esquerda: -15px; à direita: Auto;}. Linha do tempo> li.timeline-Inverted> .timeline-panel: após {borda-esquerda-lar-letra: 0; largura da fronteira: 14px; Esquerda: -14px; à direita: Auto;}. Timeline-Badge.Primary {Background-Color: #2E6DA4! IMPORTANTE;}. ! IMPORTANTE;}. Cor: herde;}. Corpo da linha do tempo> P, .Timeline-Body> Ul {Margin-Bottom: 0;}. Timeline-Corpo> p + p {margin-top: 5px;}@mídia (max-width: 767px) {Ul.timeline: antes {esquerda: 40px; } ul.timeline> li> .timeline -panel {width: calc (100% - 90px); largura: -moz -calc (100% -90px); largura: -webkit -calc (100% -90px); } ul.timeline> li> .timeline-badge {esquerda: 15px; margem-esquerda: 0; Top: 16px; } ul.timeline> li> .timeline-panel {float: certo; } Ul.timeline> li> .timeline-pain: antes de {borda-left-width: 0; largura da fronteira: 15px; Esquerda: -15px; Direita: Auto; } Ul.timeline> li> .timeline-pain: após {borda-left-width: 0; largura da fronteira: 14px; Esquerda: -14px; Direita: Auto; }} <ul> <li> <div> <i> </i> </div> <div> <h4> Anthony Robin ・ Introdução </h4> <p> <mmall> <i> </i> </mall> </p> </div> <div> <p> Ele é um bilionário bem-sucedido de uma carreira feita e é o mundo mais bem-sucedido; Ele auxilia equipes profissionais, presidentes corporativos e chefes de estado para estimular potencial e superar várias dificuldades e baixos. Ele aconselhou muitos membros da família real e foi contratado como consultores pessoais dos ex -presidentes dos EUA Clinton e da princesa Diana; Ele aconselhou muitas celebridades mundiais, incluindo o presidente sul -africano Manra, o ex -presidente soviético Gorbachev e o campeão mundial de tênis Andre Agassi; </p> </div> </li> <li> .................................. </li> </ul>Durante o processo, descobri que no Android 4.0, largura: -Webkit -Calc (100% -90px); O suporte não foi muito bom e a tela da linha do tempo não era normal. Mais tarde, foi resolvido com JS.
$ (function () {$ (window) .Resize (function () {inittimePanelsize ();}); inittimePanelsize (); function inittimePanelsize () {width = $ (this) .Width (); - 90);Imagem de reprodução:
Se você ainda deseja aprender em profundidade, clique aqui para aprender e anexar dois tópicos interessantes a você: Bootstrap Learning Tutorial Bootstrap Tutorial Practical Tutorial
O exposto acima é o principal código de produção do site de Bootstrap3. Espero que possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.