Question

我试图像这样创建一个模板：

但我不确定是否必须使用css，bootstrap或两者创建。

HTML：

<div class="square">
    <div class="col-md-12">
        <div class="col-md-2">
            <img src="../Images/logo.png" class="text-left" style="width:120px;"/>
        </div>
        <div class="col-md-5 text-center">
            <h4>Alert PLC</h4>
        </div>
        <div class="col-md-5 text-center">
            <h4>No. Alert: 44445543</h4>
        </div>
        <div class="col-md-10">
            <hr class="line" />
        </div>
    </div>

CSS

body {
background-color: #aeaeae;
}   
.square {
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
}
.line {
height: 4px;
color: #000000;
border-radius: 2px;
background-color: #000000;
}

Answer 1

这是JSfiddle demo 希望它会对你有所帮助。我在html中做了几处修改。

HTML：

<body>
    <div class="square">
        <div class="row">
            <div class="col-md-4">
                <img src="https://image.freepik.com/free-vector/retro-retro-hipster-bicycle-design_23-2147491723.jpg" class="pull-left" style="width:120px;"/>
            </div>
            <div class="col-md-4 text-center">
                <h4>Alert PLC</h4>
            </div>
             <hr class="line" />
            <div class="col-md-4 text-center">
                <h4>No. Alert: 44445543</h4>
            </div>



        </div>
    </div>
</body>

如何使用CSS创建模板？

1 个答案:

HTML：