Bootstrap组件学习笔记（五）——标签、徽章和巨幕

最新推荐文章于 2022-12-21 08:15:00 发布

小巷下起了雨

最新推荐文章于 2022-12-21 08:15:00 发布

阅读量760

点赞数

分类专栏： front-end(bootstrap) 文章标签：标签徽章 badge bootstrap 巨幕

本文链接：https://blog.csdn.net/qq_28057577/article/details/77689425

版权

front-end(bootstrap) 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

前言：

这一篇学习的内容比较简单，就省去目录了，直接撸一个示例。

1.示例效果图

2.示例代码

 
    
  
 
         
       
 
       
 
        
 
        
 
        
 
       
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>组件</title>
    <!--引入bootstrap样式文件-->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!--引入jq（必须在bootstrap.min.js文件之前）-->
    <script type="application/javascript" src="js/jquery-3.2.0.js"></script>
    <!--引入bootstrap js-->
    <script type="application/javascript" src="js/bootstrap.min.js"></script>
</head>
<body style="margin: 60px">
   <div class="panel panel-success">
        <div class="panel-heading">
            标签
        </div>
        <div class="panel-body">
            <h6>标签大小</h6><hr/>
            <div>
                <h1>h1 <span class="label label-default">New</span> </h1>
                <h2>h2 <span class="label label-default">New</span> </h2>
                <h3>h3 <span class="label label-default">New</span> </h3>
                <!--注意这里添加display: inline-block与不添加的区别-->
                <h4>h4 <span class="label label-default" style="display: inline-block">New</span> </h4>
            </div>
            <hr/>
            <h6>标签颜色</h6><hr/>
            <div>
                <span class="label label-default">Default</span>
                <span class="label label-primary">Primary</span>
                <span class="label label-success">Success</span>
                <span class="label label-info">Info</span>
                <span class="label label-warning">Warning</span>
                <span class="label label-danger">Danger</span>
            </div>
        </div>
    </div>
   <div class="panel panel-info">
       <div class="panel-heading">
           徽章
       </div>
       <div class="panel-body">
            <a href="#">链接 <span class="badge">100</span> </a>
            <button class="btn btn-success" type="button">
                消息 <span class="badge">100</span>
            </button>
       </div>
   </div>
   <div class="panel panel-warning">
       <div class="panel-heading">
           巨幕
       </div>
       <div class="panel-body container">
            <div class="jumbotron">
                <h2>今日头条挖角知乎大V，这场突袭会改变什么？</h2>
                <p>知乎啊知乎，当别的平台的大V都能挣到真金白银时，你凭什么傲视独立？头条啊，头条，你可知道，你签下的那些知乎大V，很多
                    人最后都是找一个实习生来帮忙写答案的。</p>
                <p><a class="btn btn-info" role="button" href="#">了解详情</a> </p>
            </div>
       </div>
   </div>
   <!--将jumbotron类属性放到最外部，在jumbotron内部添加container属性会有全屏的效果，可以对比上面-->
   <div class="jumbotron">
       <div class="container">
           <h2>今日头条挖角知乎大V，这场突袭会改变什么？</h2>
           <p>知乎啊知乎，当别的平台的大V都能挣到真金白银时，你凭什么傲视独立？头条啊，头条，你可知道，你签下的那些知乎大V，很多
               人最后都是找一个实习生来帮忙写答案的。</p>
           <p><a class="btn btn-info" role="button" href="#">了解详情</a> </p>
       </div>
   </div>
</body>
</html>
 
   