css框架

一. 使用Bootstrap的准备 　　因为Bootstrap是基于JQuery的，所以导入Bootstrap前一定要先导入JQuery。 　　这里先用cdn的方式导入JQuery（用cdn要保证你有网，不然就没用了）。 　　注意：无论用框架还是什么，都尽量先别用最新版的，因为最新版的Bug要是碰到了就很倒霉，旧版本相对来说比较稳定，我们不做第一个吃螃蟹的人。 1. 用cdn导入JQuery 　　 1.1 打开BootCDN官网 ： https://www.bootcdn.cn/ 　　 1.2 点击JQuery 　　 1.3 选择压缩的版本，点击复制标签 　　 1.4 打开pycharm的设置 　　 1.5 修改创建HTML文件的模板，让每次创建的HTML都自己用cdn导入JQuery 2. 关于Bootstrap代码无提示的解决方式 　　没有提示是因为浏览器没有加载过Bootstrap。 1. 下载3.X版本-用于生产环境的Bootstrap（） 2. 解压后css文件夹中只留一个bootstrap.min.css文件，其他全删掉（min代表是压缩的） 3. js文件夹中只留bootstrap.min.js文件，其他全删掉 4. 将整个解压的包复制到pycharm项目中 5. 用link和script标签导入包中的css和js 　　这样操作过之后，用cdn导入的都会有代码提示了。

由 OpenDigg 出品的前端开源项目周报第二期来啦。我们的前端开源周报集合了OpenDigg一周来新收录的优质的前端开发方面的开源项目，方便前端开发人员便捷的找到自己需要的项目工具等。 react-fix-it 根据error自动生成测试 siema 轻量级轮播框插件 css-loader CSS加载器 rexxar-android 针对移动端的混合开发框架 react-decoration React组件装饰集合 pxq 基于 react + redux + immutable + ES6 的单页面项目 docute 无需生成过程直接编写文档 styles-debugger CSS-in-JS应用的调试样式可见辅助器 css-pokemon 低聚合的动画Pokemon angular2-idle-preload 使用请求IdleCallback用于预加载异步/lazy路线 wecqupt 在微信内被便捷地获取和传播 RNPolymerPo 基于React Native 的生活类聚合实战项目 css-constructor React组件的CSS构造函数 wx-charts 微信小程序图表工具 wemark 微信小程序Markdown渲染库 ios7-vue 使用vue2.0 vue-router vuex模拟ios7 vue-quill-editor 基于Quill

3 月，跳不动了？>>> 上周花了 3 天的时间和老大一起重构了一下小程序的样式开发，虽然说在开发的过程中遇到了一些问题，但是最终减少了不少样式代码，同时功能上也更加强大。进一步来说，如果在后面我们的小程序用户想要自己定制化主题，也可以很快的实现。 全局样式开发 之前的小程序开发中，我们全方面使用了 Component 构造小程序组件以及页面(页面也可以使用 Component 构造器来编写)。当然一方面是因为小程序 Component 的开发体验非常好，拥有类似于 Vue mixin, watch 的 behaviors 和 observers ，比 Page 构造器强大了很多。另一方面，对于业务较重的小程序来说, Component 也有性能优势。可以参照 滴滴开源小程序框架Mpx 中的 Page与Component setData性能对照 。 在开发过程中，有很多样式是可以复用的。如果在之前开发中经常使用 Bootstrap 之类的 ui 库，那么你就会习惯使用这种库的 utilities 类。但是默认情况下，自定义组件的样式只受到自定义组件 wxss 的影响。不会受到全局样式 app.wxss 的影响。所以我们只能通过增加 @import 语法来辅助各个组件进行开发。 @import "xxx.css"; 如果你使用 CSS 预处理器来辅助小程序开发的话，可能就需要通过

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师 Mark Otto 和 Jacob Thornton 合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成，与CSS框架 Blueprint 存在很多相似之处。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的 code.nasa.gov 和MSNBC（微软全国广播公司）的 Breaking News 都使用了该项目。 Bootstrap 2.0 的一个重大改进是添加了响应设计特性，在1.0中它并不支持，这让很多开发人员抱怨。而且为了提供更好地针对移动设备的响应式设计方案，Bootstrap 2.0采用了更为灵活的12栏网格布局。此外，它还更新了一些进度栏以及可定制的图片缩略图，并增加了一些新样式。值得关注的是，Bootstrap是一个非常轻量级的框架，2.0在压缩后也只有10KB。 更多详细信息请参考Twitter的 官方指南 和 演示示例 。 来源： https://www.cnblogs.com/eastson/archive/2012/09/20/2695401.html

