css框架 | 易学教程

通过LESS/Sass自定义Bootstrap的式样

阅读更多关于通过LESS/Sass自定义Bootstrap的式样

一、定制Bootstrap 在实际前端UI开发中，对 Bootstrap 的式样进行自定义是必要的。定制Boostrap的式样的方法通常有如下几种：覆盖原有的bootstrap式样通过构建器，对bootstrap中的式样变量自定义。通过bootstrap less深度定制式样。下面我们就来分析上面的三种方法各自的优缺点。方法一、覆盖原有的bootstrap式样这里的“覆盖”是CSS层叠式样的覆盖的意思，具体方法是将我们的my-custom.css文件引用放到bootstrap.css文件的后面，这样我们定义的样式就会覆盖原有的样式。优点：方便，不会变更原来的工作流程。缺点：很明显，会导致式样不一致和臃肿，以及降低了CSS式样的可维护性。很显然，这种方法的缺点非常明显，可以在非正式场合如测试环境中使用，但是在正式开发环境中是不应该使用。方法二、使用构建器自定义bootstrap的式样变量使用官网的定制页面 http://v3.bootcss.com/customize/ 可以自定义bootstrap的式样。定制好你的变量后点击download按钮就会生成一套属于你的bootstrap框架了。这种方法：优点：简便了你对整体网站式样的更改。缺点：项目网站的式样必定是不断变更的，这意味着你需要不断的根据你的式样重新构建bootstrap框架

007 前端基础之BootStrap

阅读更多关于 007 前端基础之BootStrap

目录一、介绍使用bootstrap的两种方式二、使用 1. 全局 CSS 样式 2. 组件一、介绍 Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。下载地址： Bootstrap中文网使用bootstrap的两种方式下载后直接引用bootstrap的css和js文件直接引用bootstrap的css和js文件： <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script> 二、使用 1. 全局 CSS 样式设置全局 CSS 样式；基本的 HTML 元素均可以通过 class 设置样式并得到增强效果；还有先进的栅格系统。 BootStrap全局 CSS 样式文档地址： https://v3.bootcss.com/css/ 具体使用方法请参考文档 2. 组件包含无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。 BootStrap全局 CSS

Jquery

阅读更多关于 Jquery

目录前端之Jquery jQuery jQuery介绍 jQuery的优势 jQuery内容： jQuery版本 jQuery对象 jQuery基础语法例子查找标签基本选择器层级选择器：基本筛选器：属性选择器：表单筛选器：筛选器方法示例：左侧菜单操作标签样式操作位置操作位置相关示例之返回顶部示例：尺寸：文本操作文本操作之登录验证示例阻止事件示例属性操作文档处理克隆示例：事件常用事件 keydown和keyup事件组合示例： hover事件示例：实时监听input输入值变化示例：事件绑定on 移除事件off 阻止后续事件执行return示例阻止事件冒泡示例页面载入与window.onload的区别事件委托动画效果自定义动画点赞示例：补充 each .data() 插件(了解即可) 前端之Jquery jQuery jQuery介绍 jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“ jQuery的优势一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。

web前端性能优化总结

阅读更多关于 web前端性能优化总结

转自：http://www.2cto.com/kf/201604/498725.html 网站的划分一般为二：前端和后台。我们可以理解成后台是用来实现网站的功能的，比如：实现用户注册，用户能够为文章发表评论等等。而前端呢？其实应该是属于功能的表现。并且影响用户访问体验的绝大部分来自前端页面。而我们建设网站的目的是什么呢？不就是为了让目标人群来访问吗？所以我们可以理解成前端才是真正和用户接触的。除了后台需要在性能上做优化外，其实前端的页面更需要在性能优化上下功夫，只有这样才能给我们的用户带来更好的用户体验。就好像，好多人问，男人在找女朋友的时候是不是只看外表，一些智慧的男人给出了这样的回答：脸蛋和身材决定了我是否想去了解她的思想，思想决定了我是否会一票否决她的脸蛋和身材。同理，网站也是这样，网站前端的用户体验决定了用户是否想要去使用网站的功能，而网站的功能决定了用户是否会一票否决前端体验。不仅仅如此，如果前端优化得好，他不仅可以为企业节约成本，他还能给用户带来更多的用户，因为增强的用户体验。说了这么多，那么我们应该如何对我们前端的页面进行性能优化呢？一般说来，web前端指网站业务逻辑之前的部分，包括浏览器加载、网站视图模型、图片服务、CDN服务等，主要优化手段有浏览器访问、使用反向代理才、CDN等。浏览器访问优化浏览器请求处理流程如下图： 1、减少http请求，合理设置

Bootstrap基本CSS样式

阅读更多关于 Bootstrap基本CSS样式

一、简介、使用 1、简介　　Bootstrap 来源于 Twitter，是一款基于 Html、Css、JavaScript 的前端UI框架。可以方便、快速的开发web界面。　　教程：https://www.runoob.com/bootstrap/bootstrap-tutorial.html 2、使用（1）直接使用CDN 　　BootCDN网址：https://www.bootcdn.cn/  <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>  <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js">

从前端菜鸟到大神，一篇总结得很好的文章

阅读更多关于从前端菜鸟到大神，一篇总结得很好的文章

