突然领导让我搭前端页面，我好方，20分钟玩转Bootstrap
sinye56 2024-10-25 16:27 8 浏览 0 评论
随着互联网的发展，人们对网页的体验度不断提升，不仅仅是满足功能需求，还要追求审美，追求好的体验度。作为一个后端，写前端好难，怎么写好前端？
什么是Bootstrap？
基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。 而且它还支持响应式布局。
Bootstrap学习路线
了解
Flat Ui
Bootstrap select2
Bootstrap datetimepicker
Bootstrap datatables
font awesome官网
熟练使用API:https://v3.bootcss.com/
全局CSS样式
组件
JavaScript插件
Bootstrap菜鸟使用步骤
进入：https://v3.bootcss.com 下载
下载后的文件
如何在项目中引用Bootstrap框架
步骤：
1、 在项目中新建一个bootstrap目录，将提前下载好的文件copy到bootstrap文件目录中来（css、fonts、js）。并且将jquery的函数库插件也copy到项目中来。
2、 页面中引入的标签及文件
<!--第一步：将bootstrap全局css样式文件引入-->
<!--响应式的开关-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--第一步：将bootstrap全局css样式文件引入-->
<link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<!--第二步：将jquery插件引入，因所有的bootstrap js都需要jquery支持-->
<script type="text/javascript" language="JavaScript" src="js/jquery-2.0.3.min.js"></script>
<!--第三步：将bootstrap中的js插件引入,注意：一定要在引入bootstrap的js文件前引入jquery插件-->
<script type="text/javascript" language="JavaScript" src="bootstrap/js/bootstrap.min.js"></script>接下来打开API文档跟着操作
重点关注三个模块：全局css样式、组件、JavaScript插件
全部看完，实践跟着操作。
实例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--响应式的开关-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--第一步：将bootstrap全局css样式文件引入-->
<link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<table class="table table-bordered table-hover">
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</table>
<!--第二步：将jquery插件引入，因所有的bootstrap js都需要jquery支持-->
<script type="text/javascript" language="JavaScript" src="js/jquery-2.0.3.min.js"></script>
<!--第三步：将bootstrap中的js插件引入,注意：一定要在引入bootstrap的js文件前引入jquery插件-->
<script type="text/javascript" language="JavaScript" src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>重点难点-栅格布局
实例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--响应式的开关-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--第一步：将bootstrap全局css样式文件引入-->
<link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<style>
div{
border: 1px solid blue;
}
</style>
</head>
<body>
<!-- 设置栅栏式布局-->
<div class="container"><!--或者container-fluid-->
<div class="row"> -- col-xs-4 : 指小于768px的小设备
<div class="col-xs-4">11</div> -- col-sm-4 ：指>=768px的设备
<div class="col-xs-4">22</div> -- col-md-4 ：指>=992px设备
<div class="col-xs-4">33</div> -- col-lg-4 ：值1200px设备
</div>
<div class="row">
<div class="col-md-4">11</div>
<div class="col-md-4">22</div>
<div class="col-md-4">33</div>
</div>
<div class="row">
<div class="col-sm-4">11</div>
<div class="col-sm-4">22</div>
<div class="col-sm-4">33</div>
</div>
<div class="row">
<div class="col-lg-4">11</div>
<div class="col-lg-4">22</div>
<div class="col-lg-4">33</div>
</div>
</div>
<!--第二步：将jquery插件引入，因所有的bootstrap js都需要jquery支持-->
<script type="text/javascript" language="JavaScript" src="js/jquery-2.0.3.min.js"></script>
<!--第三步：将bootstrap中的js插件引入,注意：一定要在引入bootstrap的js文件前引入jquery插件-->
<script type="text/javascript" language="JavaScript" src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>谁在最需要的时候轻轻拍着我肩膀，谁在最快乐的时候愿意和我分享。今天我的分享就到这里，大家有没有什么好的学习方法呢？欢迎来留言评论，和我们一起交流。如果喜欢我的文章，也欢迎大家关注、点赞、转发。我是丫丫，一个专注分享项目实战技能的IT从业者。
相关推荐
- 6个接私活的网站，你有技术就有钱
-
如果觉得有帮助，还请大家帮忙多多转发，点个关注作者：发哥链接：GitHubDaily本篇文章会向大家推荐国内外几个接外包比较靠谱的平台，主旨是贵精不贵多。因此，像「猪x戒」这种会让程序员自贬身价，扰乱...
- Java开源可商用的CMS建站系统_java建站源码
-
Java研发的CMS内容管理系统具有许多优势和特点，包括以下几个方面：跨平台性：Java是一种跨平台的编程语言，可以在不同的操作系统上运行，包括Windows、Linux、Mac等。这意味着Java...
- SEO新手建站必看"干货"优质空间和功能选择技巧!
-
一.空间的分类服务器：远程的高级大型计算机。vps:虚拟服务器。虚拟空间：也称虚拟主机云主机：是在一组集群主机上虚拟出多个类似独立主机的部分，集群中每个主机上都有云主机的一个镜像，从而大大提高了虚拟主...
- 千字长文教你使用 宝塔面板 快速搭建网站
-
本文将教大家使用宝塔面板快速搭建网站，云服务器购买以及域名注册部分请自行上网搜索了解，亦可留言联系小编进行咨询。如果是和下方一样本地搭建演示的话，则不需要付费购买域名和主机。宝塔面板的是...
- BlueHost香港虚拟主机建站的5个优点
-
应该是从2006年左右开始，如果我们建站选择国内的主机需要备案手续，而且比较繁琐，且根据各地的不同政策还需要到接入点拍照登记个人信息等，一来比较繁琐，二来我们担心万一网站可能存在的信息问题导致不必要的...
- 10款好用的Linux服务器网站管理面板推荐
-
如今在建站时，很多人都会使用管理面板来辅助建站，因为相对于手动安装软件，面板更加简单而且高效，即使新手也能很快学会搭建网站，在本文中我们来推荐几款好用的网站管理面板宝塔面板宝塔面板是一款简单好用的网站...
- 小白拥有一台云服务器到底能干些什么?成就感爆棚的简单方案!
-
?云服务器是什么？云服务器（比如阿里云、腾讯云等）是提供给用户的一种虚拟服务器资源，你可以把它看作一台“rent的电脑”，只需要支付少量费用就可以拥有一个功能强大的网络设备。对于小白来说，拥有一...
- 苹果CMS，苹果CMS采集插件，苹果CMS快速建站(图文教程)
-
苹果CMS，有着强大的管理功能，管理后台界面大方、操作简单、功能齐全、模块众多、双端管理。苹果CMS加上丰富的系统标签，系统内置了丰富的cms标签并支持thinkphp框架标签完美融合，可以调取系统内...
- 新手搭建网站、小程序、APP等系统，如何选择服务器?
-
今天和小蔡和大家说说，新手搭建网站，如何选择服务器？废话不多说，直接来干货。服务器是存放网站源代码的容器，也是运行网站程序的工具，所以是不可或缺的。新手刚接触搭建网站，若不知道怎么去选择一台适合自己...
- 在海外VPS服务器(Hostinger)上配置宝塔面板的操作步骤
-
不得不说，宝塔面板是真的好用啊~用上就放不下了，一些海外的免费开源的服务器集成面板（比如CloudPanel）我也用了，不喜欢，真的不如宝塔面板方便耐用。今天聊一下在海外服务器（也包括国内服务器，没有...
- 干货盘点:每个wordpress站长都推荐完成的60个任务清单
-
构建和运营wordpress网站包含了很多重要任务，遗漏哪一方面都可能造成或大或小的不良后果，因此我们特别整理了这个任务清单，为你查漏补缺，希望能对您现在运营或者即将开始构建的wordpress网站有...
- 为什么站长喜欢选择BlueHost主机建站
-
BlueHost正式成立于2003年，从事主机(虚拟主机)业务至今已经将近十余年，无论从口碑还是用户的评价，我们基本很少看到关于Bluehost主机产品和商家负面的评论信息。从2014年开始，Blue...
- 自助建站时代来临 半小时成建站达人
-
“H5”意为第五代HTML，即第五代网页编写语言。自从1991年第一代HTML开始研发以来，网页编写、网站建设一直都属于高端技术行业，网站建设人员都是一些专业型人才，这也意味着网站的建设和维护都需要不...
- 现代化、开源的 Linux 服务器运维管理面板
-
1Panel是一个现代化、开源的Linux服务器运维管理面板。1Panel的功能和优势包括：快速建站：深度集成Wordpress和Halo，域名绑定、SSL证书配置等一键搞定；高效管理...
- [1Panel]开源，现代化，新一代的 Linux 服务器运维管理面板
-
测评介绍本期测评试用一下1Panel这款面板。1Panel是国内飞致云旗下开源产品。整个界面简洁清爽，后端使用GO开发，前端使用VUE的Element-Plus作为UI框架，整个面板的管理都是基于do...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- 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)