开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

我们可以在同一网站上使用Bootstrap for Desktop和amp for mobile吗

可以在同一网站上使用Bootstrap for Desktop和AMP for mobile。

Bootstrap是一个流行的前端开发框架，它提供了一套简洁、灵活的CSS、JS组件和布局工具，用于构建响应式网站和Web应用程序。Bootstrap适用于各种设备和屏幕大小，并提供了丰富的组件和样式选择。

AMP（加速移动页面）是一种用于创建移动优化网页的开源框架。它旨在提高移动页面的加载速度和性能，并提供了一系列限制和规范来确保页面内容的高效加载。AMP页面可以快速加载，并在移动设备上获得更好的用户体验。

在同一网站上使用Bootstrap for Desktop和AMP for mobile是可行的。你可以根据设备类型或屏幕大小选择使用哪种框架。当用户访问网站时，可以使用设备检测技术（如媒体查询或用户代理检测）来确定用户的设备类型，并相应地加载适当的框架。这样可以确保在不同设备上提供最佳的用户体验。

对于桌面设备，你可以使用Bootstrap来创建响应式的网页，并利用其丰富的组件和样式选项。对于移动设备，你可以使用AMP来创建移动优化的网页，并通过其优化的加载速度提供更好的用户体验。

腾讯云提供了一系列的云产品，包括云服务器、云存储、云数据库等，可以用于托管和部署你的网站。你可以通过腾讯云官网了解更多关于这些产品的信息和使用指南。

相关搜索:我们可以在现有的ASP.NET 4网站上使用Razor吗？我们可以在Bootstrap 4中使用Material UI吗我们可以在大型项目中使用bootstrap库吗？我们可以在Android中使用liferay mobile-sdk进行安全会话吗？我们可以在一个angular项目中同时使用angular材料和bootstrap吗？我们可以在Android上使用Vuforia和NativeActivity吗？我们可以在同一个方法上使用@dataprovider和@parameters注解吗？我们可以在Angular 4项目中使用ng-bootstrap吗？我们可以在同一个方法中使用io.restassured和jayway吗？我们可以在Android平台上使用Vulkan和Java Activity吗我们可以在php中使用和操纵mysql数据和google spreadsheet吗？putState()和putPrivateData()可以在同一链码中使用吗？Sql Server我们是否可以在同一if子句中使用多个OR和and条件我们可以在java中使用多线程概念和WatchService API吗？我们可以在SQL语句中相互使用SUM和Max Function吗？我们可以在应用程序中同时使用CrudRepository和ReactiveCrudRepository吗我们可以在spring boot 1.3和java 6上使用swagger吗？我们可以在触发器中同时使用instead of和after吗？在Android中，我们可以在Textview或Edittext中使用样式和背景吗您可以在同一管线中使用-ne和-like吗？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

2019年WordPress流行趋势预测

你可以使用现成的插件来处理视频并根据需求进一步自定义。大多数WordPress主题都能够在网站上实现视频优先功能，因此我们期望这种趋势能创造奇迹。...关于页面构建器，在之前的文章中也有介绍过，详见：手把手教妹子用WordPress建一个公司官网（2）：神器Elementor 移动友好度设计 Mobile Friendly Designs：使用移动端浏览的用户数增长速度非常快...在你的网站上使用针对移动设备的主题，并进一步对其进行自定义，可以提供最佳的用户体验。...你也可以使用插件的方式来进一步优化移动端的效果，在WordPress精品插件大全页面里搜索amp，选择一个插件，比如 AMP for WP – Accelerated Mobile Pages，下载安装来实现针对移动端的速度优化...在你的网站上使用类似的效果可以让用户感受到与页面的交互。通过这个技术还可以让你的文字更富有创意，更引人入胜。

8402 0

进阶| 95.99%的前端工程师对AMP都有这十个误解

页面在 PWA 中使用 AMP 页面 2....想知道如何使用 AMP 来处理不同分辨率和不同设备的话，可以看我的另一篇文章“AMP 中的’mobile’”： https://paulbakaus.com/2016/07/01/about-that-mobile-in-accelerated-mobile-pages...我现有的网站上无法使用 AMP 我们已经澄清过第 4 点，并没有什么特别的理由让你现在的网站无法使用 AMP，因为当你读完第一个问题后，就知道了 AMP 只是一个...事实上，AMP 项目主页就是完全使用的 AMP：当然，和其它类库一样，AMP 并不适合每一个人。在动手前想一想在 AMP 的强制限制（同时也带来好处）下，你的网站是否能正常运行。...我得在 AMP 和 PWA 中做出选择 AMP 和 PWA 是互补的技术，它们的使用场景完全不一样。