结合个人经历总结的前端入门方法，总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限，不能保证面面俱到，只是作为入门参考，面向初学者，让初学者少走弯路。互联网的快速发展和激烈竞争，用户体验成为一个重要的关注点，导致专业前端工程师成为热门职业，各大公司对前端工程师的需求量都很大，要求也越来越高，优秀的前端工程师更是稀缺。个人感觉前端入门相对容易，但是也需要系统地认真学习，在打好基础后坚持学习，成为优秀前端工程师也只是时间问题。学习任何知识最重要的都是兴趣，如果经过一段时间的学习感觉不喜欢，那可能强迫自己学习是很痛苦的，效果也不会好，毕竟这很可能就是以后很多年生存的技能。不过随着互联网行业的发展，前端必然是Web开发人员需要学习的知识，有时候是没有专业前端工程师一起合作的，所以即使不做专门的前端工程师，掌握基本的前端技能为工作带来方便。后期邀请了一些同学分享学习经历。如果有同学愿意分享,欢迎push 必备基础技能前端技能汇总（ https:// github.com/JacksonTian/ fks ）这个项目详细记录了前端工程师牵涉到的各方面知识。在具备基本技能之后可以在里面找到学习的方向，完善技能和知识面。 frontend-dev-bookmarks（ https:// github.com/dypsilon/fro ntend-dev

PC端适应屏幕分辨率

阅读更多关于 PC端适应屏幕分辨率

如何让HTML页面适应不同的屏幕分辨率 1.根据不同的分辨率，加载不同的css样式文件(一般不用) ①针对800、1280、1440、1600、1920等分辨率，创建不同的css文件。然后在各种分辨率css文件下，写css样式表。针对一个页面，写多css样式表，按照不同的要求，有些要求适配1280~1920分辨率，各个分辨率之间，只对页面上的元素进行宽高、尺寸、位置等进行调整，整体的框架是相似或者说是相同的。通常是先完成一个分辨率下的css样式表。然后在这个基础之上，对其他分辨率进行调整。 ②加载方式。在HTML页面的 <head></head> 标签中，插入<script>代码，在不同的分辨率下，加载不同的css样式表。注意这里的js一定要写在 <head></head> 标签里面，这样在加载页面内容之前，可以提前把css样式表加载出来 <script> // 分辨率大于等于1680，大部分为1920的情况下，调用此css if(window.screen.width >= 1680){ document.write('<link rel="stylesheet" href="css/index_1920.css">'); } // 分辨率在1600-1680的情况下，调用此css else if(window.screen.width >= 1600){

CSS Grid 网格布局教程

阅读更多关于 CSS Grid 网格布局教程

一、概述网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。上图这样的布局，就是 Grid 布局的拿手好戏。 Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。 Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。二、基本概念学习 Grid 布局之前，需要了解一些基本概念。 2.1 容器和项目采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。 <div> <div><p>1</p></div> <div><p>2</p></div> <div><p>3</p></div> </div> 上面代码中，最外层的 <div> 元素就是容器，内层的三个 <div> 元素就是项目。注意：项目只能是容器的顶层子元素，不包含项目的子元素，比如上面代码的 <p> 元素就不是项目。Grid 布局只对项目生效。 2.2 行和列容器里面的水平区域称为"行"（row）

LESS

阅读更多关于 LESS

Less Sass styuls 一款比较流行的预处理CSS，支持变量、混合、函数、嵌套、循环等特点官网中文网 http://www.w3cplus.com/css/less 概要为什么要有预处理CSS CSS基本上是设计师的工具，不是程序员的工具。在程序员的眼里，CSS是很头痛的事情，它并不像其它程序语言，比如说PHP、Javascript等等，有自己的变量、常量、条件语句以及一些编程语法，只是一行行单纯的属性描述，写起来相当的费事，而且代码难易组织和维护。很自然的，有人就开始在想，能不能给CSS像其他程序语言一样，加入一些编程元素，让CSS能像其他程序语言一样可以做一些预定的处理。这样一来，就有了“CSS预处器（CSS Preprocessor）”。什么是预处理CSS CSS语言的超集，比CSS更丰满 CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性更强

webpack的使用

阅读更多关于 webpack的使用

认识webpack webpack是一个js模块打包工具，作用： 1.我们只需要将webpack进行模块化开发，然后通过webpack来处理模块间的依赖关系，不仅仅是js文件，我们的css，图片，json文件等等在webpack中都可以当成模块来开发 2.除了打包文件，webpack还可以对资源进行处理，比如：压缩图片，将scss转换成css，将ES6语法转换成ES5，将TypeScript转换成JavaScript 和grunt/gulpd的对比 grunt/gulp更加强调的是前端流程的自动化，模块化不是他的核心 webpack更加强调的是模块化开发管理，而文件压缩合并，预处理等功能，是他附带的功能如果功能模块依赖简单，只需要简单的合并，压缩，就使用grunt/gulp即可，如果项目使用了模块化管理，而且相互依赖强，就使用webpack webpack的安装首先，webpack依托于node环境 npm install @webpack3.6.0 -g （全局安装） cd到对应目录 npm install @webpack3.6.0 --save-dev （局部安装）在终端直接执行webpack命令，使用的全局安装的webpack 在package.json中定义了script时，其中包含了webpack命令，那么使用的是局部webpack 准备工作我们创建两个文件夹

订阅 css框架