Bootstrap-01 (前台开发框架)

最新推荐文章于 2023-08-24 17:11:08 发布

t276tangqiqi

最新推荐文章于 2023-08-24 17:11:08 发布

阅读量159

点赞数

文章标签： bootstrap

本文链接：https://blog.csdn.net/m0_67785100/article/details/124560017

版权

一.Bootstrap
① Bootstrap是什么?
(1).诞生于2011年，来自Twitter公司，是目前最受欢迎的前端框架
(2).是一个用于快速开发Web应用程序和网站的前端框架
(3).Bootstrap是基于HTML、CSS、JS的，简洁灵活，使得Web开发更加快捷
概述：Bootstrap是一个建立一个页面，就可以在三个终端(PC端、平板、手机)上完美展示的响应式前端框架

② 为什么使用Bootstrap?
(1).响应式设计（Bootstrap的响应式CSS能够自适应台式机、平板电脑和手机）
(2).移动设备优先
(3).浏览器支持
(4).容易上手

③ Bootstrap在哪里使用?
(1).企业网站、博客、网站后台之类的网站
(2).电商（电商网站分类太多）

④ 环境安装
(1).下载Bootstrap库
https://v4.bootcss.com/

(2).页面中引入库
bootstrap.css：Bootstrap核心样式【添加到head标签中】
jquery-3.3.1.js：jQuery库【注意：必须在Bootstrap核心库引入之前引入jQuery库】
bootstrap.js：Bootstrap核心库
【添加到</body>之前】

二.案例
------案例1：查询按钮原生态实现对比Bootstrap方式实现-------

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>Demo1</title>
       <style>
       #btn1{
           /* 宽度*/
           width: 75px;
           /* 高度*/
           height: 35px;
           /* 背景颜色*/
           background-color: cadetblue;
           /* 去掉边框*/
           border: 0px;
           /* 设置边角的圆弧度*/
           border-radius: 6px;
           /* 手势*/
           cursor: pointer;
       }
       </style>

       
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
       
       <script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
       
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
   </head>
   <body>

   <h1>原生态js实现查询按钮与Bootstrap实现查询按钮对比</h1>
   <hr />

   <h2>原生态</h2>
   <button id="btn1">按钮</button>
   <hr />

   <h2>Bootstrap</h2>
   <button class="btn btn-primary">查询</button>
   <button class="btn btn-success">查询</button>
   <button class="btn btn-danger">查询</button>
   <button class="btn btn-info">查询</button>
   <button class="btn btn-warning">查询</button>
   <button class="btn btn-warning btn-lg">查询</button>

   </body>
</html>

案例2：演示Bootstrap页面在手机浏览器中展示效果----
在head中添加：
<meta name="viewport" content="widt

最低0.47元/天解锁文章

t276tangqiqi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap-01 (前台开发框架)

一.Bootstrap① Bootstrap是什么? (1).诞生于2011年，来自Twitter公司，是目前最受欢迎的前端框架 (2).是一个用于快速开发Web应用程序和网站的前端框架 (3).Bootstrap是基于HTML、CSS、JS的，简洁灵活，使得Web开发更加快捷概述：Bootstrap是一个建立一个页面，就可以在三个终端(PC端、平板、手机)上完美展示的响应式前端框架② 为什么使用Bootstrap? (1).响应式设计（Bootstrap的响...
复制链接

扫一扫