1.书签性标签


<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Service Box Style</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <link rel="stylesheet" href="Semantic-UI-CSS-master/semantic.min.css" type="text/css"></link>
</head>
<body>
    <div class="container">   
      <a class="ui orange ribbon label">性格：</a>
      
      <a class="ui orange right ribbon label">语言</a>     
    </div>
</body>
</html>

2.箱式翻转信息显示动画




<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>Service Box Style</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" type="text/css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
     <link rel="stylesheet" href="lib/bootstrap/css/wgfstyle.css">   
</head>

<body>
    <div class="container">
        <h1>Service box</h1>
        <div class="row">
            <div class="col-md-3 col-sm-6 ">
                <div class="service-box">
                    <div class="service-icon yellow">
                        <div class="front-content">
                            <i class="fa fa-trophy"></i>
                            <h3>design</h3>
                        </div>
                    </div>
                    <div class="service-content">
                        <h3>design</h3>
                        <p>No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6 ">
                <div class="service-box">
                    <div class="service-icon orange">
                        <div class="front-content">
                            <i class="fa fa-anchor"></i>
                            <h3>php</h3>
                        </div>
                    </div>
                    <div class="service-content">
                        <h3>php developer</h3>
                        <p>No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="service-box ">
                    <div class="service-icon red">
                        <div class="front-content">
                            <i class="fa fa-trophy"></i>
                            <h3>Ui Developer</h3>
                        </div>
                    </div>
                    <div class="service-content">
                        <h3>Developer</h3>
                        <p>No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="service-box">
                    <div class="service-icon grey">
                        <div class="front-content">
                            <i class="fa fa-paper-plane-o"></i>
                            <h3>java script</h3>
                        </div>
                    </div>
                    <div class="service-content">
                        <h3>java script</h3>
                        <p>No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure</p>
                    </div>
                </div>
            </div>
        </div>         
    </div>
</body>

</html>


h1 {
    font-size: 25px;
    text-align: left;
    text-transform: capitalize;
}
.service-box {
    position: relative;
    overflow: hidden;
    margin-bottom: 10px;
    perspective: 1000px;
    -webkit-perspective: 1000px;
}
.service-icon {
    width: 100%;
    height: 220px;
    padding: 20px;
    text-align: center;
    transition: all .5s ease;
}
.service-content {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
    width: 100%;
    height: 220px;
    padding: 20px;
    text-align: center;
    transition: all .5s ease;
    background-color: #474747;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    -webkit-transform: translateY(110px) rotateX(-90deg);
    -moz-transform: translateY(110px) rotateX(-90deg);
    -ms-transform: translateY(110px) rotateX(-90deg);
    -o-transform: translateY(110px) rotateX(-90deg);
    transform: translateY(110px) rotateX(-90deg);
}
.service-box .service-icon .front-content {
    position: relative;
    top: 80px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.service-box .service-icon .front-content i {
    font-size: 28px;
    color: #fff;
    font-weight: normal;
}
.service-box .service-icon .front-content h3 {
    font-size: 15px;
    color: #fff;
    text-align: center;
    margin-bottom: 15px;
    text-transform: uppercase;
}
.service-box .service-content h3 {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.service-box .service-content p {
    font-size: 13px;
    color: #b1b1b1;
    margin: 0;
}
.yellow {
    background-color: #ffc000;
}
.orange {
    background-color: #fc7f0c;
}
.red {
    background-color: #e84b3a;
}
.grey {
    background-color: #474747;
}
.service-box:hover .service-icon {
    opacity: 0;
    -webkit-transform: translateY(-110px) rotateX(90deg);
    -moz-transform: translateY(-110px) rotateX(90deg);
    -ms-transform: translateY(-110px) rotateX(90deg);
    -o-transform: translateY(-110px) rotateX(90deg);
    transform: translateY(-110px) rotateX(90deg);
}
.service-box:hover .service-content {
    opacity: 1;
    -webkit-transform: rotateX(0);
    -moz-transform: rotateX(0);
    -ms-transform: rotateX(0);
    -o-transform: rotateX(0);
    transform: rotateX(0);
}


学习参考： 点击打开链接

http://wow.techbrood.com/fiddle/30287

3.Bootstrap中折叠面板panel-group手风琴效果



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                        第 1 部分
                    </a>
                </h4>
            </div>
        
            <div id="collapseOne" class="panel-collapse collapse in">
                <div class="panel-body">
                    1.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur molestias maxime dolor iste maiores illum, eius magnam voluptate debitis facilis corrupti accusamus quia eligendi similique, quod. Iusto minus, officiis aspernatur.
                </div>
            </div>
        </div>
        
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
                        第 2 部分
                    </a>
                </h4>
            </div>

            <div id="collapseTwo" class="panel-collapse collapse">
                <div class="panel-body">
                    2.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur eum molestias ab, iure libero harum magni nisi, soluta. Quia neque nisi atque vitae vel veritatis iusto esse qui alias similique.
                </div>
            </div>
        </div>
    </div>
</body>
</html>
1>每一个标题的超链接a中href属性要与子内容div的属性id保持一直
2>子标签中div的class属性中，collapse in表示子内容开启模式，collapse表示子内容关闭模式

学习参考：点击打开链接

https://www.o6c.com/web/2017/06/29/1023.html

4.进度条

本部分为bootstrap官方提供的（https://v3.bootcss.com/components/）

<1>基本进度条

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

<2>带提示的进度条

将设置了 .sr-only 类的 <span> 标签从进度条组件中移除 类，从而让当前进度显示出来。


<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

<3>根据情境变化效果

进度条组件使用与按钮和警告框相同的类，根据不同情境展现相应的效果。 

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

<4>条纹效果

通过渐变可以为进度条创建条纹效果，IE9 及更低版本不支持。
 
<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

<5>动画效果

为 .progress-bar-striped 添加 .active 类，使其呈现出由右向左运动的动画效果。IE9 及更低版本的浏览器不支持。

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

<6>堆叠效果

把多个进度条放入同一个  .progress  中，使它们呈现堆叠的效果。 

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>