Bootstrap框架的使用

最新推荐文章于 2023-09-13 18:31:13 发布
最新推荐文章于 2023-09-13 18:31:13 发布
阅读量101 收藏
点赞数
分类专栏： 前端 文章标签： bootstrap javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhaoqiong0929/article/details/114223249
版权

Bootstrap框架，是移动设备优先所以在移动设别的时候需要添加

<meta name=”viewport” content=”width:width=device-width, initial-scale=1”/>

在移动设备浏览器上，通常为视口（viewport）设置meta的属性为user-scalable=no

可以禁用其缩放（zooming）功能。这样禁用缩放功能后用户只能滚动屏幕。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

牧童树
关注
专栏目录
Bootstrap响应式Web开发(一)
小王的博客
07-26 3250
Bootstrap的概念、特点及组成、浏览器、Visual Studio Code、移动端开发主流方案、移动Web开发基础、视口、移动Web页面的样式编写、分辨率和设备像素比、二倍图、SVG矢量图
Bootstrap响应式布局原理
赵路IT软件技术交流博客
10-22 1万+
       网格系统的实现原理，是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统         网格系统的实现原理，是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就...
《Bootstrap开发精解：原理、技术、工具及最佳实践》一1.1　移动优先的设计
weixin_34088838的博客
05-02 120
本节书摘来自华章出版社《Bootstrap开发精解：原理、技术、工具及最佳实践》一书中的第1章，第1.1节，作者[美] 亚拉文·谢诺伊（Aravind Shenoy）乌尔里希·索松（Ulrich Sossou），更多章节内容可以访问云栖社区“华章计算机”公众号查看 1.1　移动优先的设计 随着手机和平板电脑的出现，响应式网页设计成为了当前人们的需要。在早...
Bootstrap之移动设备优先、栅格系统、媒体查询，响应式式布局
热门推荐
Army-海军的博客
05-18 1万+
1. html5中head标签里引入 meta Bootstrap 实行移动端优先原则 响应式布局 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"> 2. 不需要再次引入Normalize.css 不需要重置css,Bootstrap内部已引入 如果想下载看看源码。 点...
【学习笔记】Bootstrap3 - 基于HTML、CSS、JavaScript的前端开发框架
最新发布
shawxlee的CSDN博客
09-13 411
Bootstrap CSS 一、移动设备优先 为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签。 <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Bootstrap网页标题&l
Web前端基础：Bootstrap框架.pptx
05-06
【Bootstrap框架】是Web前端开发中的一个重要工具，它是由Twitter推出的开源框架，旨在提供一套简洁、灵活且响应式的UI（用户界面）组件和交互设计。Bootstrap基于HTML、CSS和JavaScript，能够快速构建出美观且适应...
使用Bootstrap框架制作查询页面的界面实例代码
09-02
主要介绍了使用Bootstrap框架制作查询页面界面的效果，本文以职业技能考证分数查询界面为例，通过实例代码给大家详细介绍,需要的朋友可以参考下
一份Bootstrap框架的期末作业
06-17
Bootstrap框架是目前最流行、最易用的前端开发框架之一，它由Twitter开发并开源，旨在简化网页设计和响应式布局的实现。这份"一份Bootstrap框架的期末作业"集合，显然是一个学习和实践Bootstrap的资源包，包含了作者...
Bootstrap框架安装使用详解
08-31
Bootstrap框架是一款广泛应用于Web开发的前端框架，它提供了一套响应式、移动设备优先的流式栅格系统，以及丰富的预定义样式、组件和JavaScript插件，极大地...希望本文的介绍能帮助你更好地理解和使用Bootstrap框架。
如何使用bootstrap框架 bootstrap入门必看!
08-30
【Bootstrap框架介绍】 Bootstrap是一款流行的前端开发框架，它由Twitter公司开发并开源，旨在提供一套易于使用、响应式和移动设备优先的Web设计工具。Bootstrap通过预定义的CSS、JavaScript组件和HTML模板，帮助...
bootstrap响应式网页设计的9条基本原则！
weixin_33836874的博客
01-18 236
bootstrap响应式网页设计是针对多屏幕问题的一个很好的解决方案，但从印刷的视角来看有点困难。没有固定的页面尺寸，没有毫米或英寸，没有任何的物理限制，无从下手。 为了desktop和mobile单独使用像素设计的方法也成为了过去，因为越来越多的设备都可以打开网站。因此，我们需要弄清楚bootstrap响应式网页设计的一些基本原则，接受流体网页，...
bootstrap使用说明
Macrolam3的博客
01-11 1187
序简称：bs.集html、css、js框架于一身，功能更强更全。也就是说结构按照基准模板搭建，类名不要随意删改，对应的js交互控制自然都有了。后台人员较为喜欢使用，因为几乎不用书写css样式，自带的就基本让你满意。前端人建议工作中不要过于依赖，否则呵呵了。框架的分类：html、css、js应用1 移动端开发；（pc端也可以使用，支持不太好）2 响应式布局；依赖jQuery； 这么一个功能强大完善的
开发原则：开发优先级的观念
Darbuly的博客
06-02 2001
1. 为什么需要在开发之前，制定好开发优先级的观念 “先开发一个能用的东西，让客户用着先。”架构师经常这么跟我说，我似乎有点理解了他的意思，在闲暇之际，寻思着我们这么做，能解决些什么问题呢？ 首先，这么做，使得我们的产品很快就能用上，这对客户来说，是一件好事，他们肯定是一心想“快点！开发快点！”。所以一定意义上能满足客户对速度的需求。 然后，这么做，使得我们开发人员能快速展开开发重心工作，能够确认这些重要的工作能否做出来，做得好，才能真正展开后续的开发工作，所以，对于开发人员而言，可以让自己快速对接业务研发
python--前端开发 07 BootStrap-设置全局CSS样式类
一越王超的博客
02-18 409
思考：BootStrap是什么?可以做什么? Bootstrap是twitter公司基于HTML、CSS、JavaScript开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。
Bootstrap的优先级、选择器、伪类
dkwrl82404的专栏
09-22 287
概述：Bootstrap的CSS组件的核心就是选择器的定义以及在各自优先级上的处理。由于大部分的选择器都非常的常见就一笔带过了，这里重点介绍一下Bootstrap用到的知识点。 一、优先级 之前我们使用CSS的时候知道样式有三种，分别是行内样式、内嵌样式、外部样式，它们的优先级是 行内>内嵌>外部。 OK，现在我们将Bootstarp的优先级，如何确定CSS的优先级？这...
16/7/9_Bootstrap-设计原则
antaohui5955的博客
07-09 195
　移动优先： 　　• 在设计的初期就要考虑页面如何在多终端展示 　渐进增强： 　　• 充分发挥硬件设备的最大功能 转载于:https://www.cnblogs.com/gaara0305/p/5656057.html...
Bootstrap基础知识一
小K的大师兄
09-05 1239
一、Bootstrap基础 1、Bootstrap是一个用于快速开发Web应用程序或网站的前端框架，他是基于HTML、CSS和JavaScript的开源组件； 2、Bootstrap采用移动优先原则，即以移动设备应用程序优先； 3、Bootstrap采用响应式设计，即他可以自动适应台式机、平台电脑和其它移动设备的显示器； 二、Bootstrap安装 1、可以通过以下链接获取Bootstr
bootstrap初体验
舍硪齐誰
09-02 235
项目中每个页面都要参照如下的样式 <!DOCTYPE html> <html lang="zh-CN"> ... </html> bootstrap遵循移动设备优先原则 <meta name="viewport" content="width=device-width, initial-scale=1"> <!--以下是禁用了屏幕...
JavaScript--【JS】Bootstrap布局
ZJie0的博客
03-08 277
响应式开发 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备 的目的。 超小屏幕(手机)<768px 小屏设备(平板)>=768px-<992px 中等设备(桌面显示器)>=992px-<1200px 宽屏设备(大桌面显示器)>=1200px 响应式布局容器 响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。 原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏
不使用bootstrap框架使用模态框
04-27
要在不使用 Bootstrap 框架的情况下使用模态框，可以使用原生的 HTML、CSS 和 JavaScript 来实现。 首先，在 HTML 文件中创建一个 div 元素，作为模态框的容器，并设置其样式为隐藏： ``` <div id="myModal" class="modal"> <div class="modal-content"> <span class="close">×</span> <p>Some text in the Modal..</p> </div> </div> ``` 然后，使用 CSS 样式来设置模态框的样式。例如： ``` .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); } .modal-content { background-color: #fefefe; margin: 10% auto; padding: 20px; border: 1px solid #888; width: 80%; } .close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; } ``` 在 JavaScript 文件中，实现打开和关闭模态框的功能。例如： ``` // 获取模态框和关闭按钮 var modal = document.getElementById("myModal"); var btn = document.getElementById("myBtn"); var span = document.getElementsByClassName("close")[0]; // 点击按钮打开模态框 btn.onclick = function() { modal.style.display = "block"; } // 点击关闭按钮或其他地方关闭模态框 span.onclick = function() { modal.style.display = "none"; } window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; } } ``` 这样就可以在不使用 Bootstrap 框架的情况下实现模态框的功能了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值