Bootstrap磨難

關(guān)于bootstrap一直有爭議:
好吧其實(shí)不是爭議,就是前端從業(yè)者單方面的瞧不起它,自帶的css模板多爾過于簡單,傻瓜式操作,并不能滿足現(xiàn)在網(wǎng)站或者軟件的需求。
今天第一次試了試,發(fā)現(xiàn)有利有弊吧。也不是說把css簡單化了就一定神功夫。
比如,我今天接了小項(xiàng)目,是做一個(gè)很簡單的填資料的頁面(反正就很簡單)時(shí)間也給的充足,然后我一想我居然沒用過bs,這不應(yīng)該啊,所以就開始了磕磕絆絆的bs教程之路。
我的目標(biāo)是這樣的,使用bs的自帶css做個(gè)表單提交。表單是多行多列的。
而bs的官方教程里只有水平和列分開的實(shí)例。
可這又怎么能難得住少女我呢?直接用form-group和div class="container" div class="row"嵌套組合啊!妥妥的列行分明。
要是不用bs,其實(shí)可以用float浮動(dòng)加table來實(shí)現(xiàn)。
可是table都被人家罵道不行了,我也還是克制一下隨大流。
啊,我的名字是從眾啊~

<form action="get" class="form-horizontal" role="form">
<fieldset>
<div id="legend" class="" >
<legend class="" align="center" style="height: 66px;font-size 22pt;line-height: 66px">學(xué)員檔案登記</legend>
</div>
<div class="container">
<div class="row">
<div class="col-sm-11">
<div class="form-group ">
<lable class="col-sm-1 control-lable" for="danhao">登記單號(hào)</lable>
<div class="col-sm-2">
<input class="form-control" id="danhao" type="text" />
</div>
<lable class="col-sm-1 control-lable" for="dengjiren">登記人</lable>
<div class="col-sm-2">
<input class="form-control" id="dengjiren" type="text" /></div>
<lable class="col-sm-1 control-lable" for="shijian">登記時(shí)間</lable>
<div class="col-sm-2">
<input class="form-control" id="shijian" type="date" />
</div>

  </div>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容