继续关于jquery中CSS组件的使用：

一、缩略图

与栅格属性一起使用，展示栅格样式的图像、视频等内容，其中可以添加html内容，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fenye</title>
    <link rel="stylesheet" href="./bootstrap-v3.3.7/css/bootstrap.css" />
    <script src="jquery-1.12.4.min.js"></script>
    <script src="./bootstrap-v3.3.7/js/bootstrap.js"></script>

</head>
<body>

<!--缩略图-->
    <div class="row">
      <div class="col-xs-4 col-md-2">
        <div class="thumbnail">
          <img src="./pic/1.png" alt="图1">
          <div class="caption">
            <h3>新闻图片【1】</h3>
            <p>这是关于新闻的简要说明。。。</p>
            <p>
                <a href="#" class="btn btn-primary" role="button">Button</a>
                <a href="#" class="btn btn-default" role="button">Button</a>
            </p>
          </div>
        </div>
      </div>
      <div class="col-xs-4 col-md-2">
        <div class="thumbnail">
          <img src="./pic/1.png" alt="图1">
          <div class="caption">
            <h3>新闻图片【1】</h3>
            <p>这是关于新闻的简要说明。。。</p>
            <p>
                <a href="#" class="btn btn-primary" role="button">Button</a>
                <a href="#" class="btn btn-default" role="button">Button</a>
            </p>
          </div>
        </div>
      </div>
      <div class="col-xs-4 col-md-2">
        <div class="thumbnail">
          <img src="./pic/1.png" alt="图1">
          <div class="caption">
            <h3>新闻图片【1】</h3>
            <p>这是关于新闻的简要说明。。。</p>
            <p>
                <a href="#" class="btn btn-primary" role="button">Button</a>
                <a href="#" class="btn btn-default" role="button">Button</a>
            </p>
          </div>
        </div>
      </div>
    </div>
</body>
</html>
View Code

 二、警告框

 有四种颜色可选，其中文本可以设置相对应的颜色样式，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fenye</title>
    <link rel="stylesheet" href="./bootstrap-v3.3.7/css/bootstrap.css" />
    <script src="jquery-1.12.4.min.js"></script>
    <script src="./bootstrap-v3.3.7/js/bootstrap.js"></script>

</head>
<body>
<!--四种可选警告框-->
    <div class="alert alert-success" role="alert">...</div>
    <div class="alert alert-info" role="alert">...</div>
    <div class="alert alert-warning" role="alert">...</div>
    <div class="alert alert-danger" role="alert">...</div>
<!--实例-->
    <div class="alert alert-warning alert-dismissible" role="alert">
      <!--右侧关闭 X  -->
      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
          <span aria-hidden="true">&times;</span>
      </button>
      <strong>Warning!</strong>
      <!--文本设置相对应颜色  -->
      <a class="alert-link">Better check yourself, you're not looking too good.</a>
    </div>
</body>
</html>
View Code

三、进度条

 可以设置是否显示数字，设置颜色、条纹、动画、堆叠、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fenye</title>
    <link rel="stylesheet" href="./bootstrap-v3.3.7/css/bootstrap.css" />
    <script src="jquery-1.12.4.min.js"></script>
    <script src="./bootstrap-v3.3.7/js/bootstrap.js"></script>

</head>
<body>
<!--无信息提示的进度条-->
    <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>
<!--带有信息提示的进度条-->
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="60"
           aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
        60%
      </div>
    </div>
<!--进度很低时的设置最小显示宽度-->
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="0"
           aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
        0%
      </div>
    </div>
    <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="4"
           aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
       2%
      </div>
    </div>
<!--可以设置四种颜色、条纹、动画-->
    <!--条纹-->
    <div class="progress">
      <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="10"
           aria-valuemin="0" aria-valuemax="100" style="width: 10%;">
        10%
      </div>
    </div>
    <!--颜色-->
    <div class="progress">
      <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="30"
           aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
        30%
      </div>
    </div>
    <!--动画-->
    <div class="progress">
      <div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" aria-valuenow="80"
           aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
        80%
      </div>
    </div>
    <div class="progress">
      <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="100"
           aria-valuemin="0" aria-valuemax="100" style="width: 100%;">
        100%
      </div>
    </div>        

</body>
</html>
View Code

四、媒体对象

图片和文本的结合，可以设置在列表内，评论区常使用，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fenye</title>
    <link rel="stylesheet" href="./bootstrap-v3.3.7/css/bootstrap.css" />
    <script src="jquery-1.12.4.min.js"></script>
    <script src="./bootstrap-v3.3.7/js/bootstrap.js"></script>
    <style>
        body{
            padding:30px;
        }
    </style>
