龙空技术网

【20201117】Bootstrap前端框架学习笔记

同福编程 81

前言:

眼前同学们对“web前端框架技术笔记”大体比较注意,姐妹们都想要分析一些“web前端框架技术笔记”的相关知识。那么小编也在网络上收集了一些有关“web前端框架技术笔记””的相关内容,希望姐妹们能喜欢,你们快快来学习一下吧!

介绍

介绍

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

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

安装

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

下载

官网下载地址

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

安装

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

最后就是在视图模板里面引入Bootstrap的CSS文件,就算安装完成了。

<!DOCTYPE html><html><head>    <title>Bootstrap框架演示</title>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />    <link rel="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

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

使用

表单

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

<body style="background: #ccc; padding: 12px;">    <div class="row" style="width: 280px; background: #fff; padding: 12px; margin: 0 auto;">        <div class="col-sm-12">            <h3 class="m-t-none m-b">登录</h3>            <p>请输入正确的用户名和密码。</p>            <div class="form-group">                <label>用户名</label>                <input type="text" class="form-control" />            </div>            <div class="form-group">                <label>密码</label>                <input type="password" class="form-control" />            </div>            <div>                <button class="btn btn-primary">登录</button>            </div>        </div>    </div></body>

表格

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

<body style="background: #ccc; padding: 12px;">    <div class="row" style="width: 280px; background: #fff; padding: 12px; margin: 0 auto;">        <div class="col-sm-12">            <h3 class="m-t-none m-b">用户管理</h3>            <p>这是一个用户信息表。</p>            <table class="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>

综合

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

<body style="background: #ccc; padding: 12px;">    <div class="row" style="width: 280px; background: #fff; padding: 12px 0 0 0; margin: 0 auto;">        <div class="col-sm-12">            <a class="pull-left">                <img src="; style="width: 50px; height: 50px;" />            </a>            <div class="media-body" style="display: inline-block; width: auto; vertical-align: top;">                <a><strong>鬼谷子叔叔</strong></a><br />                <span class="small">版主</span>            </div>        </div>        <div class="col-lg-12" style="padding: 12px;">            <p>                这是一个综合的示例,它展示了博客日志的样式。                这是一个综合的示例,它展示了博客日志的样式。                这是一个综合的示例,它展示了博客日志的样式。                这是一个综合的示例,它展示了博客日志的样式。                这是一个综合的示例,它展示了博客日志的样式。                这是一个综合的示例,它展示了博客日志的样式。            </p>            <div class="btn-group">                <button class="btn btn-danger btn-xs" style="font-size: 12px;">赞</button>                <button class="btn btn-warning btn-xs" style="font-size: 12px;">踩</button>                <button class="btn btn-info btn-xs" style="font-size: 12px;">回复</button>            </div>        </div>    </div></body>
总结

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

标签: #web前端框架技术笔记