移动h5开发资源整理 这2年来，移动h5开发逐渐成为一种主流，也不断趋向于成熟。硬件和浏览器的不断更新，曾经的浏览器兼容也不再是开发者的噩梦。 接触h5开发一年多，从最初的新手到现在，陆陆续续遇到过很多坑。这里把想到的一些经验与资源罗列出来，给刚入h5的同学带来一些帮助。该文章会持续更新。 内容比较多，可以点击下方『悬浮菜单按钮』进行选择需要阅读的章节。 基础知识 新手建议看看下面的在线教程。 html,css,JavaScript,jQuery在线教程： w3school在线教程： http://www.w3school.com.cn/ 菜鸟教程： http://www.runoob.com/ 参考手册： jQuery： http://hemin.cn/jq/ css： http://css.doyoe.com/ h5页面基本组成 meta viewport模板 以上支持响应式布局设计。 有用的js类库 jQuery 这个必须学会的。 在线教程： http://www.w3school.com.cn/jquery/index.asp 在线手册： http://hemin.cn/jq/ Zepto Zepto和jQuery基本是一样的，只是由于其体积更小，适合移动端使用。 如果你会用jquery，那么你也会用zepto。注意，zepto并没有实现jQuery的所有功能

Tailwind CSS Tailwind是用于构建自定义用户界面的实用CSS框架。 每个Tailwind小应用都有多种尺寸，这使得创建响应式界面变得非常简单。 您可以自定义颜色，边框尺寸，字体，阴影等等，没有任何限制。 Pretty Checkbox 这是一个纯CSS库，用于创建漂亮的复选框和单选按钮。 它提供了不同的形状（正方形，曲线，圆形），选择方式（默认，填充，thick），颜色（主要，成功，信息），颜色类型（实心，轮廓）和动画。 它支持自定义字体图标，SVG图标和SCSS自定义。 Bulma 这是一个基于Flexbox的免费开源CSS框架。 Bulma有39个.sass文件，可以单独导入。 您可以轻松地自定义它，并使用您喜欢的颜色和变量创建自己的主题。 Bulma中的每个元素都是移动端优先的，并针对小屏幕进行了优化。 React Static 由Nozzle.io创建的React静态网站框架。 它具有令人难以置信的快速运行时间和性能，并提供惊人的用户体验。 它完全使用React构建，支持所有React生态系统，包括CSS-in-JS库，GraphQl和Redux。 Bottender Bottender是一个开发跨平台机器人的JavaScript框架。 它是用ES6 / ES7语法编写的，完全支持异步等待功能。 您可以使用会话存储，HTTP服务器框架或将其连接到任何平台。

Bootstrap框架和inconfont、font-awesome使用 iconfont的使用： https://www.cnblogs.com/clschao/articles/10387580.html Bootstrap介绍 　　Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。 　　它是为实现快速开发Web应用程序而设计的一套前端工具包。 　　它支持响应式布局，并且在V3版本之后坚持移动设备优先。 就是复制黏贴一把梭，html\css\js代码的封装组合 为什么要使用Bootstrap？ 　　在Bootstrap出现之前： 　　命名：重复、复杂、无意义（想个名字费劲） 　　样式：重复、冗余、不规范、不和谐 　　页面：错乱、不规范、不和谐 　　在使用Bootstrap之后： 各种命名都统一并且规范化。 页面风格统一，画面和谐。 Bootstrap下载 　　官方地址：https://getbootstrap.com 　　中文地址：http://www.bootcss.com/ 　　我们使用V3版本的Bootstrap，我们下载的是用于生产环境的Bootstrap。 Bootstrap环境搭建 　　目录结构： bootstrap-3.3.7-dist/ ├── css // CSS文件 │ ├── bootstrap-theme