6193 0

澄清对AMP的十个误解

页面在 PWA 中使用 AMP 页面 2....想知道如何使用 AMP 来处理不同分辨率和不同设备的话，可以看我的另一篇文章“AMP 中的’mobile’”： https://paulbakaus.com/2016/07/01/about-that-mobile-in-accelerated-mobile-pages...我现有的网站上无法使用 AMP 我们已经澄清过第 4 点，并没有什么特别的理由让你现在的网站无法使用 AMP，因为当你读完第一个问题后，就知道了 AMP 只是一个 web 组件类库而已。...我们之前已经在遵守这些最佳实践中的一部分，但是这些不同的做法分散在各个团队中，而且每个团队都有自己的偏好。...我得在 AMP 和 PWA 中做出选择 AMP 和 PWA 是互补的技术，它们的使用场景完全不一样。

9703 0

几款ReactJS最优秀的UI框架

使用它可以快速搭建出赏心悦目的应用界面。...有自己独特的设计风格和理念。在支付宝、蚂蚁金服等多个阿里项目中投入使用。组件化质量非常高，开箱即用。...React-Desktop是跨平台桌面应用程序的 UI 组件，可以在上面找到 Mac OS 和 Windows 10 的均可用 UI 组件。...是一个轻量级（所有 CSS 和 JS gzip 后 100 kB 左右）、 Mobile first 的前端框架官网地址：http://amazeui.org/ Github: https://github.com...通过对属性的配置，组件的灵活性也可以进一步提高官网地址：https://v2.grommet.io Github: https://github.com/grommet/grommet 目前React

16.2K5 0

鹅厂原创 | AMP 初探

AMP简介 1 AMP是什么 AMP 全称 Accelerated Mobile Pages(官网)顾名思义是为了加速移动网络的网页加载从而提升体验。感兴趣的可以先看一段实拍视频，感受一下。...从目前官方统计数据看来，速度平均有 4 倍提升 AMP 是一个在 Github 上的开源项目(传送门)在我看来，它是一套解决方案，我们的移动页面使用了这套解决方案之后，就可以得到提升加载速度的体验。...AMP 要求所有的图片资源必须使用，禁止使用。这个自定义标签就实现了所有我们在加载图片上面所使用到的优化手段。...好，说到这里，聪明的读者应该知道了：所有资源都是同一个 host，可以共享 dns，tcp 链接，还有 cdn 这还没什么，主要的是 google 搜索结果页会对 AMP 页面进行预加载，预加载，加载...地址栏输入：www.baidu.com 在百度官网搜索：MIP 然后点击 MIP 官网结果就可以看到效果了下面是操作的录制: 可以看到，MIP 页面的秒开体验，再和非 MIP 页面的一比，简直一个天上一个地下

1.1K2 0

AMP 初探

AMP 全称 Accelerated Mobile Pages(官网)顾名思义是为了加速移动网络的网页加载从而提升体验。感兴趣的可以先看一段实拍视频，感受一下。...从目前官方统计数据看来，速度平均有 4 倍提升 AMP 是一个在 Github 上的开源项目(传送门) 在我看来，它是一套解决方案，我们的移动页面使用了这套解决方案之后，就可以得到提升加载速度的体验...这个自定义标签就实现了所有我们在加载图片上面所使用到的优化手段。还有许多场景，比如仅允许异步资源，就是为了防止阻塞页面的渲染，AMP 不允许使用第三方脚本就是如此。...好，说到这里，聪明的读者应该知道了：所有资源都是同一个 host，可以共享 dns，tcp 链接，还有 cdn 这还没什么，主要的是 google 搜索结果页会对 AMP 页面进行预加载，预加载，加载...操作步骤异常简单：打开 PC chrome 浏览器按 F12，打开调试控制台切换为移动模拟器地址栏输入：www.baidu.com 在百度官网搜索：MIP 然后点击 MIP 官网结果就可以看到效果了

1.5K6 0

bootstrap快速入门笔记（二）-栅格系统，响应式类

