Bootstrap是一个免费的web前端框架，它将HTML、CSS、Javascript结合到一起，制订了一系列的前端开拓规则，使设计网页就像搭积木一样大略。
本日我们就随着福哥来学习一下Bootstrap框架的利用技巧，我们的TFPHP框架会将Bootstrap引入进来作为框架的前端模块的支持。
安装Bootstrap很大略，便是从官网下载源码包放到自己的项眼前面，通过link和script引入CSS和Javascript库文件即可。
下载
官网下载地址
https://getbootstrap.com/
这里面有压缩版本的和源码版本的，我们每个都下载一下。压缩版本用在生产环境上面，而源码版本用在开拓环境上面。
安装
我们直策应用压缩版本即可，将压缩包解压之后将css目录和js目录复制到TFPHP框架下面就可以利用了。
末了便是在视图模板里面引入Bootstrap的CSS文件，就算安装完成了。
<!DOCTYPEhtml><html><head><title>Bootstrap框架演示</title><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/><linkrel="stylesheet"type="text/css"href="<%$TFReq->server->BASE_URI%>css/bootstrap.min.css"></head><body></body></html>根本
row
行样式，可以用来润色一个整行容器工具，这个工具里面一样平常情形下须要放置col样式工具。
col
列样式，可以用来润色一个块容器工具。col样式有sm、md、lg、xl几个规格，分别表示小、中、大、超大尺寸。
col样式末了有一个列宽度数字，最小是1，最大是12。一个row样式工具里面可以放置多个col样式工具，只要数字加一起不超过12就可以了。
col样式末了还可以是auto，便是表示这个工具的宽度是自动的。
btn
按钮样式，可以用来润色按钮工具。
btn-xxx
按钮尺寸样式，可以用来设置按钮的大小。btn-xxx有xs、sm、md、lg几个尺寸，分别表示超小、小、中、大尺寸。
btn-yyy
按钮颜色样式，可用来设置按钮的样式，是Bootstrap设置的内置颜色，很俊秀。包括：btn-info、btn-warning、btn-danger、btn-white、btn-dark等等。
table
表格样式，可以用来润色表格工具。
利用表单
这是一个用户登录的表单的示例。
<bodystyle="background:#ccc;padding:12px;"><divclass="row"style="width:280px;background:#fff;padding:12px;margin:0auto;"><divclass="col-sm-12"><h3class="m-t-nonem-b">登录</h3><p>请输入精确的用户名和密码。</p><divclass="form-group"><label>用户名</label><inputtype="text"class="form-control"/></div><divclass="form-group"><label>密码</label><inputtype="password"class="form-control"/></div><div><buttonclass="btnbtn-primary">登录</button></div></div></div></body>
表格
这是一个表格的示例，展示用户信息表的样式。
<bodystyle="background:#ccc;padding:12px;"><divclass="row"style="width:280px;background:#fff;padding:12px;margin:0auto;"><divclass="col-sm-12"><h3class="m-t-nonem-b">用户管理</h3><p>这是一个用户信息表。</p><tableclass="table"><thead><tr><th>ID</th><th>用户名</th><th>创建日期</th></tr></thead><tbody><tr><td>3</td><td>福哥</td><td>2020/11/17</td></tr><tr><td>1</td><td>TFPHP</td><td>2020/06/10</td></tr><tr><td>2</td><td>TFHTML</td><td>2020/10/07</td></tr></tbody></table></div></div></body>
综合
这是一个综合的样式，是一个博客日志的样式。
<bodystyle="background:#ccc;padding:12px;"><divclass="row"style="width:280px;background:#fff;padding:12px000;margin:0auto;"><divclass="col-sm-12"><aclass="pull-left"><imgsrc="https://tongfu.net/img3/home/icon/2020/1117/17/c8528cb09e22e75e.jpg"style="width:50px;height:50px;"/></a><divclass="media-body"style="display:inline-block;width:auto;vertical-align:top;"><a><strong>鬼谷子叔叔</strong></a><br/><spanclass="small">版主</span></div></div><divclass="col-lg-12"style="padding:12px;"><p>这是一个综合的示例，它展示了博客日志的样式。这是一个综合的示例，它展示了博客日志的样式。这是一个综合的示例，它展示了博客日志的样式。这是一个综合的示例，它展示了博客日志的样式。这是一个综合的示例，它展示了博客日志的样式。这是一个综合的示例，它展示了博客日志的样式。</p><divclass="btn-group"><buttonclass="btnbtn-dangerbtn-xs"style="font-size:12px;">赞</button><buttonclass="btnbtn-warningbtn-xs"style="font-size:12px;">踩</button><buttonclass="btnbtn-infobtn-xs"style="font-size:12px;">回答</button></div></div></div></body>
本日童鞋们和福哥一起学习了Bootstrap框架的利用技巧。大家会有一种觉得利用Bootstrap可以很好的完成大部分网页的设计需求，但是我们的网页不能完备利用Bootstrap堆积起来，还须要自己添加一些自定义的样式对网页元素进行微调。
https://m.tongfu.net/home/35/blog/512897.html
