Bootstrap 框架

最新推荐文章于 2024-05-30 15:01:09 发布
最新推荐文章于 2024-05-30 15:01:09 发布
阅读量653 收藏 5
点赞数
分类专栏： jQuery+BootStrap+VUE 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51596354/article/details/123591606
版权

第02章-前端核心技术-Bootstrap框架

Bootstrap框架

Bootstrap 概述

Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的一个用于快速开发 Web 应用程序和网站的前端框架。

官网：https://v4.bootcss.com/

为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  • width ：控制设备的宽度。为了在不同屏幕分辨率的设备浏览，设置为 device-width。
  • initial-scale=1.0 : 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
  • user-scalable=no : 可以禁用其缩放（zooming）功能。
  • maximum-scale=1.0 : 与user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，能让网站看上去更像原生应用的感觉。这种方式我们并不推荐所有网站使用，还是要看您自己的情况而定！
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

支持的浏览器

Bootstrap4 支持所有主流浏览器和平台的 最新、稳定版本。在 Windows 上，支持 Internet Explorer 10-11 / Microsoft Edge 浏览器。

对于其它使用了最新版本的 WebKit、Blink 或 Gecko 内核的浏览器，或者直接或间接调用了平台的 web view API，都不是明确被支持的。但是，Bootstrap4 应该（大多数情况下）在这些浏览器中是能够正常显示和运行的。

移动设备 Chrome Firefox Safari Android Browser & WebView Microsoft Edge
Android 支持 支持 N/A Android v5.0+ supported 支持
iOS 支持 支持 支持 N/A 支持
Windows 10 Mobile N/A N/A N/A N/A 支持
PC设备 Chrome Firefox Internet Explorer Microsoft Edge Opera Safari
Mac 支持 支持 N/A 支持 支持 支持
Windows 支持 支持 支持, IE10+ 支持 支持 不支持

Bootstrap 安装

bootstrap依赖于Jquery框架，如果没有jquery框架bootstrap的js将无法正常运行，所以需要先下载引入Jquery。下载地址：https://jquery.com/download/

下载jquery后再下载bootstrap的源码，并且引入到项目中才能正常使用，下载地址：https://v4.bootcss.com/docs/getting-started/download/

下载完成后，将如下文件复制到项目即可。
下载完成后，再需要使用bootstrap的页面中引入即可

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Jquery + Bootstrap</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="font/bootstrap-icons.css" />

		<script src="jquery/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
	</body>
</html>

Bootstrap 基础

边距

包括内外边距：

  • m - 对于设置的类 margin
  • p - 对于设置的类 padding

其中边是以下之一：

  • t- 对于设置margin-top或padding-top
  • b- 对于设置margin-bottom或padding-bottom
  • l- 对于设置margin-left或padding-left
  • r- 对于设置margin-right或padding-right
  • x- 对于同时设置*-left和的类*-right
  • y- 对于同时设置*-top和的类*-bottom
  • 空白 - 对于在元素的所有 4 边设置 amargin或 的类padding

其中size是以下之一：

  • 0- 对于消除margin或padding<
