Using BOOTSTRAP3 to develop responsive web _javascript tips

This example for you to share the BOOTSTRAP3 Response Web Development code for your reference, the specific contents are as follows

Using BOOTSTRAP3 for the first time, we found a good support for mobile and could quickly develop a Web site that supports mobile and PC-side.

Here is an example of this article, specific code:

The timeline comes from a foreign website, using the CSS below

. 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%;

}. 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" > 
 

In the process of doing Discovery Android 4.0 on the width:-webkit-calc (100%-90px); Support is not very good, timeline display is not normal, and later used JS to solve the

 $ (function () {
 $ (window). Resize (function () {
  inittimepanelsize ();
 });
 Inittimepanelsize ();
 function Inittimepanelsize () {
  width = $ (this). width ();
  alert (width);
  if (width <= 767) {
   $ (' Div.timeline-panel '). Width ($ (this). Width ()-m);
  } else {
   $ (' Div.timeline-panel '). CSS (' width ', ' 46% ');
  }
  }
 ); 

Effect Chart:

If you want to further study, you can click here to learn, and then attach two wonderful topics: Bootstrap Learning Tutorials Bootstrap Practical course

The above is BOOTSTRAP3 Response Web site key Production code, I hope to give you a reference, but also hope that we support the cloud-dwelling community.