中是默认的（还记得 Bootstrap 是移动设备优先的吗？）...-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --> ....四，响应式工具类通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容。...打印类和常规的响应式类一样，使用下面的类可以针对打印机隐藏或显示某些内容。

1.1K3 0

WordPress秒变谷歌AMP加速移动页面并自动推送

谷歌 AMP（Accelerated Mobile Pages）字面意思就是“加速移动网页”，官方解释是：Accelerated Mobile Page (AMP) 是根据开放源代码规范设计的网页。...经过验证的 AMP 网页会缓存在 Google 的 AMP 缓存中，从而可以更快速地呈现给用户。...AMP for WordPress 插件下载：百度网盘 | 官方下载 ---- WordpPress 后台搜索安装并启用 AMP 插件后，插件会自动为文章页创建一个 AMP 文章页面，页面链接 URL...amp 如果站点是在页面原有的 URL 后面加上/amp 或?...amp 来达成 AMP 页面的，那么我们有必要禁止除百度和谷歌之外的搜索引擎抓取这些 amp 页面如果百度和谷歌都是共用一套 AMP 页面，那么 robots.txt 可以这样写： User-agent

2K3 0

如何优化移动页面，你需要了解AMP和PWA

AMP（Accelerated Mobile Pages)，简单来说就是一种能够加快移动端页面呈现速度的技术，它也是一项HTML标准，可以用来创建高质量，高用户体验的网站。...也有许多网站通过结合AMP和PWA形成了一种强大的使用模式，比如说BMW.com，他们通过在PWA里来加载定制全AMP的内容来实现无间隙和快速的用户体验。...如果您在单独的网站上托管AMP内容，则您必须为所有非AMP网页添加<link 标记，以便AdSense可以发现相关的AMP网页。...AMP域名我们了解到许多发布商都对AMP域名的显示方式非常重视，像今年早些时候，谷歌分享了如何从谷歌搜索改进AMP页面网址的计划。...原因是由于在安装AMP后，网站里的AMP和非AMP用户访问的次数被统一，所以不仅先前说到的两个指标发生了变化，随着时间的推移，系统也会判断出两个以前不同的ID实际上是同一个用户，所以所有的会话次数也会减半

1.8K2 1

CSS 框架 Bulma 教程

网页样式需要大量时间开发，最省事的方法就是使用 CSS 框架。 Bootstrap 是最著名的 CSS 框架，但是今天我想推荐另一个更轻量化、更易用的框架----Bulma。...比如，要改变 Button 的大小，就可以使用下面的修饰类。...如果希望手机也保持平铺，可以加上is-mobile修饰类。...="column">3 4 如果希望手机和平板是垂直堆叠，其他宽度平铺，可以使用is-desktop修饰类。...is-hidden-mobile：只在手机隐藏 is-hidden-tablet-only：只在平板隐藏 is-hidden-desktop-only ：只在桌面隐藏 is-hidden-touch：手机和平板隐藏

2.4K3 0

网页加速特技之 AMP

据AMP官网统计目前已有很多新闻类网站和科技类网站开始使用AMP，包括Wordpress、YouTube、Twitter、LinkedIn、BBC等。...不明觉厉，接下来让我们一起来揭开AMP神秘的面纱吧。一、什么是AMP? Accelerated Mobile Pages (AMP)直译过来就是在移动设备上快速加载的网页。...使用Google AMP Cache，页面、JS文件、图片等都是从同一个源获取，并且使用HTTP2.0来优化性能。这个缓存机制还带有的验证系统，以确保网页不受外部资源的限制，能随时随地正常运行。...要深入了解AMP页面和HTML的差异，还需要更多的测试。三、AMP如何提升性能？在静态内容页面测试数据中，AMP页面的加载速度确实更快，那么AMP提升页面加载速度的秘诀是什么捏，我们一起来看看。...但是，AMP 控制资源加载、处理响应式元素避免页面抖动、主动释放资源等策略可以作为我们对移动 Web 优化的参考。

4.7K8 2

CSS 框架 Bulma 教程

