发表于: 2018-10-14 17:47:02
1 657
今天完成的事情:完成任务九
明天计划的事情:完成任务十
遇到的问题及收获如下:
1.bootstrap轮播插件
内容可以是图像,视频,内嵌框架等任何你想要放置的内容
使用规则:
给div添加myCarousel
<div id="myCarousel" "carousel slide">
<!-- 轮播(Carousel)指标 -->
<ol "carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" "active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 轮播(Carousel)项目 -->
<div "carousel-inner">
<div "item active">
<img src="img/cm.jpg" alt="First slide">
</div>
<div "item">
<img src="img/cm.jpg" alt="Second slide">
</div>
<div "item">
<img src="img/cm.jpg" alt="Third slide">
</div>
</div>
<!-- 轮播(Carousel)导航 -->
<a "carousel-control left" href="#myCarousel"
data-slide="prev"><span>‹</span></a>
<a "carousel-control right" href="#myCarousel"
data-slide="next"><span>›</span></a>
</div>
2.栅格布局
bootstrap内置的一套响应式,移动设备优先的栅格系统,随着屏幕设备或视口尺寸的增加,系统最多分为12列,他是通过一系列的行row 与列column的组合创建页面布局,然后内容可以放入创建好的布局当中。
使用规则:
行row必须包含在容器container中,一边为其赋予合适的对齐方式和padding
<div class="container"> <div class="row"></div> </div>
使用container-fluid可以使container占据100%宽度
行row中可以添加列column,但列不可以超过平分的总列数,如
<div class="container"> <div class="row"> <div class="col-md-4"></div> <div
他们之间的关系container>row>column
col需要占多少列宽度时,用col-xx-xx表示,比如col-xs-2,表示在超小屏幕下占据2个列宽度
.col-xs-* :超小屏幕、手机 (<768px)
.col-sm-* :小屏幕 平板 (≥768px)
.col-md-* :中等屏幕 桌面显示器 (≥992px)
.col-lg-* :大屏幕 大桌面显示器 (≥1200px)
同时使用多个col-xx 组合拳可以达到不同宽度下的自适应
注意:
“行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)。
CONTAINER Container 有两个作用:
在随时可能的宽度变化(响应式)中提供宽度限制。当页面宽度变化,container 的宽度也随之变化。并且其中的 column 的宽度是基于百分比,所以他们的值不需要变化。
提供一个水平方向的 padding,使其内部的内容不会接触到浏览器的边界,大小为15px。不需要也不应该在 container 中嵌套另一个 container。 同时 row 还有一个很特殊的地方,就是左右各有 -15px 的 margin。这样也就抵消了上面提到的 container 中15px的 padding,COLUMN 每个column 也会有15px的水平方向的 padding,由于 row 的 margin 为-15px,那么位于两边的 column 就碰到了 container 的边界。但是 colunmn 本身又有 15px 的 padding 使得它其中的内容并不会碰到 container,同时 不同column的内容之间就有了30px的槽。
评论