介绍
介绍
Bootstrap是一个免费的web前端框架,它将HTML、CSS、Javascript结合到一起,制定了一系列的前端开发规则,使设计网页就像搭积木一样简单。
今天我们就跟着福哥来学习一下Bootstrap框架的使用技巧,我们的TFPHP框架会将Bootstrap引入进来作为框架的前端模块的支持。
安装
安装Bootstrap很简单,就是从官网下载源码包放到自己的项目下面,通过link和script引入CSS和Javascript库文件即可。
下载
官网下载地址
https://getbootstrap.com/
![51d4bab385455a4232788002fefe6d5f.png](https://i-blog.csdnimg.cn/blog_migrate/a540bc5c3cf643445a1d0386f290e082.jpeg)
这里面有压缩版本的和源码版本的,我们每个都下载一下。压缩版本用在生产环境上面,而源码版本用在开发环境上面。
![4902a19a8901f318ae6b6945e8a1dd40.png](https://i-blog.csdnimg.cn/blog_migrate/0b7ccdaf0e3f1d4350580d50028a500c.jpeg)
安装
我们直接使用压缩版本即可,将压缩包解压之后将css目录和js目录复制到TFPHP框架下面就可以使用了。
![2b23047db538d5dc59b4415408d35aca.png](https://i-blog.csdnimg.cn/blog_migrate/035f121963c14c376e7c62f5c85c0e78.jpeg)
![8c38c5f359c5dad3d3b1c63d349584a7.png](https://i-blog.csdnimg.cn/blog_migrate/e661d0664f2fe695d6e7bec3b32a9ee2.jpeg)
最后就是在视图模板里面引入Bootstrap的CSS文件,就算安装完成了。
html> Bootstrap框架演示 server->BASE_URI %>css/bootstrap.min.css">
基础
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
表格样式,可以用来修饰表格对象。
使用
表单
这是一个用户登录的表单的示例。
登录
请输入正确的用户名和密码。
用户名
密码
登录
![569ae44481716a0bacfc7f499b3e7025.png](https://i-blog.csdnimg.cn/blog_migrate/cc785705b2314750b9dca4a117110402.jpeg)
表格
这是一个表格的示例,展示用户信息表的样式。
用户管理
这是一个用户信息表。
ID 用户名 创建日期 3 福哥 2020/11/17 1 TFPHP 2020/06/10 2 TFHTML 2020/10/07
![d4101164753dd914d088f068f4364f9f.png](https://i-blog.csdnimg.cn/blog_migrate/3338c918f7ca48864865b7a6a5529be2.jpeg)
综合
这是一个综合的样式,是一个博客日志的样式。
鬼谷子叔叔版主
这是一个综合的示例,它展示了博客日志的样式。 这是一个综合的示例,它展示了博客日志的样式。 这是一个综合的示例,它展示了博客日志的样式。 这是一个综合的示例,它展示了博客日志的样式。 这是一个综合的示例,它展示了博客日志的样式。 这是一个综合的示例,它展示了博客日志的样式。
赞 踩 回复
![c81a1cead0c231370e1f72762dfac7f9.png](https://i-blog.csdnimg.cn/blog_migrate/83ef27a1fcda03c1a64a88006156fa56.jpeg)
总结
今天童鞋们和福哥一起学习了Bootstrap框架的使用技巧。大家会有一种感觉使用Bootstrap可以很好的完成大部分网页的设计需求,但是我们的网页不能完全使用Bootstrap堆积起来,还需要自己添加一些自定义的样式对网页元素进行微调。
https://m.tongfu.net/home/35/blog/512897.html
![2799962c907ec98fc512050d7fd9563f.png](https://i-blog.csdnimg.cn/blog_migrate/1a713ec345e62fd5e8fc7da89357afe7.jpeg)
![e4b68dcf81f7dedc5856e1ab25d458c8.png](https://i-blog.csdnimg.cn/blog_migrate/4f5f0f3ba2de69b2dc6e8272fb76a2d6.jpeg)
![0cb7cb51e4db5fe7f9d6285fe939f276.png](https://i-blog.csdnimg.cn/blog_migrate/c006c10ecc6261c2ee04203f03a0a6cc.jpeg)