发表于： 2017-03-28 21:58:03
5 526
今天做了什么： 今天再写任务八第一个页面。。
明天要做什么： 写完一最好还能写写二。。
今天的问题：今天的问题都比较细碎，而且大部分是比如文字不能居中，最后师兄告诉我框架里面有一个类名能解决之类。
感悟：感觉自从用了框架以来就不会写了，什么都不敢用，用了也会出问题，而且很丑陋。而且没有介绍的那么好用。。
bootstrap有哪些常用组件
一、背景介绍
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。
二、知识剖析
什么是组件：一般是指软件系统的一部分，承担了特定的职责，可以独立于整个系统进行开发和测试，一个良好设计的组件应该可以在不同的软件系统中被使用(可复用)。 例如bootstrap的轮播图就是一个组件。他可以应用在不同的网站开发中。
目前常用的bootstrap组件：轮播图，下拉菜单，响应式导航栏。
三、常见问题
如何使用bootstrap组件做一个轮播图？
四、解决方案
一个轮播图的组成部分：
整个轮播是放在一个div .carousel和.slide的div中的。给这个容器定义一个 ID 值，方便后面采用 data 属性来声明触发。data-ride 属性：取值 carousel，并且将其定义在 carousel 上。
1.轮播计数器
其表现形式为底部小圆点。在容器 div.carousel 的内部添加轮播图片计算器。 采用 carousel-indicators 样式，其主要功能是显示当前图片的播放顺序。 一般采用有序列表来制作。
2.轮播图片容器
每多一张需要轮播的图片就多一个item。 第一个item需要添加active。
3.轮播控制器
data-slide：取值包括 prev，next。 prev表示向后滚动，next 表示向前滚动。该属性值同样定义在轮播图控制器的 a 链接上
五、具体代码
<div id="slidershow" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li class="active" data-target="#slidershow" data-slide-to="0"></li>
<li data-target="#slidershow" data-slide-to="1"></li>
<li data-target="#slidershow" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<a href="#"><img src="../img/captain.png"></a>
<div class="carousel-caption">
<p>死亡の潮の潮、私の古い友達を探して</p>
</div>
</div>
<div class="item">
<a href="#"><img src="../img/shadow.png"></a>
<div class="carousel-caption">
<p>私の存在を感じるでしょう</p>
</div>
</div>
<div class="item">
<a href="#"><img src="../img/sven.png"></a>
<div class="carousel-caption">
<p>孤独の死、私は孤独のように生きている</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#slidershow" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#slidershow" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
返回列表
评论