Bootstrap
关注
分享
扫一扫
文章平均质量分 63
zzc1684
这个作者很懒，什么都没留下…
展开
-
10套超漂亮的Bootstrap UI KIT(已转Html格式)
我们平时分享过不少的精品UI KIT PSD素材，这些组件虽然很漂亮，但是要转换成HTML网页格式时却不是一件容易的事情，因为UI组件元素很多，如果要转HTML需要不少的时间，而且要精通前端技术。今天设计达人网整理自pixelkit上的免费UI KIT素材，这些PSD已经转成DIV+CSS格式，可以直接快速的应用在网页上，更棒的是它使用Bootstrap框架编写，最新的HTML5+CSS3...原创 2015-06-06 20:27:17 · 468 阅读 · 0 评论 -
使用 Google Fonts 为网页添加美观字体
在线字体提供丰富多样的字体样式，能使页面更美观，更具吸引力。Google Fonts 就是一个开源的在线字体库，使用起来简单快速。 前言文字是网页中很重要的组成部分。为文字选择一个合适的字体，能够更好的展现一个网站的个性，表达所要传递的信息，同时吸引用户来产生兴趣。说到字体，我们首先会想到 CSS 里面的 font，例如：<html><head>...原创 2015-06-12 11:51:17 · 1697 阅读 · 1 评论 -
bootstrap 3.0 LESS源代码浅析（一）
我一直以为Bootstrap的LESS源代码精髓在mixins.less，所以这个系列主要也是讲解mixins.less的。 什么是mixins？混入，或者翻译成混合。官网的说法是：我们可以定义一些通用的属性集为一个 class，然后在另一个 class 中去调用这些属性。看起来非常难理解，没事，我们来看例子，比如有这样一个class：.bordered { ...原创 2015-06-13 20:34:20 · 163 阅读 · 0 评论 -
bootstrap 3.0 LESS源代码浅析（二）
http://www.cnblogs.com/justany/p/3434744.html border-radius是最常见的CSS3属性，但你知道他多少东西呢？比如：border-radius:2em;相当于什么？border-top-left-radius:2em;border-top-right-radius:2em;border-...原创 2015-06-13 20:35:51 · 133 阅读 · 0 评论 -
Bootstrap源码中的LESS变量详解
Bootstrap的核心是用less来编写的，bootstrap对less进行了二次封装，提供了很多基础的less变量和函数，个人觉得非常有用，下面就来具体看下bootstrap为我们提供了哪些常用的变量和函数吧。 Bootstrap变量 基础设置@bodyBackground@white页面背景色 @textColor...原创 2015-06-13 21:13:42 · 480 阅读 · 0 评论 -
LESS CSS非常实用的10个实例应用
LESS, Sass 和其他 CSS 预处理器是一种超棒的方法用来扩展 CSS 功能，使之更适合程序员。你可以使用变量、函数、混合、继承等多种编程常用方法来编写 CSS，以更少的代码完成更多的样式。学习这些工具最好的方法是通过各种实例快速入门，今天我们向你介绍 10 个非常有用的使用 Less CSS 的实例。圆角CSS3 一个非常基本的新属性可以快速的生产圆角...原创 2015-06-13 21:17:58 · 480 阅读 · 0 评论 -
bootstrap源码分析系列：二，栅格和响应式布局
bootstrap把response单独分开作为一个独立模块这样整个栅格系统实际上分为了栅格grid和响应式布局response。非响应式的栅格是940固定宽度的，并且分为固定和流式两种，响应式布局就是通过media query增加了对不同屏幕宽度的适应。布局上，通过容器的负padding-left和每一个列的margin-left来实现的，如下图所示：一，定宽栅格的实现在varia...原创 2015-06-14 01:26:27 · 202 阅读 · 0 评论 -
7 款 Bootstrap 在线框架编辑器
Bootstrap 已经大大简化响应式 web 开发，但是，如果再加上不用手动一点点敲代码，而是可以快速选择你想要使用的 Bootstrap 组件，然后直接将其拖进你的画板中，开发是否会变得更加轻松？！这便是所谓的所见即所得（What you see is what you get，WYSIWYG）开发模式，能帮你达成这一切的，便是“所见即所得编辑器”。所见即所得编辑器通常分为以下两...原创 2015-06-14 01:39:50 · 956 阅读 · 0 评论 -
30个让人兴奋的视差滚动（Parallax Scrolling）效果网站
视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为今年网页设计的热点趋势，越来越多的网站应用了 这项技术。今天这篇文章就与大家分享30个视差滚动效果的网页设计作品，一起欣赏（以拖动滚动条方式浏览效果更佳）。01. Cymetriq 02. Ludwings 03. In...原创 2015-06-16 08:57:04 · 183 阅读 · 0 评论 -
15套免费的扁平化界面设计素材【免费下载】
高品质的网页元素是任何 Web 或移动相关项目的基本要素，质量良好的设计元素对于设计师来说就像一个宝藏，能够帮助他们在很短的时间里设计出优秀的作品。 很多人喜欢扁平化设计风格，它的简单性让用户感觉轻松。这篇文章就给大家分享15套免费的扁平化界面设计素材包，包含各种设计元素，如导航、下拉菜单栏、购物车、登录注册、选项卡以及横幅等等。您可能感兴趣的相关文章23套新鲜出炉...原创 2015-06-16 08:57:29 · 221 阅读 · 0 评论 -
设计师必读的15个响应式网页设计教程
@陈子木 响应式设计是由著名网页设计师Ethan Marcotte在2010年5月提出的设计概念，随后席卷前端和设计领域，成为了如今网页设计的大趋势。正如同Ethan所说：“响应式网站设计提供了一种全新的选择，这种基于栅格布局和CSS3的流动性网页设计，可以让网页随着屏幕变化而响应。这是一种更为统一，更加全面的设计技巧，一种打破网页固有型态和限制的灵活设计方法。” 这种兼顾多屏幕多场景的...原创 2015-11-22 13:45:09 · 229 阅读 · 0 评论 -
【无限滚动加载数据】—infinite-scroll插件的使用
网上对于infinite-scroll插件使用的例子不多。但由于它的出现，鼓吹了瀑布流形式的页面展示方式，所以不得不了解了解这种新的分页方式。官网上有对infinite-scroll的详细描述，但一般人即使看未必看得懂，看得懂未必就调试成功。所以借今晚有点时间，把跑通的例子供大家借鉴。一.无限滚动概念首先，它是基于Jquery的，另外还要明白无限滚动的概念：无限滚动的实现原理...原创 2016-03-08 23:13:19 · 207 阅读 · 0 评论 -
Less2Css插件
Less2Css插件依赖lessc这个工具，下载这个压缩包，然后解压后，将路径添加到系统环境Path变量中，若在cmd中，输入lessc，不报错，则表示设置成功原创 2015-06-12 10:03:05 · 263 阅读 · 0 评论 -
LESS CSS 框架简介 使用 LESS 简化层叠样式表（CSS）的编写
http://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/ http://www.bootcss.com/p/lesscss/#synopsis 简介CSS（层叠样式表）是一门历史悠久的标记性语言，同 HTML 一道，被广泛应用于万维网（World Wide Web）中。HTML 主要负责文档结构的定义...原创 2015-06-11 14:12:40 · 223 阅读 · 0 评论 -
再来 20 个免费的 Bootstrap 的后台管理模板
http://www.oschina.net/news/52033/free-bootstrap-admin-templates 6月14日上海 OSC 源创会开始报名，送机械键盘和开源无码内裤之前 OSC 曾经发过多个后台管理界面模板的推荐，例如：50 个漂亮的后台管理界面模板25 个精美的后台管理界面模板和布局分享 6 套超酷的后台管理...原创 2015-06-06 20:34:54 · 1837 阅读 · 0 评论 -
3款强大的BootStrap的可视化制作工具推荐
http://www.25xt.com/html5css3/7342.html 25学堂看到最近很多朋友在学习Bootstrap前端主题框架。顾让25学堂的小编给大家找来了3款适合Bootstrap初学者使用的可视化工具。希望对大家有所帮助。第一款Bootstrap的可视化制作工具：JetstrapJetstrap是一个基于 Bootstrap 前端框架的可视化设计工具。...原创 2015-06-08 12:01:29 · 1067 阅读 · 0 评论 -
Bootstrap V3.3.4 起步
下载Bootstrap （当前版本 v3.3.4）提供以下几种方式帮你快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。继续阅读下面的内容，看看哪种方式适合你的需求吧。用于生产环境的 Bootstrap编译并压缩后的 CSS、JavaScript 和字体文件。不包含文档和源码文件。 Bootstrap 源码Less、JavaScrip...原创 2015-06-08 14:35:11 · 876 阅读 · 0 评论 -
Bootstrap V3.3.4 全局CSS样式
概览深入了解 Bootstrap 底层结构的关键部分，包括我们让 web 开发变得更好、更快、更强壮的最佳实践。HTML5 文档类型Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置。复制<!DOCTYPE html><html lang="zh...原创 2015-06-08 14:44:42 · 1362 阅读 · 0 评论 -
Bootstrap V3.3.4 组件
Glyphicons 字体图标所有可用的图标包括250多个来自 Glyphicon Halflings 的字体图标。Glyphicons Halflings 一般是收费的，但是他们的作者允许 Bootstrap 免费使用。为了表示感谢，希望你在使用时尽量为 Glyphicons 添加一个友情链接。glyphicon glyphicon-asteriskglyphico...原创 2015-06-08 14:47:16 · 552 阅读 · 0 评论 -
aria-label及aria-labelledby应用
aria-label属性正常情况下，会在表单里给input组件指定对应的label，当用户tab到输入框时，读屏软件就会读出相应label里的文本。如：用户名：当没有给输入框设计对应的label文本的位置时，aria-label属性为组件指定内置的文本标签。它不在视觉上呈现。如：aria-label=”用户名”/>此时，当焦点落到该输入框时，读屏软件就会读出aria-...原创 2015-06-09 10:00:17 · 2707 阅读 · 0 评论 -
WAI-ARIA无障碍网页应用属性完全展示
WAI-ARIA无障碍网页应用属性完全展示by zhangxinxu from http://www.zhangxinxu.com 本文地址：http://www.zhangxinxu.com/wordpress/?p=2277原创 2015-06-09 14:26:24 · 144 阅读 · 0 评论 -
WAI-ARIA无障碍网页应用 HTML5 设计辅助功能
使用 HTML5 设计辅助功能 Rajesh Lal 下载代码示例 如果您真的对面向广大受众感兴趣，将需要为网站设计辅助功能。 辅助功能使网页更易于访问、更易于使用，可供每个人浏览。 通常，使用最新的技术更易于实现辅助功能。 当前，这意味着使用 HTML5。为了具备易访问性，您需要在多种设备上提供您的内容，如使用键盘或鼠标的普通计算机、屏幕阅读器、音频浏览器、具有有限带宽的设备...原创 2015-06-09 14:31:45 · 1535 阅读 · 0 评论 -
Bootstrap精巧布局
Bootstrap提供俩种布局方式固定(网格)布局和流式(网格)布局。结合上篇文章所讨论的栅格系统来说，Bootstrap的布局实际上是在栅格外加个容器(container)。固定布局加的是固定宽度(width)的容器，流式布局加的是自适应(或叫可变)宽度的容器，这是二者的唯一区别。1.固定布局下面来看个示例： <body> <div ...原创 2015-06-10 11:31:54 · 129 阅读 · 0 评论 -
Bootstrap栅格系统研究
上一篇文章中已经对网页的栅格系统做了大概的说明，有了这个铺垫在来看Bootstrap的栅格系统就比较容易了。Bootstrap的栅格系统为12列(最大列数)，形成一个940px宽的容器。Bootstrap的栅格系统有俩种，一种是固定式的，一种是流式的(也就是可适应宽度的)。1.固定式栅格 固定式栅格系统每列的宽度(width)及列与列间的间距(margin)都是固定的，列宽为...原创 2015-06-10 11:33:56 · 165 阅读 · 0 评论 -
Bootstrap 栅格系统的精妙之处
节选翻译自The Subtle Magic Behind Why the Bootstrap 3 Grid Works从接触 Bootstrap 已经有很长时间了，给人的感觉是快速，简单，易上手，其中栅格系统是一个亮点：一直感觉像 CSS 栅格系统之类的东西拿过来用就好了，不用深究背后的原理。直到有一天你发现简单的套用在稍复杂的页面上出现问题，间隔啊，内外边距啊，哪都不对劲儿。...原创 2015-06-10 11:40:28 · 118 阅读 · 0 评论 -
jQuery插件实现网页底部自动加载-类似新浪微博
要实现滚动条滚到底部自动加载后续内容到内容到底部的功能，用jQuery非常方便的，只要知道什么时候滚动到了底部就好办了。 Js代码 $(document).scrollTop() //获取垂直滚动条到顶部的距离 $(document).height()//整个网页的高度 $(window).height()//浏览器窗口的高度 ...原创 2016-03-08 23:18:51 · 198 阅读 · 0 评论