网页样式需要大量时间开发，最省事的方法就是使用 CSS 框架。 Bootstrap 是最著名的 CSS 框架，但是今天我想推荐另一个更轻量化、更易用的框架----Bulma。...比如，要改变 Button 的大小，就可以使用下面的修饰类。...如果希望手机也保持平铺，可以加上is-mobile修饰类。...="column">3 4 如果希望手机和平板是垂直堆叠，其他宽度平铺，可以使用is-desktop修饰类。...is-hidden-mobile：只在手机隐藏 is-hidden-tablet-only：只在平板隐藏 is-hidden-desktop-only ：只在桌面隐藏 is-hidden-touch

1.8K4 0

AMP 初探

AMP 全称 Accelerated Mobile Pages(官网)顾名思义是为了加速移动网络的网页加载从而提升体验。...从目前官方统计数据看来，速度平均有 4 倍提升 AMP 是一个在 Github 上的开源项目(传送门) 在我看来，它是一套解决方案，我们的移动页面使用了这套解决方案之后，就可以得到提升加载速度的体验。...这个自定义标签就实现了所有我们在加载图片上面所使用到的优化手段。还有许多场景，比如仅允许异步资源，就是为了防止阻塞页面的渲染，AMP 不允许使用第三方脚本就是如此。...好，说到这里，聪明的读者应该知道了：所有资源都是同一个 host，可以共享 dns，tcp 链接，还有 cdn 这还没什么，主要的是 google 搜索结果页会对 AMP 页面进行预加载，预加载，加载...操作步骤异常简单：打开 PC chrome 浏览器按 F12，打开调试控制台切换为移动模拟器地址栏输入：www.baidu.com 在百度官网搜索：MIP 然后点击 MIP 官网结果就可以看到效果了

1.6K2 0

html5开发手机端网页(移动端web开发的几种方式)

最近一直在研究移动手机网站的开发，发现做手机网站没有想象中的那么难。为什么会这么说呢？我们试想下:我们连传统的PC网站都会做，难道连一个小小的手机网站难道都搞不定吗？...1.不懂设计也可以做网站就算不懂设计，你的网页在Bootstrap的帮助下，也能拥有超高颜值。它强大的内置样式库让你的作品变成尤物。主要体现在：字体文件和bootstrap自带的UI样式。...缺点： 1.不遵循最佳实践我们在使用Bootstrap时遇到的最大问题之一是你的DOM元素上将拥挤大量的类。这打破了良好的web设计基本规则之一，HTML不再有语义，而且内容和表示不再分离。...CSS压缩后115k,JS压缩后35k 如果你想要使用Bootstrap的所有功能，你应该好好考虑资源的加载时间。...听说在PX这个单位在PC和移动的解析不同，所以才使用rem的。这点我也不是很清楚，也请教了一些做手机网站的高手，了解了一些信息。原来大部分的人依旧是使用PX来布局，rem都用的少。

7K4 0

让WordPress支持google AMP

1.关于AMP 在移动互联网的时代，尽管网站响应式设计可以满足多屏（pc、手机、ipad等）浏览,但google在2015年10月推出了更快移动页面访问速度的技术-Accelerated Mobile...AMP页面在手机端的展示 ? 3.AMP页面在google搜索的展示 AMP页面被google搜索索引后，在搜索结果里看到AMP的页面，页面描述最前面有个闪电标记和AMP字样。...好消息是百度也支持类似AMP，坏消息是百度2016年8月搞了自己一套类似的AMP-Mobile Instant Pages（MIP 移动网页加速器），AMP和MIP非常相似，无论是HTML、CSS、禁用大部分...JS、资源控制、缓存等都几乎和AMP相似，还有原页面与MIP页面的互相引用方法（加标签），都和Google AMP一样，官网的页面布局、菜单安排、技术说明里的内容几乎也是吃惊的一致，看见百度的MIP基本上是照搬...我想一个重要的原因是AMP使用的需要调用官网的JS库，用于控制资源加载、缓存等功能： </script

1.4K6 0

互联网人群画像和你所不知道的真相

，广告的内容和创意可以根据你的具体情况来进行安排，而不需要根据网站上的内容（或在手机APP的类型）来放一个所有来这个网站的人都看到的一模一样的广告。...为了解决这个问题，一些广告公司想了一个办法，让在不同的网站上访问的同一个人，享有同一个cookie，这个cookie不属于网站，而属于这个广告公司。...所以在mobile端的唯一身份标识应该既简单又美好。但其实不然。 Mobile环境的复杂度比PC有过之而无不及。首先，mobile上用户对网站和APP的使用大约各站半壁江山。...现实世界中，mobile既支持网站，又支持APP，同一个人基本上都既会用mobile，又会用APP，我们能够实现跨mobile和APP的唯一用户识别，并在这个基础上做人群画像吗? 技术方法目前没办法。...原来，既然在一个mobile设备内，想要实现一个人在同一个设备上跨APP和网站的识别都没有全局性的通用解决方案，那么一个人使用多个设备就更没有全局解决方案了。

