<p class="text-muted">文本颜色展示</p>
<p class="text-primary">文本颜色展示</p>
<p class="text-success">文本颜色展示</p>
<p class="d">文本颜色展示</p>

• 文本对齐

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

• 表格

<table class="table table-bordered table-striped"> # 默认的是table类, 然后table-borderd是添加边框,striped是条纹状,table-hover 是hover的时候显示颜色的变化
                <tr>
                    <td>id</td>
                    <td>name</td>
                    <td>age</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>alex</td>
                    <td>19</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>blex</td>
                    <td>30</td>
                </tr>
            </table>

• 状态类,有active,info warning,success,danger 5个 都是默认的样式
  
• 响应式表格
  默认表格,如果文字太多,会用内容填充表格
  
  但是如果在table类外面再加一层table-responsive,可以让表格变成响应式,当在小屏幕上会显示水平滚动条,显示剩余的内容.
  

    <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-12 col-lg-offset-3 col-md-offset-3 table-responsive">
            <table class="table table-bordered table-striped">
                <tr class="success">
                    <td>4</td>
                    <td>elex</td>
                    <td>40</td>
                    <td>响应式测试响应式测试响应式测试响应式测试响应式测试响应式测试响应式测试响应式测试响应式测试</td>
                </tr>
            </table>

        </div>


    </div>

• 表单

单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 、 和 <select> 元素都将被默认设置宽度属性为 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。</p><br /> <pre><code><form><br /> <div class=”form-group”><br /> <label for=”exampleInputEmail1″>Email address</label><br /> <input type=”email” class=”form-control” id=”exampleInputEmail1″ placeholder=”Email”><br /> </div><br /> <div class=”form-group”><br /> <label for=”exampleInputPassword1″>Password</label><br /> <input type=”password” class=”form-control” id=”exampleInputPassword1″ placeholder=”Password”><br /> </div><br /> <div class=”form-group”><br /> <label for=”exampleInputFile”>File input</label><br /> <input type=”file” id=”exampleInputFile”><br /> <p class=”help-block”>Example block-level help text here.</p><br /> </div><br /> <div class=”checkbox”><br /> <label><br /> <input type=”checkbox”> Check me out<br /> </label><br /> </div><br /> <button type=”submit” class=”btn btn-default”>Submit</button><br /> </form><br /> </code></pre><br /> <ul><br /> <li><br /> <h1 id=”按钮样式”>按钮样式</h1><br /> </li><br /> </ul><br /> <pre><code><!– Standard button –><br /> <button type=”button” class=”btn btn-default”>（默认样式）Default</button></p> <p><!– Provides extra visual weight and identifies the primary action in a set of buttons –><br /> <button type=”button” class=”btn btn-primary”>（首选项）Primary</button></p> <p><!– Indicates a successful or positive action –><br /> <button type=”button” class=”btn btn-success”>（成功）Success</button></p> <p><!– Contextual button for informational alert messages –><br /> <button type=”button” class=”btn btn-info”>（一般信息）Info</button></p> <p><!– Indicates caution should be taken with this action –><br /> <button type=”button” class=”btn btn-warning”>（警告）Warning</button></p> <p><!– Indicates a dangerous or potentially negative action –><br /> <button type=”button” class=”btn btn-danger”>（危险）Danger</button></p> <p><!– Deemphasize a button by making it look like a link while maintaining button behavior –><br /> <button type=”button” class=”btn btn-link”>（链接）Link</button><br /> </code></pre><br /> <p><img src=”https://img2020.cnblogs.com/blog/1610779/202108/1610779-20210808190023178-260700106.png” alt=”” loading=”lazy”></p><br />