首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

友好的Bootstrap,让你越码越“上瘾”

Bootstrap 是什么 随着互联网技术的发展,以及现在的移动互联网风靡全球,现在的网页已经不是过去那么的简单和纯粹。除了追求功能业务的实现外,现在的网页更多的是追求页面的美观、人性化、便捷等。...2010 年6 月,为了提高内部的协调性和工作效率,Twitter 公司的设计师Mark Otto 和Jacob Thornton 合作开发了Bootstrap,它是由动态CSS 语言Less 写成。...html5shiv.js 主要是为了让不支持HTML5 特性的IE 浏览器版本识别HTML 5 中的元素,respond.js 是让不支持CSS 3 媒体查询(Media Query)的浏览器(主要是IE...9 以下版本)支持媒体查询。...bootstrap-theme.min.css 一般情况下不引用到页面中。

2K20
您找到你想要的搜索结果了吗?
是的
没有找到

月入35k大佬总结:web前端必须学习的内容(附全套前端教程)

项目开发过程中,我们可以借助Bootstrap提供的CSS样式、组件、JavaScript插件等快速的完成页面布局和样式设置,然后再有针对性的微调样式,这样基于框架进行开发大大缩短了开发周期。...第二阶段:移动web网页开发:移动web开发6天完整 ​ H5C3进阶:新布局标签、多媒体标签、新增表单标签、新增表单属性、2D、3D 变换、animation 动画、炫酷页面开发 Felx伸缩布局:...视口、rem 单位使用、移动端主流适配解决方案、常见移动端样式兼容方案、预处理器 less、媒体查询 本阶段学习关键词: HTML5 标签、CSS3 动画、移动端适配、真机调试、rem、flex 布局...、媒体查询Bootstrap、Viewport、移动端调试 本阶段需要掌握的能力如下: 掌握 HTML5 新布局标签、多媒体标签; 掌握 CSS3 2D、3D 变换、动画效果; 了解移动端屏幕、移动端浏览器...、操作系统的不同; 掌握常用移动端调试方法; 掌握常用移动端适配方法; 掌握 CSS 预处理器 less 的使用; 掌握常用移动端框架使用方法; 掌握常见移动端页面开发; 掌握响应式布局开发; 掌握 Bootstrap

2.2K40

如何让bootstrap兼容ie8+

