This article shares the bootstrap3 responsive website development code for your reference. The specific content is as follows
I used bootstrap3 for the first time and found that it was very supportive of mobile and could quickly develop a website that supports mobile and PC.
The following is an example of this article, the specific code:
The timeline comes from a foreign website, and the css used is as follows
.timeline { list-style: none; padding: 20px 0 20px; position: relative;}.timeline:before { top: 0; bottom: 0; position: absolute; content: " "; width: 3px; background-color: #eeeeee; left: 50%; margin-left: -1.5px;}.timeline > li { margin-bottom: 20px; position: relative;}.timeline > li:before,.timeline > li:after { content: " "; display: table;}.timeline > li:after { clear: both;}.timeline > li:before,.timeline > li:after { content: " "; display: table;}.timeline > li:after { clear: both;}.timeline > li > .timeline-panel { width: 46%; float: left; border: 1px solid #d4d4d4; border-radius: 2px; padding: 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:before { position: absolute; top: 26px; right: -15px; display: inline-block; border-top: 15px solid transparent; border-left: 15px solid #ccc; border-right: 0 solid #ccc; border-bottom: 15px solid transparent; content: " "; }.timeline > li > .timeline-panel:after { position: absolute; top: 27px; right: -14px; display: inline-block; border-top: 14px solid transparent; border-left: 14px solid #fff; border-right: 0 solid #fff; border-bottom: 14px solid transparent; content: " ";}.timeline > li > .timeline-badge { color: #fff; width: 50px; height: 50px; line-height: 50px; font-size: 1.4em; text-align: center; position: absolute; top: 16px; left: 50%; margin-left: -25px; background-color: #999999; z-index: 100; border-top-right-radius: 50%; border-top-left-radius: 50%; border-bottom-right-radius: 50%; border-bottom-left-radius: 50%; border-bottom-left-radius: 50%;}.timeline > li.timeline-inverted > .timeline-panel { float: right;}.timeline > li.timeline-inverted > .timeline-panel:before { border-left-width: 0; border-right-width: 15px; left: -15px; right: auto;}.timeline > li.timeline-inverted > .timeline-panel:after { border-left-width: 0; border-right-width: 14px; left: -14px; right: auto;}.timeline-badge.primary { background-color: #2e6da4 !important;}.timeline-badge.success { background-color: #3f903f !important;}.timeline-badge.warning { background-color: #f0ad4e !important;}.timeline-badge.danger { background-color: #d9534f !important;}.timeline-badge.info { background-color: #5bc0de !important;}.timeline-title { margin-top: 0; color: inherit;}.timeline-body > p,.timeline-body > ul { margin-bottom: 0;}.timeline-body > p + p { margin-top: 5px;}@media (max-width: 767px) { ul.timeline:before { left: 40px; } ul.timeline > li > .timeline-panel { width: calc(100% - 90px); width: -moz-calc(100% - 90px); width: -webkit-calc(100% - 90px); } ul.timeline > li > .timeline-badge { left: 15px; margin-left: 0; top: 16px; } ul.timeline > li > .timeline-panel { float: right; } ul.timeline > li > .timeline-panel:before { border-left-width: 0; border-right-width: 15px; left: -15px; right: auto; } ul.timeline > li > .timeline-panel:after { border-left-width: 0; border-right-width: 14px; left: -14px; right: auto; }}<ul><li> <div><i></i></div> <div> <h4>Anthony Robin・Introduction</h4> <p><small><i></i></small></p> </div> <div> <p>He is a successful billionaire from a self-made career and is the most successful world-class potential development expert today; he assists professional teams, corporate presidents, and heads of state to stimulate potential and overcome various difficulties and lows. He has counseled many royal family members and was hired as personal consultants by former US Presidents Clinton and Princess Diana; he has advised many world celebrities, including South African President Manra, former Soviet President Gorbachev, and world tennis champion Andre Agassi; </p> </div> </li> <li>.................................. </li></ul>During the process, I found that on Android 4.0, width: -webkit-calc(100% - 90px); the support was not very good, and the timeline display was not normal. Later, it was solved with JS.
$(function() { $(window).resize(function() { initTimePanelSize(); }); initTimePanelSize(); function initTimePanelSize(){ width = $(this).width(); //alert(width); if (width <= 767) { $('div.timeline-panel').width($(this).width() - 90); } else { $('div.timeline-panel').css('width', '46%'); } } });Reproduction image:
If you still want to learn in depth, you can click here to learn and attach two exciting topics to you: Bootstrap learning tutorial Bootstrap practical tutorial
The above is the key production code of bootstrap3 responsive website. I hope it can give you a reference and I hope you can support Wulin.com more.