ca88Bootstrap模仿起筷首页效果

作者:ca88

若是我们还想深切学习,能够点击这里实行学习,再为大家附3个美好的专项论题:

以上正是本文的全体内容,希望对大家学习Bootstrap程序设计有所帮助。

做的长河中发觉Android 4.0 上对width: -webkit-calc(百分之百 - 90px); 援助得不是很好,时间线显得不正规,后来用JS来减轻了

倘使大家还想深切学习,能够点击这里展开学习,再为我们附七个能够的专项论题:Bootstrap学习课程 Bootstrap实战教程

上述正是本文的全体内容,希望对我们学习Bootstrap有所支持。

后一节我们要在导航条的花花世界做一张轮播图,自动播放最新的机要动态。

尽管大家还想深切学习,可以点击这里实行学习,再为大家附五个名特别减价新的专项论题:Bootstrap学习课程 Bootstrap实战教程

为了给导航栏加多响应式性子,您要折叠的内容必须包裹在含蓄 classes .collapse、.navbar-collapse 的 <div> 中。折叠起来的导航栏实际上是贰个涵盖class .navbar-toggle 及七个 data- 成分的按键。第多少个是 data-toggle,用于告诉 JavaScript 须求对按键做什么样,第二个是 data-target,提醒要切换来哪贰个成分。多个包涵class .icon-bar 的 <span> 创建所谓的罗马开关。这个会切换为 .nav-collapse <div> 中的成分。为了促成上述这个意义,您必须包蕴Bootstrap 折叠(Collapse)插件。
效果图:

Bootstrap实战教程

焦点导航组件 响应式:

.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">
   <h4 class="timeline-title">安东尼罗宾·简介</h4>
   <p><small class="text-muted"><i class="glyphicon glyphicon-time"></i></small></p>
  </div>
  <div class="timeline-body">
   <p>他是一位白手起家事业成功的亿万富翁,是当今最成功的世界级潜能开发专家;他协助职业球队、企业总裁、国家元首激发潜能,渡过各种困境及低潮。曾辅导过多位皇室的家庭成员,被美国前总统克林顿、戴安娜王妃聘为个人顾问;曾为众多世界名人提供咨询,包括南非总统曼徳拉、前苏联总统戈尔巴乔夫、世界网球冠军安德烈•阿加西等;

   </p>
  </div>
  </div>
 </li>
 <li>......................</li>
</ul>

ca88 1

Bootstrap学习课程

假如我们还想深远学习,能够点击这里开始展览学习,再为我们附3个特出的专题:

本文实例为大家享用了bootstrap3响应式网址开辟代码,供大家参考,具体内容如下

上述就是本文的全部内容,希望对我们的读书抱有支持。

本文由ca88发布,转载请注明来源

关键词: ca88网址 ca亞洲城