【20201117】Bootstrap前端框架学习笔记
sinye56 2024-10-25 16:28 3 浏览 0 评论
介绍
介绍
Bootstrap是一个免费的web前端框架，它将HTML、CSS、Javascript结合到一起，制定了一系列的前端开发规则，使设计网页就像搭积木一样简单。
今天我们就跟着福哥来学习一下Bootstrap框架的使用技巧，我们的TFPHP框架会将Bootstrap引入进来作为框架的前端模块的支持。
安装
安装Bootstrap很简单，就是从官网下载源码包放到自己的项目下面，通过link和script引入CSS和Javascript库文件即可。
下载
官网下载地址
https://getbootstrap.com/
这里面有压缩版本的和源码版本的，我们每个都下载一下。压缩版本用在生产环境上面，而源码版本用在开发环境上面。
安装
我们直接使用压缩版本即可，将压缩包解压之后将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="https://tongfu.net/img3/home/icon/2020/1117/17/c8528cb09e22e75e.jpg" 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堆积起来，还需要自己添加一些自定义的样式对网页元素进行微调。
https://m.tongfu.net/home/35/blog/512897.html
相关推荐
- RHEL8和CentOS8怎么重启网络
-
本文主要讲解如何重启RHEL8或者CentOS8网络以及如何解决RHEL8和CentOS8系统的网络管理服务报错，当我们安装好RHEL8或者CentOS8，重启启动网络时，会出现以下报错：...
- Linux 内、外网双网卡路由配置
-
1.路由信息的影响Linux系统中如果有多张网卡的情况下，如果路由信息配置不正确，...
- Linux——centos7修改网卡名
-
修改网卡名这个操作可能平时用不太上，可作为了解。修改网卡默认名从ens33改成eth01.首先修改网卡配置文件名（建议将原配置文件进行备份）...
- CentOS7下修改网卡名称为ethX的操作方法
-
?Linux操作系统的网卡设备的传统命名方式是eth0、eth1、eth2等，而CentOS7提供了不同的命名规则，默认是基于固件、拓扑、位置信息来分配。这样做的优点是命名全自动的、可预知的...
- Linux 网卡名称enss33修改为eth0
-
一、CentOS修改/etc/sysconfig/grub文件（修改前先备份）为GRUB_CMDLINE_LINUX变量增加2个参数（net.ifnames=0biosdevname=0），修改完成...
- CentOS下双网卡绑定，实现带宽飞速
-
方式一1.新建/etc/sysconfig/network-scripts/ifcfg-bond0文件DEVICE=bond0IPADDR=191.3.60.1NETMASK=255.255.2...
- linux 双网卡双网段设置路由转发
-
背景网络情况linux双网卡:网卡A(ens3)和网卡B(...
- Linux-VMware设置网卡保持激活
-
Linux系统只有在激活网卡的状态下才能去连接网络，进行网络通讯。修改配置文件（永久激活网卡）...
- VMware虚拟机三种网络模式
-
01.VMware虚拟机三种网络模式由于linux目前很热门，越来越多的人在学习linux，但是买一台服务放家里来学习，实在是很浪费。那么如何解决这个问题？虚拟机软件是很好的选择，常用的虚拟机软件有v...
- 2023年最新版 linux克隆虚拟机 解决网卡uuid重复问题
-
问题描述1、克隆了虚拟机，两台虚拟机里面的ip以及网卡的uuid都是一样的2、ip好改，但是uuid如何改呢？解决问题1、每台主机应该保证网卡的UUID是唯一的，避免后面网络通信有问题...
- Linux网卡的Vlan配置，你可能不了解的玩法
-
如果服务器上连的交换机端口已经预先设置了TRUNK,并允许特定的VLAN可以通过，那么服务器的网卡在配置时就必须指定所属的VLAN，否则就不通了，这种情形在虚拟化部署时较常见。例如在一个办公环境中，办...
- Centos7 网卡绑定
-
1、切换到指定目录#备份网卡数据cd/etc/sysconfig/network-scriptscpifcfg-enp5s0f0ifcfg-enp5s0f0.bak...
- Linux搭建nginx+keepalived 高可用(主备+双主模式)
-
一：keepalived简介反向代理及负载均衡参考：...
- Linux下Route 路由指令使用详解
-
linuxroute命令用于显示和操作IP路由表。要实现两个不同子网之间的通信，需要一台连接两个网络的路由器，或者同时位于两个网络的网关来实现。在Linux系统中，设置路由通常是为了解决以下问题：该...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- oracle忘记用户名密码 (59)
- oracle11gr2安装教程 (55)
- mybatis调用oracle存储过程 (67)
- oracle spool的用法 (57)
- oracle asm 磁盘管理 (67)
- 前端 设计模式 (64)
- 前端面试vue (56)
- linux格式化 (55)
- linux图形界面 (62)
- linux文件压缩 (75)
- Linux设置权限 (53)
- linux服务器配置 (62)
- mysql安装linux (71)
- linux启动命令 (59)
- 查看linux磁盘 (72)
- linux用户组 (74)
- linux多线程 (70)
- linux设备驱动 (53)
- linux自启动 (59)
- linux网络命令 (55)
- linux传文件 (60)
- linux打包文件 (58)
- linux查看数据库 (61)
- linux获取ip (64)
- linux进程通信 (63)