【20201117】Bootstrap前端框架学习笔记
ccwgpt 2024-09-15 14:57 29 浏览 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
相关推荐
- NET版本众多，傻傻分不清楚
-
面对.NET众多的版本，尤其还有几个名称的情况下，相信很多初学C#的开发人员都很困惑，搞不清究竟该怎么选择。下面就列举一下.NET的主要版本及其区别：.NETFramework（传统版本，仅适用于W...
- .NET Framework 和 .NET Core 有啥区别?如何选择?
-
.NETFramework和.NETCore都是由Microsoft开发的软件框架，用于创建Windows应用程序和Web应用程序。它们的主要区别在于：支持的操作系统：.NET...
- 「分享」介绍一款倍受欢迎的.NET 开源UI库
-
概述今天要带大家了解的是一款WPF的开源控件库MahApps.Metro。MahApps.Metro是用于创建现代WPF应用程序的工具包，它许多开箱即用的好东西。目前支持的NETFramework...
- .NET 5.0正式版发布:应用可在ARM64上原生运行
-
更多：o梵蒂冈图书馆频繁遭黑客攻击oNPM包被发现窃取敏感的Discord和浏览器文件o作者：硬核老王o（本文字数：712，阅读时长大约：1分钟）.NET5.0正式版发布：应用可...
- 盘点8个热门.Net开源项目
-
一、SmartFormat：轻量级文本模板库，轻松替代string.Format项目地址：https://github.com/axuno/SmartFormatSmartFormat不仅继承了s...
- .NET与Java开发:一场从框架到应用实例的深度对决
-
在软件开发这片广袤的战场上，.NET与Java两大开发平台如同两位身经百战的将军，各自率领着庞大的开发者队伍，在不同的应用场景中大放异彩。今天，我们就来一场从框架到应用实例的深度对决，看看这两大平台究...
- TouchSocket:一个功能强大且易于使用的 .NET 网络通信框架
-
项目介绍TouchSocket是一个功能强大且易于使用的.NET网络通信框架，适用于C#、VB.Net和F#等语言。它提供了多种通信模块，包括TCP、UDP、SSL、WebSocket、Mo...
- 远离报错烦恼!深入全面掌握.NET Framework
-
由于Windows系统对.NETFramework这一系统组件有着极为特殊的要求，而部分应用软件及游戏对其的依赖性也近乎达到了驱动级的水准，使用或安装不当会遭遇许多“未知”的问题，因此如何掌握.NE...
- 想自己搭建.Net Web框架，开源项目太庞大看不懂，可以看这个教程
-
大家好，我是编程乐趣。一直以来，我都在运营知识星球，这个月也开始全职专心编写教程了。当时编写教程，就是发现很多程序员工作多年了，都没自己搭建过框架，也没接触过公司的框架底层代码。这就导致一些问题，无法...
- .NET 8 + React 18 一体化开发框架!苏州码农十年匠心打磨
-
开篇前言从2014年入行至今，从WebForms到MVC，从JavaScript到React/Vue，从.NETFramework到.NETCore/8，技术栈的变迁伴随了我整个职业生涯。去年，我...
- .Net Framework详解
-
相信有不少小伙伴遇到过这种情况：安装软件时提示.NetFramework未安装导致软件无法打开，或者需要安装.NetFramework4.0以上的组件。那.NetFramework是什么呢？....
- 系统小技巧:深入全面掌握.NET Framework
-
由于Windows系统对.NETFramework这一系统组件有着极为特殊的要求，而部分应用软件及游戏对其的依赖性也近乎达到了驱动级的水准，使用或安装不当会遭遇许多“未知”的问题，因此如何掌握.NE...
- 前端架构师成长之路:如何在 Vue 的计算属性中传递参数
-
在Vue中，计算属性（computed）是从其他响应式属性派生的属性，是用于自动监听响应式属性的变化，从而动态计算返回值。计算属性（computed）通常是一个没有参数的函数。当然如果需要像调...
- Vue2 vs Vue3:核心差异与升级指南
-
Vue3自2020年发布以来，凭借其革命性的改进迅速成为开发者关注的焦点。本文将从架构设计、API模式、性能优化等多个维度深入对比Vue2和Vue3的核心差异，并提供代码示例帮助开发者...
- 突发!Vue3 投屏神器引爆程序员朋友圈
-
【AlarmLevel】重要【AlarmTitle】突发！Vue3投屏神器引爆程序员朋友圈【AlarmOverview】最近GitHub上名为vue-screen-share的仓库突...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- 若依框架 (41)
- MVC框架 (46)
- spring框架 (46)
- 框架图 (58)
- bootstrap框架 (43)
- flask框架 (53)
- quartz框架 (51)
- abp框架 (47)
- jpa框架 (47)
- scrapy框架 (52)
- beego框架 (42)
- java框架spring (43)
- grpc框架 (55)
- 前端框架bootstrap (42)
- orm框架有哪些 (43)
- ppt框架 (48)
- 内联框架 (52)
- winform框架 (46)
- gui框架 (44)
- cad怎么画框架 (58)
- ps怎么画框架 (47)
- ssm框架实现登录注册 (49)
- oracle v (42)
- oracle字符串长度 (48)
- oracle提交事务 (47)