您的位置：首页 > Web前端 > BootStrap

bootstrap第四天

2015-09-14 09:12 471 查看
一、图片形状

       通过img元素添加不同的类，可以让图片显示不同的形状

实例：

      <img src="img/10.jpg" alt="no images" class="img-rounded">

    <img src="img/10.jpg" alt="no images" class="img-circle">

    <img src="img/10.jpg" alt="no images" class="img-thumbnail">

二、给不同的<p>标签添加不同的颜色

      类似按钮的颜色，只不过是类不同而已

实例：

     <p class="text-muted">muted</p>

    <p class="text-primary">primary</p>

    <p class="text-success">success</p>

    <p class="text-info">info</p>

    <p class="text-warning">warning</p>

    <p class="text-danger">danger</p>

三、给<p>标签添加不同的背景颜色

     与给<p>标签添加不同的颜色类似

实例：

    <p class="bg-primary">primary primary primary primary</p>

    <p class="bg-success">success success success success</p>

    <p class="bg-info">info info info info info info info</p>

    <p class="bg-warning">warning warning warning warning</p>

    <p class="bg-danger">danger danger danger danger danger</p>

四、快速浮动

    快速浮动分为居左，居右，居中，clearfix，clearfix就是style中的clear:both;

实例：

    <div class="pull-left">

        <p>一花一世界，一叶一追寻，一曲一首叹，一生为一人</p>

    </div>

    <div class="clearfix"><div>

    <div class="pull-right">

        <p>轻轻的我走了，正如我轻轻的来，我轻轻地挥手，不带走一片云彩</p>

    </div>

    <div style="width:200px;height:200px" class="center-block bg-danger"></div>

完整代码：

    <!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->

    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>

      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

    <style>

        img{

        width:400px;

        height:300px;

        }

    </style>

  </head>

  <body>

    <img src="img/10.jpg" alt="no images" class="img-rounded">

    <img src="img/10.jpg" alt="no images" class="img-circle">

    <img src="img/10.jpg" alt="no images" class="img-thumbnail">

    <hr>

    <p class="text-muted">muted muted muted muted muted muted</p>

    <p class="text-primary">primary primary primary primary</p>

    <p class="text-success">success success success success</p>

    <p class="text-info">info info info info info info info</p>

    <p class="text-warning">warning warning warning warning</p>

    <p class="text-danger">danger danger danger danger danger</p>

    <hr>

    <p class="bg-primary">primary primary primary primary</p>

    <p class="bg-success">success success success success</p>

    <p class="bg-info">info info info info info info info</p>

    <p class="bg-warning">warning warning warning warning</p>

    <p class="bg-danger">danger danger danger danger danger</p>

    <hr>

    <div class="col-xs-4 bg-danger">

        <input type="button" class="btn btn-success">

        <button type="button" class="close">

            <span aria-hidden="true">×</span>

            <span class="sr-only">close</span>

        </button>

    </div>

    <hr>

    <div class="pull-left">

        <p>一花一世界，一叶一追寻，一曲一首叹，一生为一人</p>

    </div>

    <div class="clearfix"><div>

    <div class="pull-right">

        <p>轻轻的我走了，正如我轻轻的来，我轻轻地挥手，不带走一片云彩</p>

    </div>

    <div style="width:200px;height:200px" class="center-block bg-danger"></div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src="js/bootstrap.min.js"></script>

  </body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航