文本颜色控制类

<p class="text-muted">我是muted</p>
<p class="text-primary">我是primary</p
<p class="text-success">我是success</p>
<p class="text-info">我是info</p>
<p class="text-warning">我是warning</p>
<p class="text-danger">我是danger</p>

 栅格化布局（一般包含在container内 让居中显示）

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。 
　　　　　　　<div class="row">
                <div class="col-8 offset-2 text-left text-danger">请务必用中文填写正确</div>
                <div class="col-8 offset-2 marginTop10">
                    <div class="row">
                        <span class="col-3">发票抬头:</span>
                        <span class="col-8"><input type="text"  class="form-control" placeholder="发票抬头"></span>
                    </div>             
                </div>
                <div class="col-8 offset-2 marginTop10">
                    <div class="row">
                        <span class="col-3">纳税人识别号:</span>
                        <span class="col-8"><input type="text"  class="form-control" placeholder="纳税人识别号"></span>
                    </div>             
                </div>
            </div>

 复选框

　　　　　　　　　　<div class="checkbox">
                    <label><input type="checkbox" value="">选项 1</label>
                </div>

                <div class="checkbox">
                    <label><input type="checkbox" value="">选项 2</label>
                </div>

单选框

　　　　　　　　　　<div class="radio">
                    <label>
                        <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 选项 1
                    </label>
                    </div>
                    <div class="radio">
                    <label>
                        <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">选项 2 - 选择它将会取消选择选项 1
                    </label>
                </div>

 加标题与副标题

　　　　　　　　<div class="h3 text-center">About Conference Hotel</div>
            <div class="h6 text-danger text-center">Offensives are filled out by people in the conference hotel accommodation needs </div>

 文本对齐方式

<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-justifyt">两端对齐</p>

 

扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