1. 你对浏览器的理解？ 浏览器的主要功能是将用户选择的 web 资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常 是 HTML，也包括 PDF、image 及其他格式。用户用 URI（Uniform Resource Identifier 统一资源标识符）来指定所请 求资源的位置。 HTML 和 CSS 规范中规定了浏览器解释 html 文档的方式，由 W3C 组织对这些规范进行维护，W3C 是负责制定 web 标准的 组织。 但是浏览器厂商纷纷开发自己的扩展，对规范的遵循并不完善，这为 web 开发者带来了严重的兼容性问题。 简单来说浏览器可以分为两部分，shell 和 内核。 其中 shell 的种类相对比较多，内核则比较少。shell 是指浏览器的外壳：例如菜单，工具栏等。主要是提供给用户界面操作， 参数设置等等。它是调用内核来实现各种功能的。内核才是浏览器的核心。内核是基于标记语言显示内容的程序或模块。也有一些 浏览器并不区分外壳和内核。从 Mozilla 将 Gecko 独立出来后，才有了外壳和内核的明确划分。 2. 你对浏览器内核的理解？ 主要分成两部分：渲染引擎和 JS 引擎。 渲染引擎的职责就是渲染，即在浏览器窗口中显示所请求的内容。默认情况下，渲染引擎可以显示 html、xml 文档及图片，它也 可以借助插件（一种浏览器扩展

1.介绍 CSS 预处理预处理框架，顾名思义，预先处理 CSS。那 stylus 咋预先处理呢？stylus 给 CSS 添加了可编程的特性，也就是说，在 stylus 中可以使用变量、函数、判断、循环一系列 CSS 没有的东西来编写样式文件，执行这一套骚操作之后，这个文件可编译成 CSS 文件。 2.安装 Stylus 首先，安装 stylus，win+r打开cmd（确保之前已经安装 nodejs ，cmd下输入node -v，回车提示node版本号），-g代表全局安装。 npm install stylus -g 3.获得相关的命令行支持 stylus -h 4.如何将stylus编译成css文件 stylus stylus.styl -o style.css 项目stu目录下新建一个css文件夹用来存放css文件，再新建一个stylus文件夹用来存放stylus文件。 在stylus文件夹下新建test1.styl文件,里面添加（stylus语法代码，来自官网） border-radius() -webkit-border-radius arguments -moz-border-radius arguments border-radius arguments body font 12px Helvetica, Arial, sans-serif a.button

前面的话 　　一说到响应式设计，肯定离不开媒体查询media。一般认为媒体查询是CSS3的新增内容，实际上CSS2已经存在了，CSS3新增了媒体属性和使用场景(IE8-浏览器不支持)。本文将详细介绍媒体查询的内容 媒介类型 　　在CSS2中，媒体查询只使用于<style>和<link>标签中，以media属性存在 　　media属性用于为不同的媒介类型规定不同的样式 screen 计算机屏幕（默认值） tty 电传打字机以及使用等宽字符网格的类似媒介 tv 电视类型设备（低分辨率、有限的屏幕翻滚能力） projection 放映机 handheld 手持设备（小屏幕、有限的带宽） print 打印预览模式 / 打印页 braille 盲人用点字法反馈设备 aural 语音合成器 all 适合所有设备 　　真正广泛使用且所有浏览器都兼容的媒介类型是'screen'和'all' <style media="screen"> .box{height: 100px;width: 100px; background-color: lightblue;} </style> <div class="box"></div> 媒体属性 　　媒体属性是CSS3新增的内容，多数媒体属性带有“min-”和“max-”前缀，用于表达“小于等于”和“大于等于”。这避免了使用与HTML和XML冲突的“<”和“>