web前端学习笔记（2）

一、组件

10媒体对象

boot提供了很多类，来处理媒体相关的对象
图片 影音

11轮播图

1.轮播图结构
div.carousel data-ride=”carousel”------------------------相对定位

div.carousel-inner----------------------w100 溢出隐藏
div.carousel-item-----------------------display:none
img
2.左右箭头
a.carousel-control-prev/next----------------------a的宽度，背景，位置
span.carousel-control-prev/next-icon---------左右箭头
需要重写↓↓.carousel-control-prev/next中的宽高，位置

a标签要添加自定义属性 data-slide=”prev/next”
事件的目标是最外层div#demo href=”#demo”
3.轮播指示器
ul.carousel-indicators---------------------绝对定位，横向弹性
li-----------------------------------------------宽高，背景色，外边距
我们需要重写li的样式

如果让li有被选中的状态，需要第一个li添加.active。
我们需要重写.active

.carousel-indicators .active{
    background-color:#0aa1ed;
}

点击li激活事件
data-slide-to=”图片下标” 下标从0开始
事件改变的目标
data-target=”#demo”整个轮播最外层div的id

12模态框

覆盖在父窗体上的一个子窗体，用于与用户做一些互动

<h1>模态框</h1>
<button data-toggle="modal" data-target="#mydemo" class="btn btn-danger">打开模态框</button>
<div id="mydemo" class="modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>填写你喜欢的明星</h4>