又翻出bootstrap官方API,细读之……这才明白由于bootstrap做响应式所用的栅格布局ie8下不被支持,而且也不支持html5的新标签和css3的一些效果,如圆角、阴影、一些过渡效果等……...DOCTYPE html> 而且注意doctype前后不要有空行 使用meta标签来调节浏览器的渲染方式 IE 兼容模式 Bootstrap 不支持 IE 古老的兼容模式。...此 meta 标签被包含在了所有 Bootstrap 文档和实例页面中,为的就是每个被支持的 IE 版本中拥有最好的绘制效果。...& lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more) 其实就是使media query(媒体查询...说白了就是respond.js只有服务器端才可以使用,直接在本地打开html文件,是无法测试的!! 那要怎么办?简单,本地配个服务器就行了。 你可能感觉配服务器好难啊!

1.1K40

前端响应式布局为什么是个坑?

媒体查询:Media Queries,是响应式布局的核心,浏览器会根据条件选择需要渲染的html和css内容。...,要把公共样式放到最前边,媒体查询代码放到最后。...bootstrap框架用的就是媒体查询原理,我们做响应式布局的时候,基本都会借用bootstrap框架提高工作效率。 四、响应式优缺点 4.1、优点: 面对不同分辨率设备灵活性强。...响应式布局使用移动端窄屏时,隐藏内容依然会加载,低分辨率加载高质量图片或视频,不同屏幕尺寸都提供相同的网页,加载内容多,浪费流量,速度慢,容易造成用户流失。 兼容所有终端,工作量大,效率低下。...用户不同终端搜索习惯不同,百度对移动端和PC端的关键词处理策略也不同,百度搜索排名也是有PC和移动端之分的,所以如果要做优化,不建议响应式布局。

95240

前端响应式布局为什么是个坑?

媒体查询:Media Queries,是响应式布局的核心,浏览器会根据条件选择需要渲染的html和css内容。...,要把公共样式放到最前边,媒体查询代码放到最后。...bootstrap框架用的就是媒体查询原理,我们做响应式布局的时候,基本都会借用bootstrap框架提高工作效率。 四、响应式优缺点 4.1、优点: 面对不同分辨率设备灵活性强。...响应式布局使用移动端窄屏时,隐藏内容依然会加载,低分辨率加载高质量图片或视频,不同屏幕尺寸都提供相同的网页,加载内容多,浪费流量,速度慢,容易造成用户流失。 兼容所有终端,工作量大,效率低下。...用户不同终端搜索习惯不同,百度对移动端和PC端的关键词处理策略也不同,百度搜索排名也是有PC和移动端之分的,所以如果要做优化,不建议响应式布局。

1.7K10

前端响应式布局为什么是个坑?

媒体查询:Media Queries,是响应式布局的核心,浏览器会根据条件选择需要渲染的html和css内容。...,要把公共样式放到最前边,媒体查询代码放到最后。...bootstrap框架用的就是媒体查询原理,我们做响应式布局的时候,基本都会借用bootstrap框架提高工作效率。 四、响应式优缺点 4.1、优点: 面对不同分辨率设备灵活性强。...响应式布局使用移动端窄屏时,隐藏内容依然会加载,低分辨率加载高质量图片或视频,不同屏幕尺寸都提供相同的网页,加载内容多,浪费流量,速度慢,容易造成用户流失。 兼容所有终端,工作量大,效率低下。...用户不同终端搜索习惯不同,百度对移动端和PC端的关键词处理策略也不同,百度搜索排名也是有PC和移动端之分的,所以如果要做优化,不建议响应式布局。

88720

Bootstrap笔记

表示如果在IE浏览器下则使用最新的标准渲染当前文档视口 视口的作用:移动浏览器中...,当前值表示移动端页面的宽度为设备的宽度,并且不缩放(缩放级别为1)width:视口的宽度initial-scale:初始化缩放user-scalable:是否允许用户自行缩放(值:yes/no; 1...jQueryBootstrap框架中的所有JS组件都依赖于jQuery实现html5shiv让低版本浏览器可以识别HTML5的新标签,如header、footer、section等respond让低版本浏览器可以支持CSS媒体查询功能基础...,当前值表示移动端页面的宽度为设备的宽度,并且不缩放(缩放级别为1) width:视口的宽度 initial-scale:初始化缩放 user-scalable:是否允许用户自行缩放(值:yes/no...让低版本浏览器可以识别HTML5的新标签,如header、footer、section等 respond 让低版本浏览器可以支持CSS媒体查询功能 基础CSS样式 概要

3.3K90

用于H5的移动开发框架

Ionic 主要关注外观和体验,以及和你的应用程序的 UI 交互,特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。...AngularJS modules, 比如 angular-route, angular-touch 和 angular-animate   响应式媒体查询是将bootstrap作为单独的文件,你只需要包含你所需要的东西...• 侧滑导航   mui提供了两种侧滑导航实现:webview模式和div模式,两种模式各有优劣,适用于不同的场景。...每种侧滑实现模式,有不同的侧滑动画效果,主要分为四类:   动画1:主界面移动、菜单不动   动画2:主界面不动、菜单移动   动画3:主界面和菜单同时移动   动画4:缩放式侧滑(类手机QQ)   •...mui的列表控件也支持滑动触发操作菜单功能,仅需按照特定格式拼装DOM结构即可;另外,滑动还支持事件触发,开发者可以通过监听滑动事件(slideleft/slideright),完成操作前的确认提醒工作

4.8K10

移动开发-响应式

移动开发-响应式布局 响应式开发原理: 使用媒体查询针对不同宽度的设备进行布局和样式设置,从而适配不同设备 设备划分 尺寸区间 超小屏幕 (手机) < 768px 小屏设备 (平板) >= 768px...,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化 也可以根据实际情况自己定义划分 Bootstrap 简介: Bootstrap...以上来自2020年的数据 Bootstrap 使用: 控制权框架本身,使用者要按照框架所规定的某种规范进行开发 <!...大屏 .hidden-xs 隐藏 可见 可见 可见 .hidden-sm 可见 隐藏 可见 可见 .hidden-md 可见 可见 隐藏 可见 .hidden-lg 可见 可见 可见 隐藏 为了加快对移动设备友好的页面开发工作...,利用媒体查询功能,并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容 Bootstrap 其他 (按钮、表单、表格) 可参考 Bootstrap 文档 本节单词: Bootstrap container

2.4K20

HTML5移动开发的10大移动APP开发框架

国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。   ...Ionic 主要关注外观和体验,以及和你的应用程序的 UI 交互,特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。   ...AngularJS modules, 比如 angular-route, angular-touch 和 angular-animate   响应式媒体查询是将bootstrap作为单独的文件,你只需要包含你所需要的东西...• 侧滑导航   mui提供了两种侧滑导航实现:webview模式和div模式,两种模式各有优劣,适用于不同的场景。...每种侧滑实现模式,有不同的侧滑动画效果,主要分为四类:   动画1:主界面移动、菜单不动   动画2:主界面不动、菜单移动   动画3:主界面和菜单同时移动   动画4:缩放式侧滑(类手机QQ)   •

6.4K10

用于H5的移动开发框架

Ionic 主要关注外观和体验,以及和你的应用程序的 UI 交互,特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。...AngularJS modules, 比如 angular-route, angular-touch 和 angular-animate   响应式媒体查询是将bootstrap作为单独的文件,你只需要包含你所需要的东西...• 侧滑导航   mui提供了两种侧滑导航实现:webview模式和div模式,两种模式各有优劣,适用于不同的场景。...每种侧滑实现模式,有不同的侧滑动画效果,主要分为四类:   动画1:主界面移动、菜单不动   动画2:主界面不动、菜单移动   动画3:主界面和菜单同时移动   动画4:缩放式侧滑(类手机QQ)   •...mui的列表控件也支持滑动触发操作菜单功能,仅需按照特定格式拼装DOM结构即可;另外,滑动还支持事件触发,开发者可以通过监听滑动事件(slideleft/slideright),完成操作前的确认提醒工作

5K40

Bootstarp

字体是矢量的:不失帧 前端页面可用于android访问 优点:移动设备优先 支持所有浏览器(360不算浏览器) 自适应屏幕大小 目录结构: 若浏览器环境变化,引入js <linkhref="assets/plugins...窗口随系统尺寸Grid最多分为12列 网格系统     1,table ,加载完所有,显示表格     2,div+css,加载一点,显示一点:操作难度大 <em>移动</em>设备策略      <em>媒体</em><em>查询</em>,(渐进增强:...向上兼容)内容先显示 行必须放在.container class内 内容放在列内,列是行的直接子元素 预定义网格:.row 和.col(列)-xs(设配)-4(所占列数) 使用<em>媒体</em><em>查询</em>     语法:@...media <em>媒体</em>类型 and(<em>媒体</em>特性:作用的范围){你的样式}     @media screen and (max-widthj:480px){     .a{display:none} //当小于

1.2K20

移动端WEB开发之响应式布局

1.0 响应式开发原理 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。...原理就是不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化。...2.6 bootstrap栅格系统 Bootstrap提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。...-4 col-lg-push-8">左侧 右侧 ​ 响应式工具 为了加快对移动设备友好的页面开发工作...,利用媒体查询功能,并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。

3.4K31

移动端WEB开发之响应式布局

1、响应式开发原理 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。...原理就是不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化。...-4 col-lg-push-8">左侧     右侧 ​ 响应式工具 为了加快对移动设备友好的页面开发工作...,利用媒体查询功能,并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。...里面 container宽度 最大为 1170px,因此我们需要手动改下container宽度 /* 利用媒体查询修改 container宽度适合效果图宽度 */ @media (min-width

4K20

移动开发之响应布局

移动开发之响应布局 1.响应式开发 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。...,通过媒体查询来改变这个布局容器的大小,再改变里面的子元素的排列方式和大小,从而实现不同屏幕下,看到不同的页面布局和样式变化 平时我们的响应式尺寸划分 超小屏幕(手机,小于768px):设置宽度为...Bootstrap提供了一套响应式,移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多十二列 Bootstrap里面container宽度是固定的,但是不同屏幕下...col-md-push-8">左侧 右侧 3.6 响应式工具 为了加快对移动设备友好的页面开发工作...,利用媒体查询功能,并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。

2.2K20

第120天:移动端-Bootstrap基本使用方法

等 respond——让低版本浏览器可以支持CSS媒体查询功能 条件注释:当满足if条件时,才执行里面的文件 3、视口 视口的作用:移动浏览器中,当页面宽度超出设备,浏览器内部虚拟的一个页面容器,将页面容器缩放到设备这么大,然后展示 目前大多手机浏览器的视口(承载页面的容器)宽度都是980...; 视口的宽度可以通过meta标签设置 此属性为移动端页面视口的设置,当前值表示移动端页面的宽度为设备的宽度,并且不缩放(缩放级别为1) width:视口的宽度 initial-scale:初始化缩放...--respond让低版本浏览器可以使用CSS3的媒体查询--> 11 4、媒体查询 根据判断条件,决定CSS代码是否被执行  5、Bootstrap浏览顺序 (1)预置样式 预制排版样式——按钮样式——表格样式——表单样式——图片样式——辅助工具类——代码样式

3.2K40

九彩拼盘的前端技能

功能弱,还要去浮动) inline-block(兼容旧些的浏览器用) Flex (主流) Grid(和Flex配合,面向未来)(只是了解) 响应式 媒体查询 rem 的使用(配合 JS 动态设置根节点的字体大小更灵活...常见浏览器兼容性问题和解决 提高代码质量&工作效率 严格模式 流程控制:Promise,async/await,Event Bus(事件的发布与订阅)。...综合 页面性能优化 页面加载的优化 代码执行速度的优化 代码调试 浏览器的调试工具 移动端页面调试 微信中:微信开发者工具 Weinre 调试线上页面 Fiddler HTTP (缓存机制,...UI 框架:Bootstrap 2,Bootstrap 3。 加载器:Webapck, Requirejs, Seajs。...工作流:Webpack, Gulp.js, Grunt(不推荐。Gulp 比 Grunt效率高)。 生成项目结构脚手架:yo 软件 IDE:Sublime(Vim 模式,Emmet)。

1K20
领券