Bootstrap 关于标签,徽章,巨幕,页头,缩略图,自定义内容的使用

 标签

<h3>Example heading <span class="label label-default">New</span></h3>

  

样式一样可以改变

如果标签数量很多怎么办?

如果你有大量的设置为 inline 属性的标签全部放在一个较窄的容器元素内,在页面上展示这些标签就会出现问题,每个标签就会有自己的一个 inline-block 元素(就像图标一样)。解决的办法是为每个标签都设置为display: inline-block; 属性。

 

徽章

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

  

???如果没有新的或未读的信息条目,也就是说不包含任何内容,徽章组件能够自动隐藏(通过CSS的 :empty 选择符实现) 

 

 Bootstrap 提供了内置的样式,让胶囊式导航内处于激活状态的元素所包含的徽章展示相匹配的样式。

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

  

 

巨幕

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

如果需要让巨幕组件的宽度与浏览器宽度一致并且没有圆角,不要在.jumbotron外面放container,在里面可以。

 

页头组件能够为 h1 标签增加适当的空间,并且与页面的其他部分形成一定的分隔。它支持 h1 标签内内嵌 small 元素的默认效果,还支持大部分其他组件(需要增加一些额外的样式)。

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

 

缩略图

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

  

 

自定义内容

 

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</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>

  

媒体对象可以自定义内容

 

label

 

 

转载于:https://www.cnblogs.com/xxml/p/5623490.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在内容下方的底部标签页中使用Bootstrap的Tab插件,可以按照以下步骤进行操作: 1. 首先,需要在HTML代码中创建一个带有tab类的ul元素,作为标签页的导航栏,如下所示: ```html <ul class="nav nav-tabs"> <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li> <li><a href="#tab2" data-toggle="tab">Tab 2</a></li> <li><a href="#tab3" data-toggle="tab">Tab 3</a></li> </ul> ``` 其中,每个li元素代表一个标签页,a元素的href属性指向对应的内容区域,data-toggle属性设置为tab。 2. 接下来,在ul元素后面添加一个带有tab-content类的div元素,用于包含标签页的内容区域,如下所示: ```html <div class="tab-content"> <div class="tab-pane active" id="tab1">Tab 1 Content</div> <div class="tab-pane" id="tab2">Tab 2 Content</div> <div class="tab-pane" id="tab3">Tab 3 Content</div> </div> ``` 其中,每个div元素代表一个标签页的内容区域,id属性与前面a元素的href属性对应,class属性设置为tab-pane,active类用于表示默认显示的标签页。 3. 最后,需要引入Bootstrap的JavaScript文件,并初始化Tab插件,如下所示: ```html <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> <script> $(function() { $('.nav-tabs a').click(function(e) { e.preventDefault(); $(this).tab('show'); }); }); </script> ``` 其中,第一个脚本引入了jQuery库,第二个脚本引入了Bootstrap的JavaScript文件,最后一个脚本用于初始化Tab插件,实现点击标签页切换内容区域的效果。 完成以上步骤后,即可在内容下方的底部实现Bootstrap的Tab插件标签页效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值