最低0.47元/天 解锁文章
抹泪的知更鸟
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Bootstrap框架
weixin_50613702的博客
11-26 561
Bootstrap框架 一、Bootstrap简介 Bootstrap是一个用于快速开发Web应用程序和网站的前端框架。Bootstrap是基于HTML、CSS、JavaScript的。 二．Bootstrap 特点 (1)**跨设备、跨浏览器：**可以兼容所有现代浏览器，包括比较诟病的IE7、8。 (2)**响应式布局：**不但可以支持PC端的各种分辨率的显示，还支持移动端PAD、手机等屏幕的响应式切换显示。 (3)**提供的全面的组件：**Bootstrap提供了实用性很强的组件，包括：导航、标签、工具
bootstrap 框架
热门推荐
qq_41988669的博客
02-08 1万+
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。响应式所具有的特点 1、网页的宽度自动调整 2、尽量少用绝对宽度 3、字体要使用 rem、em 做为单位 4、布局要使用浮动、弹性布局 必须使用 HTML5 文档类型 每个页面的开始部分 默认栅格系统 带有基本栅格的 HTML 代码 媒体类型 媒体类型 逻辑运算符 用来做条件判断 页面布局： 引入 css（bootstrap.min.css） + 类名 03-面包屑导航
Bootstrap框架 (黑马程序员)
2301_80068547的博客
11-25 6244
栅格系统英文为 "grid systems"，也有人翻译为 "网格系统"，它是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口 ( viewport ) 尺寸的增加，系统会自动分为最多 12 列。Bootstrap 里面 container 宽度是固定的，但是不同屏幕下，container的宽度不同，我们再把 container 划分为 12 等份。
CSS学习笔记：bootstrap的介绍、下载、使用及响应式布局的实现
最新发布
lbcbjtlhmjq的博客
05-30 858
Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的CSS 样式 bootstrap过时了吗？ 其实在学bootstrap这一部分的网课时，在弹幕上看到一些同学说bootstrap已经过时了，这里谈谈我的看法
Bootstrap前端开发框架【使用教程】
DIUDIUjiang的博客
05-06 7985
Bootstrap 来自 Twitter(推特)，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS 和 JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 中文官网：http://www.bootcss.com/ 官网：http://getbootstrap.com/ 推荐使用：http://bootstrap.css88.com/ 框架：顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框..
BootStrap框架
m0_57851747的博客
12-06 622
BootStrap框架的使用，包含栅格系统，组件，插件，全局样式，定制等
bootstrap框架
07-14
Bootstrap框架是世界上最流行的前端开发框架之一，由Twitter的开发者们创建并开源。它是一个用于构建响应式布局和移动设备优先的Web项目的工具集。Bootstrap框架的核心特性包括易于使用的HTML、CSS和JavaScript组件...
23.0 Bootstrap 框架
10-04
8. **学习资源**："bootstrap框架1.eddx"和"23.0 Bootstrap 框架1.md"可能是教程文档或课程材料，提供了进一步的学习指导，帮助开发者了解如何有效地使用Bootstrap。 在实际开发中，理解并熟练运用Bootstrap可以...
Bootstrap框架（组件）
passerby的博客
07-27 1992
根据上一章博客我们讲解了Bootstrap的12栅格系统 排版 图片 这一章我们来讲一下一些组件无处不在的字体图标 如图： 它们在APP页面底部、网站导航条、登录页面或注册页面 Bootstrap框架提供了250多个来自Glyphicon Halflings的字体图标，其作用在内联元素上 按钮式下拉菜单的好处是可以实现按钮和下拉菜单分离 在大于768px的屏幕上，通过.nav-justified类可以让选项卡或胶囊式导航呈现出同等宽度，在小屏幕上，导航呈现堆叠样式 翻页只能实现
BootStrap前端框架
Skf_0004010的博客
11-04 5123
BootStrap 1、Bootstrap介绍 什么是bootstrap? 简单，直观，强悍的前端开发框架，让web开发更迅速，简单。来自Twitter，是目前很受欢迎的前端框架之一。 Bootstrap是基于HTML,CSS,Javascript的 特点 移动端设备优先：自Bootstrap3起，框架包含了贯穿于整个库的移动设备优先的样式 响应式设计：采用栅格布局（底层实现原理：媒体查询结合流体布局） 偏UI，综合框架，包含一些常用的UI组件以及一些JS组件 Bootstrap的适用场景？ b
Bootstrap前段框架（一篇到底）
让优秀成为一种习惯！
04-02 3327
概述：Bootstrap是一个建立一个页面，就可以在三个终端(PC端、平板、手机)上完美展示的响应式前端框架注意： 不适用于过于复杂的电商网站下载Bootstrap库 ：点击进入进入网址点击下载Bootstrap 三个均可下载，使用下载生产文件和源码 如：解压后打开dist文件夹 导入js文件 1-后缀.js为开发版本（需要改源代码用） 2-后缀为 .min.js为生产版本导入css文件 添加到body标签结束之前 为什么CSS要放在前面 ？ 如演示： 通过Bootstrap实现的按钮演示以及固定容器会
科普帖：什么是Bootstrap？Bootstrap开发框架入门
WPHunter的编程技术资料库！
01-08 1533
本文将介绍使用Bootstrap的好处并解释它使用的不同文件类型。到最后，您将知道Bootstrap是否可以使您的工作流程受益。
前端之Bootstrap框架
qq_53842456的博客
11-07 8144
Bootstrap是一个开源的前端框架，用于快速构建响应式和移动设备优先的网站或应用程序。它包含了HTML、CSS和JavaScript的模板和工具集，使开发人员能够快速地创建具有一致性和现代外观的页面布局和UI组件。Bootstrap最初由Twitter的一些工程师创建，旨在简化Web开发的过程。它提供了一个广泛的预定义样式和组件库，可以轻松自定义和扩展，以满足各种需求。使用Bootstrap，开发人员可以更加专注于网站或应用程序的功能和逻辑，而不必从头开始编写CSS样式和设计页面布局。
JavaScript基础学习——Bootstrap框架
qq_41890177的博客
09-17 2442
一、认识Bootstrap(BS) 1、官网：https://www.bootcss.com/ (https://v3.bootcss.com) 2、BS是一个入门级UI框架，汇集了HTML、CSS（less）（布局）和JavaScript（插件）的一个框架。 3、BS不是所有项目都适合使用BS实现布局，如果UI工程师没有按照BS的栅格系统理念去设计UI图，因为BS不适合做固定宽高的网页。 BS一般用于开发没有UI图的项目，且为响应式的项目。 4、BS3和BS4的区别： BS3有4种栅格，而BS4有5种栅
1. bootstrap概述
wxhua420701325的博客
10-21 6103
Bootstrap 是 Twitter推出的，目前最流行的前端开发框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，用于快速开发 Web 应用程序和网站的前端框架。用于开发响应式布局、移动设备优先的 WEB 项目。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

抹泪的知更鸟

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值