Use bootstrap3 to develop responsive websites and develop responses to bootstrap3

Use bootstrap3 to develop responsive websites and develop responses to bootstrap3

The example in this article shares with you the bootstrap3 responsive website development code for your reference. The details are as follows:

The first time I used bootstrap3, I found that mobile was well supported and a website supporting mobile and PC could soon be developed.

The following is an example of this article. The Code is as follows:

The timeline is 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: be Fore ,. 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% ;}. 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 class = "timeline"> <li> <div class = "timeline-badge"> <I class = "ion-leaf"> </I> </Div> <div class = "timeline-panel" style = "width: 46%; "> <div class =" timeline-heading "> 

During the process, we found that the width:-webkit-calc (4.0-90px) on Android 100% was not well supported, and the timeline display was abnormal. Later, we used JS to solve the problem.
 $(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%');       }     } });    
:


The above is the key production code of the bootstrap3 responsive website. I hope you can give us a reference and support the code.