1.7K2 0

轰轰烈烈的Google AMP项目，未来将去往何方？

灵感来源于Chrome团队，Google的AMP上线已有1年多，今天知名作者Lydia带我们来深入剖析AMP的现状和未来。...然而，花在数字媒体网站上的数字广告费用的比例正在缩减。同时，Facebook和Google数字广告费用占据了2015年广告费用总增长份额的77%，并且这个比例还在增长。...AMP是谷歌搜索引擎决定网站排名顺序的因素之一，因此未使用AMP技术的媒体网站不太可能出现在搜索结果的重要轮播位置。这让Google更能决定哪些内容可以触达哪些用户，但却很难把控生产内容的人群。...*一个在搜索引擎结果页面上展示使用了AMP的网站案例和相应的文章页面另一个主要的担忧是，媒体发行商们觉得AMP平台缺乏能够嵌入页面的自定义设计元素。...他们承担的角色不仅关系到媒体发行机构的收入，而且也会影响未来网络上搜寻信息并消费的用户，并且将比以往更能影响到我们可以看到哪些新闻内容。

9137 0

移动端app开发，框架的选择。

它使用JavaScript MVVM框架和 AngularJS来增强应用。提供数据的双向绑定，使用它成为Web和移动开发者的共同选择。...Mobile Angular UI Mobile Angular UI是使用 bootstrap 3 和 AngularJS 的响应式移动开发HTML5框架。...Mobile Angular UI的关键字有： Bootstrap 3 AngularJS Bootstrap 3 Mobile组件，比如switches, overlays和sidebars，这些都是...和Mac版，它还提供了很多个开发框架，比如Twitter bootstrap, jQuery Mobile 和 Topcoat....Beta版兼容Android和iOS，Android上的开发人员还可以使用一些专为Android定制的主题。 3.增强的触摸事件。

3.5K1 0

Github Pages 体验使用教程

，有非常多优秀的人愿意把自己辛苦辛苦写的代码开放给所有的人使用，我们写代码就可以站在前人的肩膀上，这样就大大降低了写代码的难度。...而这些开源代码大多数都放在一个叫Github的网站上。...Bootstrap）或前端框架（比如前端开发工程师最流行的三大框架Vue、React、Angularjs）; 人工智能学习系统TensorFlow; 可以说Github上面的资料是非常的丰富，我们可以像关注知乎或微博里面的大...在Github上面找到你上传的代码仓库打开Github官网，在首页右下角你的项目Your repositories可以看到你新上传的代码仓库，你也可以点击右上角你的头像那里下拉选择你的资料Your...如果你之前没有了解过Github或Github Pages，除了下载Github Desktop之外，还推荐下载Sourcetree，它和Github Desktop本质是相同的，大家可以自行百度这两个软件的使用教程

8823 0

收好61个前端热词清单，成为跟上潮流的前端仔

Bootstrap 视情况而定。 Bootstrap一般是指一个免费的、开源的前端框架，用于设计网站和网络应用。...CSS选择器 CSS Selectors 一个CSS选择器可以选择你想要样式的HTML元素。常用的选择器使用HTML类、ID和标签；但也有大量复杂的选择器，可以用来细化选择元素。...这些是你的网站上的元素（一般是按钮），推动某些转换或目标，如捐款、通讯注册或用户注册。调试 Debugging 还记得我们谈到的那些bug吗？嗯，调试是识别和处理它们的过程。...你可以把框架看成是一个解决方案、工具和组件的集合，你可以在一个中心位置访问它们--而不是每次都单独寻找它们。 Git Git是一个版本控制系统，开发者可以在这里存储和管理他们的代码。...库 Libraries 库是一组有意义的模块，它们可以在一个程序或另一个库中使用。一个包是一个分发单位，它可以包含一个库或一个可执行文件，或两者都包含。

2.2K6 5

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