美文网首页前端
Bootstrap巨幕和旋转图标

Bootstrap巨幕和旋转图标

作者: 马佳乐 | 来源:发表于2022-03-26 14:43 被阅读0次

巨幕

  • .jumbotron来选择巨幕
  • 可在巨幕里加文本或其他内容
    练习:
        <div class="jumbotron">
            <h1 class="display-4">这是一个巨幕的标题</h1>
            <p class="text-muted">这是一个副标题</p>
            <hr />
            <p>这是一个区域</p>
            <p class="lead">
                <button class="btn btn-danger btn-lg">立即查看</button>
            </p>        
        </div>

旋转图标

  • 使用环状旋转器(.spinner-border)作为轻量级的加载指示器
  • 环状旋转器(.spinner-border)使用 currentColor 来设置其 border-color,这意味着你可以使用 文本颜色工具类来自定义其颜色,例如:text-success
  • 增长式旋转器(.spinner-grow)。从技术来说它不是在旋转,但它是反复由小变大的
  • .spinner-grow颜色设置同.spinner-border
  • 可以使用类似 .m-5 的外边距(margin)工具类来添加间距
  • 通过使用 flexbox 工具类、浮动(float)工具类或文本对齐工具类,可以在任何情况下将旋转器(spinner)放置到需要的位置上
  • 通过添加 .spinner-border-sm.spinner-grow-sm 类可以让旋转器(spinner)变得更小,以便在其它组件中使用
  • 在按钮中使用旋转器(spinner)来指示当前正在处理或正在进行的操作。还可以将旋转器(spinner)中包含的(提示性)文字去掉并使用按钮中包含的文字作为提示性信息
    练习:
        <div class="spinner-border"></div>
        <div class="spinner-border text-danger"></div>  
        <div class="spinner-border text-info"></div>
        <div class="spinner-grow text-info"></div>
        <br />
        <div class="text-center">
            <div class="spinner-border text-warning m-5 "></div>
        </div>
        <br />
        <div class="spinner-border text-warning m-5 spinner-border-sm"></div>
        <div class="spinner-grow text-info m-5 spinner-grow-sm"></div>
        <br />
        <button class="btn btn-success">
            <div class="spinner-border spinner-border-sm"></div>
            <span class="ml-2">Loading</span>           
        </button>

相关文章

  • Bootstrap巨幕和旋转图标

    巨幕 用.jumbotron来选择巨幕 可在巨幕里加文本或其他内容练习: 旋转图标 使用环状旋转器(.spinne...

  • 项目-分屏

    该页面由7部分组成: 页面头部的响应式导航栏并设置监听 由巨幕和内联表单构成的标题 bootstrap栅格系统构成...

  • 使用阿里的字体库—iconfont

    由于之前的项目需要,所以使用的bootstrap的字体图标,但是项目越往后,越发现bootstrap的字体图标数量...

  • Bootstrap布局组件——字体图标

    Bootstrap 字体图标(Glyphicons) 字体图标是在 Web 项目中使用的图标字体。字体图标用于显示...

  • Bootstrap 图标

    我就不明白了,官网都写得像傻瓜教程一样,为什么还要让我再写一遍,这个博客只是个笔记而已。 关于bootstrap的...

  • bootstrap巨幕、下拉菜单、隐藏类

    巨幕: 巨幕包着容器 沾满屏幕宽度 jumbotron