bootstrap小笔记 各种组件(轮播图/模态框/菜单监听....)

这篇博客详细介绍了Bootstrap的各种组件,包括页头、巨幕、缩略图、警告弹框、内嵌、进度条、媒体对象、列表、面板、模态框、下拉菜单的滚动监听、导航菜单、按钮、弹出框提示、折叠菜单以及轮播图的实现和应用。通过实例代码展示了如何使用这些组件,帮助读者更好地理解和运用Bootstrap。
摘要由CSDN通过智能技术生成

Bootstrap----部分组件类名的应用

页头:  page-header

巨幕: jumbotron  ( 展示一个网页关键区域)

缩略图: thumbnail(极小的)  (可以做出九宫格的效果) 
    部分代码:<!-- 尽量不要给img设置属性 可以套一个div -->
                        <div class="thumbnail">
                                <img src="jinmu.jpg" alt="" width="300">
                        </div>

警告-弹框 : alert(提示 通知)
        </div><div class="alert alert-warning">
            禁止访问
            <!-- close 布局 给警告框设置了一个关闭的按钮将警告框关闭 -->
            <button class="close" data-dismiss="alert">
                <span>&times;</span>
            </button>
        </div>

内嵌 : well

进度条 : progress  

   该例子添加了条纹,动画,堆叠等效果

 <div class="progress">
        <div class="progress-bar progress-bar-success progress-bar-striped active" style="width: 60%;"> 60%</div>
        <div class="progress-bar progress-bar-danger" style="width: 30%;">30%</div>
        <div class="progress-bar progress-bar-warning" style="width: 10%;">10%</div>
 </div>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值