</head>
<body>
    <div style="width:30%;">
        <p style="color:red;">独立媒体对象，可以进行前面图标位置设置：上端对齐、居中、底部对齐，</p>
        <div class="media">
      <div class="media-left media-middle">
        <a href="#">
          <img class="media-object" src="./pic/view.png" alt="简图">
        </a>
      </div>
      <div class="media-body">
        <h4 class="media-heading">Media heading</h4>
          Cras sit amet nibh libero, in gravida nulla.
          Nulla vel metus scelerisque ante sollicitudin commodo.
          Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
          Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      </div>
    </div>

        <div class="media">
      <div class="media-left media-bottom">
        <a href="#">
          <img class="media-object" src="./pic/view.png" alt="简图">
        </a>
      </div>
      <div class="media-body">
        <h4 class="media-heading">Media heading</h4>
          Cras sit amet nibh libero, in gravida nulla.
          Nulla vel metus scelerisque ante sollicitudin commodo.
          Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
          Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      </div>
    </div>

        <div class="media">
      <div class="media-left">
        <a href="#">
          <img class="media-object" src="./pic/view.png" alt="简图">
        </a>
      </div>
      <div class="media-body">
        <h4 class="media-heading">Media heading</h4>
          Cras sit amet nibh libero, in gravida nulla.
          Nulla vel metus scelerisque ante sollicitudin commodo.
          Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
          Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      </div>
    </div>
    </div>

    <p style="color:red;">在列表内使用媒体对象组件</p>
    <ul style="width:30%;">

        <li class="media">
          <div class="media-left">
            <a href="#">
              <img class="media-object" src="./pic/view.png" alt="简图">
            </a>
          </div>
          <div class="media-body">
            <h4 class="media-heading">Media heading</h4>
              Cras sit amet nibh libero, in gravida nulla.
              Nulla vel metus scelerisque ante sollicitudin commodo.
              Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
              Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
          </div>
        </li>

        <li class="media">
          <div class="media-left">
            <a href="#">
              <img class="media-object" src="./pic/view.png" alt="简图">
            </a>
          </div>
          <div class="media-body">
            <h4 class="media-heading">Media heading</h4>
              Cras sit amet nibh libero, in gravida nulla.
              Nulla vel metus scelerisque ante sollicitudin commodo.
              Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
              Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
          </div>
        </li>

        <li class="media">
          <div class="media-left">
            <a href="#">
              <img class="media-object" src="./pic/view.png" alt="简图">
            </a>
          </div>
          <div class="media-body">
            <h4 class="media-heading">Media heading</h4>
              Cras sit amet nibh libero, in gravida nulla.
              Nulla vel metus scelerisque ante sollicitudin commodo.
              Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
              Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
          </div>
        </li>
    </ul>

</body>
</html>
View Code

五、列表组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fenye</title>
    <link rel="stylesheet" href="./bootstrap-v3.3.7/css/bootstrap.css" />
    <script src="jquery-1.12.4.min.js"></script>
    <script src="./bootstrap-v3.3.7/js/bootstrap.js"></script>
    <style>
        body{
            padding:30px;
        }
    </style>
</head>
<body>
<!--列表组-->
    <div class="list-group" style="width:30%;">
        <!--可以嵌套徽章-->
      <a href="#" class="list-group-item">
          <span class="badge">14</span>
          Cras justo odio
      </a>
        <!--a标签进行连接-->
      <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
        <!--列表元素可以是button-->
      <button class="list-group-item">Morbi leo risus</button>
        <!--设置情景-->
      <button class="list-group-item list-group-item-danger">Morbi leo risus</button>
        <!--列表元素可以被禁用-->
      <a href="#" class="list-group-item disabled">Porta ac consectetur ac</a>
        <!--设置active状态-->
      <a href="#" class="list-group-item active">Vestibulum at eros</a>
        <!--可以是任何html内容-->
      <a href="#" class="list-group-item">
        <h4 class="list-group-item-heading">List group item heading</h4>
        <p class="list-group-item-text">...</p>
      </a>
    </div>

</body>
</html>
View Code

六、面板

面板分为头部、主体、注释三部分，可以嵌套列表组，可以设计颜色样式，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>list_group</title>
    <link rel="stylesheet" href="./bootstrap-v3.3.7/css/bootstrap.css" />
    <script src="jquery-1.12.4.min.js"></script>
    <script src="./bootstrap-v3.3.7/js/bootstrap.js"></script>
    <style>
        body{
            padding:30px;
        }
    </style>
</head>
<body>
<!--面板-->
    <div class="panel panel-default panel-primary">
        <!--连接需要放在头部标签内-->
      <div class="panel-heading">Panel heading without title</div>
        <!--面板主体-->
      <div class="panel-body">Panel content</div>
      <div class="panel-body">Panel content</div>
        <!--带列表组-->
      <ul class="list-group">
        <li class="list-group-item">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Morbi leo risus</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Vestibulum at eros</li>
      </ul>
        <!--尾部注释区不受样式影响-->
      <div class="panel-footer">Panel footer</div>
    </div>
</body>
</html>
View Code