Bootstrap巨幕和旋转图标

巨幕

• 用.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>