bootstrap row颜色_【20201117】Bootstrap前端框架学习笔记

介绍

介绍

Bootstrap是一个免费的web前端框架，它将HTML、CSS、Javascript结合到一起，制定了一系列的前端开发规则，使设计网页就像搭积木一样简单。

今天我们就跟着福哥来学习一下Bootstrap框架的使用技巧，我们的TFPHP框架会将Bootstrap引入进来作为框架的前端模块的支持。

安装

安装Bootstrap很简单，就是从官网下载源码包放到自己的项目下面，通过link和script引入CSS和Javascript库文件即可。

下载

官网下载地址

https://getbootstrap.com/

这里面有压缩版本的和源码版本的，我们每个都下载一下。压缩版本用在生产环境上面，而源码版本用在开发环境上面。

安装

我们直接使用压缩版本即可，将压缩包解压之后将css目录和js目录复制到TFPHP框架下面就可以使用了。

最后就是在视图模板里面引入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

表格样式，可以用来修饰表格对象。

使用

表单

这是一个用户登录的表单的示例。

        

            

登录

            

请输入正确的用户名和密码。

            

                用户名                            

            

                密码                            

            

                登录            

        

    

表格

这是一个表格的示例，展示用户信息表的样式。

        

            

用户管理

            

这是一个用户信息表。

                                                                         ID                        用户名                        创建日期                                                                                                3                        福哥                        2020/11/17                                                                1                        TFPHP                        2020/06/10                                                                2                        TFHTML                        2020/10/07                                                        

    

综合

这是一个综合的样式，是一个博客日志的样式。

        

                                                    

                鬼谷子叔叔版主            

        

        

            

                这是一个综合的示例，它展示了博客日志的样式。                这是一个综合的示例，它展示了博客日志的样式。                这是一个综合的示例，它展示了博客日志的样式。                这是一个综合的示例，它展示了博客日志的样式。                这是一个综合的示例，它展示了博客日志的样式。                这是一个综合的示例，它展示了博客日志的样式。            

            

                赞                踩                回复            

        

    

总结

今天童鞋们和福哥一起学习了Bootstrap框架的使用技巧。大家会有一种感觉使用Bootstrap可以很好的完成大部分网页的设计需求，但是我们的网页不能完全使用Bootstrap堆积起来，还需要自己添加一些自定义的样式对网页元素进行微调。

https://m.tongfu.net/home/35/blog/512897.html