xjwolaile
- 浏览: 341974 次
- 性别:
- 来自: 杭州
-
文章分类
- 全部博客 (354)
- 学习 (219)
- 工作 (69)
- 前端技术 (188)
- 个人评论 (1)
- 工作总结 (1)
- 工作的方法 (1)
- 代码库 (1)
- jQuery (63)
- javascript (4)
- css (4)
- 网络通信协议 (3)
- web (7)
- 服务端性能 (1)
- 优化 (1)
- html5 (4)
- serialize (1)
- 上线页面 (1)
- ie6 (6)
- js (1)
- iframe (1)
- flash (1)
- a (1)
- img (1)
- 页面tms的要求 (1)
- kissy (3)
- 需求也页面 (0)
- 需求页面 (2)
- 视频插件 (1)
- 切图片 (1)
- map (1)
- display (1)
- 浮动定位 (1)
- 大小图片的切换功能 (2)
- demo (1)
- margin (1)
- a标签 (1)
- border (1)
- 侧导航 (1)
- 切换PNG格式的css (1)
- padding (1)
- 显示添加和删除 (1)
- 滚动条 (1)
- 和图片处理 (1)
- 移动端 (1)
- 定位 (1)
- 移动端的包的引入作用与直接拨打电话的A标签 (1)
- git (1)
- node.js (1)
- Zepto (1)
最新评论
-
幻紫1992：
还有分页的功能、、(⊙o⊙)嗯
[JS代码库] -
幻紫1992：
就是没有返回顶部的按钮，这个页面、、
[JS代码库] -
幻紫1992：
很受用，O(∩_∩)O谢谢啦~
[JS代码库] -
nlnl520coco：
想下个东西 规则太苛刻了 网站得改进
[JS代码库] -
hxp520520：
new Limiter() 这个对象是kissy API里面的 ...
Limiter的简单demo--20131029
通过公司的两个比较大型项目，让我接触到了Bootstrap框架，现在就来说说Bootstrap这个框架
首先，我绝对Bootstrap框架是一个很不错的响应式的框架，特别对于移动端来说，帮助我们前端解决的很多，在样式上的问题，和需要特殊样式的问题。
下面是Bootstrap框架的需要引入的包
下面是支持的游览器
Chrome (Mac、Windows、iOS和Android)
Safari (只支持Mac和iOS版，Windows版已经基本死掉了)
Firefox (Mac、Windows)
Internet Explorer
Opera (Mac、Windows)
Internet Explorer 8 和 9
IE兼容模式
Bootstrap不支持IE的兼容模式。为了让IE浏览器运行最新的渲染模式，建议将此 <meta> 标签加入到你的页面中
这里是使用Bootstrap需要在html5中必须要加入的
这里是移动设备中需要加入的
为了确保适当的绘制和触屏缩放，需要在<head>之中添加viewport元数据标签
在移动设备浏览器上，通过为viewport meta标签添加user-scalable=no可以禁用其缩放（zooming）功能
下面来说说什么是响应式，响应式就是通过不同的屏幕宽度来改变当前的页面样式
这个是在css中书写的格式
下面我想说下响应式和自适应的有什么区别，这里是我自己的理解
首先响应式的概念就是我上面写的css样式，是针对不同的屏幕大小，在写出前端需要的先后样式的样式的派排列顺序，当屏幕小到一定的时候，没办法让两个东西同事展示在同一条平行线的时候，就会出现，需要让用户先体验的什么后体验到什么，或许就效果出来就是换一行的样子，但是里面也是存在的先后顺序的，所以这个是需要前端和视觉等部门交涉好的，响应式主要是决绝的这样的问题
那么自适应是什么呢，其实自适应就是一套百分比的css样式，因为百分比的样式结构是可以在任何屏幕正常展示出来的，不论多大或者多小，都可以全部按照需求的需要展示，那是太小或者太大都会给用户带来不好的体验效果。
所以说这两个效果需要根据需求的需要来要进行灵活的替换，自适应本人自己觉得比较适用于变化不太大的地方，就比如在苹果手机端上，就算6出了也就是两个样式，不会有太大的变化，那么响应式本人觉得比较适用于安卓上面，因为安卓的选择行很多，有不同的需要和不用效果，所以相对自适应来说，响应式更加的有针对性，那么自适应就更加的包容性就更大。
首先，我绝对Bootstrap框架是一个很不错的响应式的框架，特别对于移动端来说，帮助我们前端解决的很多，在样式上的问题，和需要特殊样式的问题。
下面是Bootstrap框架的需要引入的包
//这两个一个是正常的css包一个是通过压缩的css包 bootstrap.css bootstrap.min.css //这两个是js的包 bootstrap.js bootstrap.min.js
下面是支持的游览器
Chrome (Mac、Windows、iOS和Android)
Safari (只支持Mac和iOS版，Windows版已经基本死掉了)
Firefox (Mac、Windows)
Internet Explorer
Opera (Mac、Windows)
Internet Explorer 8 和 9
IE兼容模式
Bootstrap不支持IE的兼容模式。为了让IE浏览器运行最新的渲染模式，建议将此 <meta> 标签加入到你的页面中
<meta http-equiv="X-UA-Compatible" content="IE=edge">
这里是使用Bootstrap需要在html5中必须要加入的
<!DOCTYPE html> <html lang="zh-cn"> ... </html>
这里是移动设备中需要加入的
为了确保适当的绘制和触屏缩放，需要在<head>之中添加viewport元数据标签
<meta name="viewport" content="width=device-width, initial-scale=1.0">
在移动设备浏览器上，通过为viewport meta标签添加user-scalable=no可以禁用其缩放（zooming）功能
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
下面来说说什么是响应式，响应式就是通过不同的屏幕宽度来改变当前的页面样式
这个是在css中书写的格式
@media(min-width:1200px){
......这里面写的是你需要的最小宽度1200的屏幕里展示出的样式，也就是说在1199包括1199宽度和一下的都不会启动整套样式
}
@media(max-width:1200px){
......这里是写的最大1200宽度的屏幕，1-1200都会走整套样式1201就不会了
}
@media(min-width:1px)and@media(min-width:1200px){
......这里写的样式是从最小的1到最大的1200都走这里面的样式
}
下面我想说下响应式和自适应的有什么区别，这里是我自己的理解
首先响应式的概念就是我上面写的css样式，是针对不同的屏幕大小，在写出前端需要的先后样式的样式的派排列顺序，当屏幕小到一定的时候，没办法让两个东西同事展示在同一条平行线的时候，就会出现，需要让用户先体验的什么后体验到什么，或许就效果出来就是换一行的样子，但是里面也是存在的先后顺序的，所以这个是需要前端和视觉等部门交涉好的，响应式主要是决绝的这样的问题
那么自适应是什么呢，其实自适应就是一套百分比的css样式，因为百分比的样式结构是可以在任何屏幕正常展示出来的，不论多大或者多小，都可以全部按照需求的需要展示，那是太小或者太大都会给用户带来不好的体验效果。
所以说这两个效果需要根据需求的需要来要进行灵活的替换，自适应本人自己觉得比较适用于变化不太大的地方，就比如在苹果手机端上，就算6出了也就是两个样式，不会有太大的变化，那么响应式本人觉得比较适用于安卓上面，因为安卓的选择行很多，有不同的需要和不用效果，所以相对自适应来说，响应式更加的有针对性，那么自适应就更加的包容性就更大。
分享到：
发表评论
-
Zepto
2015-08-15 13:49 1236Zepto Zepto，是一个比较 ... -
node.js的学习-20140611
2014-06-11 23:17 775//创建一个h1方法里面舒服一个nihao functi ... -
node.js的学习-20140609
2014-06-09 23:01 585Node.js 是一个基于Chrome JavaScript ... -
git的学习-20140604
2014-06-04 23:30 534Git使用 首先 开启"G ... -
PC和移动端的页面的一些差距-20140525
2014-05-25 23:46 881首先 1、标签、描述等描述清晰准确 2、网站结构3层树状结构 ... -
Bootstrap排版基础样式和响应式图片-20140521
2014-05-22 00:41 2740Bootstrap基础排版样式 .col-xs-* // ... -
Bootstrap特性、设计和组件-20140519
2014-05-19 22:22 712特点 Bootstrap是基于jQuery框架开发的，它在j ... -
Bootstrap流式布局-20140515
2014-05-16 00:26 14755流布局是一种适应屏幕的做法。即不固定块的宽度，而是采用百分比作 ... -
Bootstrap的宽度和分辨率的差别-20140514
2014-05-14 23:05 6268首先在bootstrap里面所有 ... -
jquery初步认识-20140123
2014-01-24 01:30 698一、原型模式结构 // 定义一个jQuery构造函数 ... -
html5的特殊标签作用-20140114
2014-01-15 01:04 916<base>、定义页面中所有链接的基准URL & ... -
ie下的指定样式-20140106
2014-01-08 00:00 7721. <!--[if !IE]><!--&g ... -
margin-left在IE6下左浮动加倍-20140102
2014-01-02 23:04 753一、IE6下如果line-height超出本身区块的heigh ... -
浮动存在的问题-20131229
2013-12-29 23:00 545看一个正常的浮动案例 <!DOCTYPE h ... -
在ie6下同张图片不能外面包有a标签后在画热区-20131223
2013-12-23 23:47 871最近在做页面有的发现一个问题 <div class ... -
ie6下导航存在的问题和-2013-12-20
2013-12-21 00:51 645最近在做事的时候发现一个有趣的问题，在上网也找过但是都没有很好 ... -
按比例展示的小js-20131217
2013-12-18 00:41 440做需求的做到一个关于这个功能的项目所以记下来 Math.ra ... -
定位需要注意-20131214
2013-12-15 01:07 707在CSS中关于定位的内容 ... -
flash在Safari下的BUG-20131212
2013-12-12 01:09 771<object width="940&qu ... -
使用模版的基本尝试-20131209
2013-12-10 01:19 641使用模版的基本尝试 模版是大家多多少少都有用多的，那么就在这 ...
相关推荐
本文将深入探讨这个系统的核心技术和部署流程，为读者提供一个全面的认识。 首先，SpringBoot是Spring框架的延伸，旨在简化Spring应用的初始搭建以及开发过程。它集成了大量常用的Java EE功能，如数据源、JPA、...
Bootstrap Paginator是一款基于流行的前端框架Bootstrap开发的分页插件，...通过以上内容，你应该对Bootstrap Paginator有了全面的认识。在实际项目中，根据需求灵活配置和扩展，它将成为你实现高效分页的强大工具。
"熊猫贸易"显然认识到了这一点，他们推出了名为"Panda Site Bootstrap P-4.2"的项目，旨在利用最新的前端技术构建一个功能强大、界面友好的在线平台。这个项目基于流行的Bootstrap框架，版本号为4.2，这表明它融合了...
Bootstrap文件上传组件FileInput是一...通过上述内容，你应该对Bootstrap File Input组件有了全面的认识，能够轻松实现文件批量上传的功能。实践中，根据具体项目需求调整配置，就能打造出用户体验优秀的文件上传功能。
7. 结论与建议：研究提供了对火电企业经营效率的深入认识，特别指出了规模与效率之间的正相关关系，以及政府补贴政策对效率可能产生的负面影响。这为火电企业改进管理、优化经营提供了理论依据，并为相关政策制定...
《PyPI与Python库：深度解析zope2_bootstrap》 PyPI（Python Package ...在实际开发中，除了对库本身的理解，还需要对Zope2框架有深入的认识，以及熟悉Python的编程基础，这样才能更好地发挥`zope2_bootstrap`的作用。
bootstrap-ie8 可能会引入 html5shiv 或其他类似库，来使 IE8 认识并正确渲染这些元素。 5. **响应式图片**：Bootstrap 4 中的 `srcset` 和 `sizes` 属性在 IE8 和 IE9 中不被支持，可能需要使用 Picturefill 或...
通过学习，我们可以提高对Bootstrap的理解，提升网站开发效率，同时也能加深对前端开发最佳实践的认识。 总的来说，深入理解Bootstrap的源代码不仅能帮助我们优化和定制Bootstrap，还能使我们在前端开发中更加...
2. **课程说明**：讲解`text-shadow`、`box-shadow`、`border-radius`、`opacity`及Font Awesome等概念，让学生对即将学习的内容有初步认识。 3. **课堂实训**：学生实际操作，应用所学知识，如添加图标、阴影效果和...
作者希望在完成文章后深入理解这一点，这提示我们在实际开发过程中，需要对JavaScript的this关键字有清晰的认识，以便更准确地控制代码的行为。 总结来说，Bootstrap-table的自定义每页显示记录数功能提供了一种更...
它可能会涵盖项目规划、设计、编码、测试和部署等各个阶段，让你对整个项目开发过程有一个全面的认识。 总的来说，这份资源包是Bootstrap学习者的宝贵财富，不仅有理论知识，还有实践操作。通过学习和模仿这些代码...
根据提供的文件信息，“李炎恢Bootstrap讲义笔记解压.zip”这一资料主要涉及的是Bootstrap框架的相关...通过这份资料的学习，可以帮助学习者建立起对Bootstrap框架的基本认识，并为后续更深入的学习打下坚实的基础。
通过以上对Bootstrap基础知识的详细介绍，相信您已经对其有了较为全面的认识。无论是初学者还是有一定经验的开发者，都能够从中获益。希望这些知识点能够帮助大家更好地掌握Bootstrap框架，为今后的工作和学习打下...
下面小编就为大家带来一篇bootstrap学习心得总结-css样式设计分享。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
jQuery UI Sortable示例这是一个简单的教程，显示了如何使用jQuery UI的sortable插件通过ajax快速更新数据库表的sort order字段。 您也可以从我的网站@ 或GitHub @ 认识我@
在开始搭建博客之前，我们需要对Node.js的基础有清晰的认识。这包括了解Node.js的安装、基本的模块系统（如`fs`用于文件操作，`http`用于创建服务器，`path`用于处理路径等）、npm（Node Package Manager）的使用...
David Cochran在2011年认识到Bootstrap作为一个工具的价值，并开始将其融入到他在Oklahoma Wesleyan University的教学课程中，以便给学生们带来实际的开发利益。 Bootstrap是一个响应式的前端框架，它允许开发者...
在深入理解这款源码之前，我们首先要对Bootstrap有一个基本的认识。 Bootstrap，由Twitter开发并开源，是目前最流行且广泛使用的前端框架之一。它提供了一套响应式布局、移动设备优先的Web开发工具，包括CSS样式表...
1. **基础介绍**：介绍Bootstrap的起源、版本历史以及它的主要组件和工具，让学习者对Bootstrap有个整体的认识。 2. **网格系统**：Bootstrap的网格系统是布局设计的关键。它基于12列的布局，通过类选择器来控制...