Cet article partage le code de développement du site Web réactif Bootstrap3 pour votre référence. Le contenu spécifique est le suivant
J'ai utilisé Bootstrap3 pour la première fois et j'ai constaté qu'il était très favorable à Mobile et pouvait rapidement développer un site Web qui prend en charge le mobile et le PC.
Ce qui suit est un exemple de cet article, le code spécifique:
Le calendrier provient d'un site Web étranger, et le CSS utilisé est le suivant
.Timeline {list-style: Aucun; rembourrage: 20px 0 20px; Position: relative;}. Timeline: avant {en haut: 0; en bas: 0; Position: absolue; contenu: " "; Largeur: 3px; Color d'arrière-plan: #eeeeee; Gauche: 50%; marge-left: -1,5px;}. Timeline> li {margin-boot: 20px; Position: relative;}. Timeline> li: avant, .Timeline> li: après {contenu: ""; Affichage: table;}. Timeline> li: After {clairement: les deux;}. Timeline> li: avant, .Timeline> li: après {contenu: ""; Affichage: table;}. Timeline> li: après {clairement: les deux;}. Timeline> li> .Timeline-Panel {width: 46%; flottant: à gauche; Border: 1px solide # d4d4d4; Border-Radius: 2px; rembourrage: 20px; Position: relative; -webkit-box-shadow: 0 1px 6px rgba (0, 0, 0, 0,175); Box-Shadow: 0 1px 6px RGBA (0, 0, 0, 0,175); } .Timeline> li> .Timeline-Panel: avant {position: absolue; En haut: 26px; à droite: -15px; Affichage: bloc en ligne; Border-top: 15px solide transparent; Border-Left: 15px solide #ccc; Border-Dight: 0 Solid #ccc; Border-Bottom: 15px solide transparent; contenu: " "; } .timeline> li> .Timeline-Panel: After {position: absolu; En haut: 27px; à droite: -14px; Affichage: bloc en ligne; Border-top: 14px solide transparent; Border-Left: 14px solide #FFF; Border-droite: 0 Solid #FFF; Border-Bottom: 14px solide transparent; Contenu: "";}. Timeline> li> .Timeline-Badge {Color: #fff; Largeur: 50px; hauteur: 50px; hauteur de ligne: 50px; taille de police: 1.4EM; Texte-aligne: Centre; Position: absolue; en haut: 16px; Gauche: 50%; marge-gauche: -25px; Color en arrière-plan: # 999999; Z-Index: 100; Border-top-droite-radius: 50%; Border-top-Left-Radius: 50%; Border-Bottom-droite-radius: 50%; Border-Bottom-Left-Radius: 50%; Border-Bottom-Left-Radius: 50%;}. Timeline> li.timeline-inversé> .Timeline-Panel {float: right;}. Timeline> li.timeline-inversed> .timeline-panel: avant {border-left-width: 0; largeur de droite: 15px; gauche: -15px; à droite: auto;}. Timeline> li.Timeline-inversé> .Timeline-Panel: après {border-left-width: 0; largeur de droite: 14px; gauche: -14px; à droite: auto;}. timeline-badge.primary {background-color: # 2e6da4! importante;}. timeline-badge.success {background-color: # 3f903f! importante;}. timeline-badge.warning {background-Color: # f0ad4e! ! IMPORTANT;}. Timeline-Badge.info {Background-Color: # 5BC0DE! IMPORTANT;}. Timeline-Title {margin-top: 0; Couleur: héritage;}. Timeline-body> p, .timeline-body> ul {margin-bottom: 0;}. timeline-body> p + p {margin-top: 5px;} @ media (max-width: 767px) {ul.timeline: avant {gauche: 40px; } ul.timeline> li> .timeline-panel {width: calc (100% - 90px); Largeur: -moz-call (100% - 90px); Largeur: -Webkit-Calc (100% - 90px); } ul.timeline> li> .timeline-badge {Left: 15px; marge-gauche: 0; en haut: 16px; } ul.timeline> li> .timeline-panel {float: droite; } ul.timeline> li> .timeline-panel: avant {border-left-width: 0; largeur de droite: 15px; gauche: -15px; Droite: Auto; } ul.timeline> li> .timeline-panel: après {border-left-width: 0; largeur de droite: 14px; gauche: -14px; Droite: Auto; }} <ul> <li> <div> <i> </i> </div> <div> <h4> Anthony Robin ・ Introduction </h4> <p> <mall> <i> </i> </small> </p> </div> <div> <p> Il est un milliardaire à succès d'une carrière auto-maternelle et est l'expert en développement potentiel le plus réussi; Il aide les équipes professionnelles, les présidents d'entreprise et les chefs d'État à stimuler le potentiel et à surmonter diverses difficultés et bas. Il a conseillé de nombreux membres de la famille royale et a été embauché en tant que consultants personnels par les anciens présidents américains Clinton et la princesse Diana; Il a conseillé de nombreuses célébrités mondiales, notamment le président sud-africain Manra, l'ancien président soviétique Gorbatchev et le champion du tennis du monde Andre Agassi; </p> </div> </li> <li> .................................. </li> </ul>Pendant le processus, j'ai trouvé que sur Android 4.0, largeur: -Webkit-calc (100% - 90px); Le support n'était pas très bon et l'affichage de la chronologie n'était pas normal. Plus tard, il a été résolu avec JS.
$ (function () {$ (window) .resize (function () {inittimePanelSize ();}); inittimePanelSize (); fonction inittimePanelSize () {width = $ (this) .width (); // alert (width); if (width <= 767) {$ ('div.timeline-canal'). width ($ (this). 90);} else {$ ('div.timeline-panel'). CSS ('width', '46% ');}}});Image de reproduction:
Si vous souhaitez toujours apprendre en profondeur, vous pouvez cliquer ici pour apprendre et vous attacher deux sujets passionnants: Tutoriel d'apprentissage bootstrap Tutoriel Bootstrap
Ce qui précède est le code de production clé du site Web réactif de bootstrap3. J'espère que cela pourra vous donner une référence et j'espère que vous pourrez soutenir Wulin.com plus.