精华内容
下载资源
问答
  • 响应式前端框架
    2020-11-10 20:15:35

    常用的响应式css前端框架(部分):

    1、Semantic UI Framework

    Semantic通过创造一个用来方便分享UI的语言使得开发人员和设计师的可控范围更为广泛。不再使用象形文字:Semantic使用自然语言使用惯例来组织使得开发过程更加的具有创新。方便和组件的沟通:给你一系列的UI组件,拥有实时的debug输出,让你的代码告诉你它起什么作用。

    2、Twitter Bootstrap Framework

    流畅,富有创意并且强大的移动为先的前端框架,帮助你快速开发web应用

    3、Foundation Framework

    foundation 3 使用强大的CSS预编译器SASS编译,允许你快速的开发,并且提供了新的工具来快速自定义

    4、UIkit Framework

    UIkit提供了一套HTML,CSS,JS组件。可以被扩展为主题并且非常容易自定义成为个性化的UI

    5、Skeleton CSS Boilerplate

    Skeleton是一套超小的CSS文件,帮助你快速开发任何尺寸的网站,无论是17寸的笔记本屏幕或者是iphone。

    6、99lime HTML KickStart

    超精致的HTML5,CSS和JS组件,帮助你快速的开发网站

    7、Kube — Professional CSS-framework

    极简但非常丰富的组件开发自适应或者响应式的网站。 拥有灵活的Grid和漂亮的字体排版。绝对自由,没有多余强制的样式。

    8、Less Framework 4

    Less框架是一个CSS的网格系统,帮助你设计自适应的网站。包含了4个布局和3套字体排版预设,所有的都基于同一个Grid。

    9、Yet Another Multicolumn Layout ‘YAML’

    YAML是一个模块化的CSS框架,重点在于灵活性,良好的访问和响应式的设计。这个框架重点在于设备独立的屏幕设计和灵活的布局模块化管理。

    10、YUI Framework

    YUI是一个免费,开源的JS和CSS类库,主要用户创建富客户端的互动web应用
    http://www.ywsirui.com.cn/tkgui/2251.html

    更多相关内容
  • 响应式前端框架

    2017-03-21 15:39:46
    功能全面的响应式前端模板
  • 为您提供Foundation响应式前端框架下载,Foundation 是一个易用、强大而且灵活的框架,用于构建基于任何设备上的 Web 应用。提供多种 Web 上的 UI 组件,如表单、按钮、Tabs 等等。
  • Foundation 是一个易用、强大而且灵活的框架,用于构建基于任何设备上的 Web 应用。提供多种 Web 上的 UI 组件,如表单、按钮、Tabs 等等。
  • 光滑的 用于快速移动和桌面网站开发的小型且可定制的响应式前端框架。 警告我正在测试更新此项目。 非生产用 2014-12-13 Smooth 开箱即用,具有任何 RWD 框架的基础:网格、弹性盒、表单……但有一些有趣的特性: ...
  • Foundation 是一个易用、强大而且灵活的框架,用于构建基于任何设备上的 Web 应用。提供多种 Web 上的 UI 组件,如表单、按钮、Tabs 等等。
  • 本Bootstrap教程能够让您了解到,Bootstrap框架是一个非常受欢迎的前端开发框架,他能让后端程序员和不懂设计的前端人员制作出优美的Web页面或Web应用程序。在这个Bootstrap教程中,将带领大家了解Bootstrap框架以及...
  • 物质化流星 基于 Material Design 的现代响应式前端框架。 为打包的 。 安装 使用 Meteor 0.9 及更高版本,安装使用: $ meteor add d0minikk:materialize-meteor
  • 入门模板入门模板-基于Material Design的现代响应式前端框架用: jQuery v1.11.2 Modernizr 2.8.3 WOW-v1.1.2 动画化光滑版本:1.5.0 古尔普触控笔
  • 发现精美-演示 拼图响应式前端框架默认提供的几款演示示例。
  • 雅虎的pure css免费响应式前端框架
  • Web前端响应式框架

    2021-04-06 16:20:04
    响应式网页的设计与实现 最近学前端接触到了框架,介绍并记录自己的学习收获。 前言 各种移动智能设备的广泛应用,带动了互联网应用向移动平台方向发展,并呈现...基于Bootstrap框架响应式网页设计就是一种全新的设

    响应式网页的设计与实现

    最近学前端接触到了框架,介绍并记录自己的学习收获。在这里插入图片描述

    前言

    各种移动智能设备的广泛应用,带动了互联网应用向移动平台方向发展,并呈现多元化的趋势。但智能手机、平板电脑、智能手表等多种移动设备相对于PC端的屏幕尺寸较小,所以大部分在PC端上显示的页面并不能很好地在移动互连设备上呈现。由于各种各样设备屏幕的分辨率、尺寸和型号越来越多,要在不同屏幕、不同系统平台等环境下保持网页布局的一致性,满足用户的一致体验已成为网页设计行业发展方向。基于Bootstrap框架的响应式网页设计就是一种全新的设计理念,根据这一理念所制作出来的网页框架可以作为通用模板,开发者根据需求选择模板,从而设计出适应不同设备的网站,增强用户体验。
    在这里插入图片描述

    一. 响应式网页技术

    “响应式网页设计”就是自动适应,它可以自动识别屏幕尺寸,从而调整出适合的网页。在做网页页面设计时,非常强调模块化的设计,要求一个合格的模块能够做到“可扩展、无侵染”,在任何移动终端都能正常显示。响应式网页在任何设备中都能够正常适配,而不用为每个设备单独做“子网站”。简而言之,就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本。
    响应式设计的网站能满足各种类型终端用户的需求,带给所有终端用户最优的访问体验。当然,专为手机或平板设计的网站也能满足部分访问者的要求,但根据调查得知,常用的移动终端设备有200多种不同的屏幕尺寸,设计者不可能为所有屏幕尺寸都设计一份独有的网站。因此,响应式设计就显得尤为重要。一个在手机上不能正常显示的网站只会给企业带来负面影响,给用户带来很差的用户体验。
    在这里插入图片描述

    二.响应式前端开发框架(响应式HTML5框架)

    响应式前端开发框架是指一系列产品化的HTML/CSS/Javascript组件的集合,Web前端工程师可以在设计中使用该开发框架。利用框架,可以花最少的精力创建响应式且符合用户要求标准的网站,整个开发流程都变得简单并且具有一致性。框架并不仅仅是指CSS、栅格之类的一些内容,它们包括的是整套的前端开发框架。
    目前,前端开发框架有很多,下面主要介绍Bootstrap框架。

    在这里插入图片描述

    1. Bootstrap
      Bootstrap是目前桌面端最流行且用得最广泛的开发框架,由Twitter推出。Bootstrap主要针对桌面端市场,Bootstrap3提出移动优先,不过目前桌面端依然还是其主要目标市场。Bootstrap主要基于jQuery进行Javascript处理,支持LESS来做CSS的扩展。如果想要在Bootstrap框架中使用Sass,则需要通过Bootstrap-Sass(https://github.com/thomas-mcdonald/bootstrap-sass)项目增加兼容。
      Bootstrap框架在布局、版式、控件、特效方面都不错,预置了丰富的效果,极大方便了用户的开发;在浏览器兼容性方面,目前Firefox、Chrome、Opera、Safari、IE8+等主流浏览器,Bootstrap都提供支持;在框架扩展方面,随着Bootstrap的广泛使用,扩展插件和组件也非常丰富,涉及显示组件、兼容性、图标库等各个方面。总之,Bootstrap提供一套优美的、直观的Web设计工具包和很多流行的样式,简洁的UI组件、栅格系统,以及常用的Javascript插件,可以用来开发跨浏览器兼容且美观大气的页面。

    在这里插入图片描述
    其他的响应式前端框架还有:

    2.Foundation
    Foundation是ZURB旗下的主要面向移动端的开发框架,但也保持对桌面端的兼容,目前已更新到Foundation4版本。它是一款强大的、功能丰富,且支持响应式布局的前端开发框架。框架主要采用jQuery和Zepto(语法类似jQuery,但比jQuery更轻量级)作为Javascript基础,CSS则基于Sass、Compass,有着很好的扩展性,并有着丰富的布局、版式和多种多样的控件与特效,非常方便开发者使用。控件的响应式效果也能帮助用户识别不同浏览器效果。
    在这里插入图片描述
    3.Gumby
    Gumby基于Sass开发,是一款出色的响应式CSS框架,它包括一个Web UI工具包,有按钮、表格、导航、标签、JS插件等。
    在这里插入图片描述

    还有一些如52Framework、Groundwork、Kube等,感兴趣的可以搜一下噢,这里不详细介绍了。

    因为自己刚上手响应式前端框架,所以就学了用得很广泛的Bootstrap,若后续有用到更好的,会写篇文章做对比。因为自己看了网课和一些视频,课本,基本都用到Bootstrap,所以还是推荐大家用这个吧。

    提示

    这里说明一下,自己在搜集资料的时候,发现大家容易一个搞混的问题(包括我自己在学习的时候),就是Bootstrap和vue都是前端框架,很多人分不清两者的区别。在这里我说明一下。

    前端框架:Bootstrap与Vue的区别

    首先,明确一点,两者不是一个层级的

    • Vue是一套用于构建用户界面的渐进式框架(前端js库,将前端开发组件化),和react,angular并列“前端三大框架”。可做出如后台管理系统等具有复杂交互的系统。
      (功能开发框架)
    • Bootstrap是基于jquery的UI组件库,而且Bootstrap大部分组件是依赖css的,使用时比如一些网页中的输入框,按钮等的炫酷样式。
      (界面效果框架)
      到这里大家应该对两者有些理解和区分了吧?

    今天就写到这里啦,有问题的话在评论区问噢(●’◡’●)

    (自己是大一计科专业的学生,因为感兴趣,课后自学前端,希望不对的地方,大佬可以帮忙指正,谢谢啦!)

    展开全文
  • 拼图 Pintuer:中国版的Bootstrap,是国内优秀的HTML、CSS、JS跨屏响应式开源前端框架,使用最新浏览器技术,为快速的前端开发提供一系统的文本、图标、媒体、表格、表单、按钮、菜单、网格系统等样式工具包,占用...
  • 注1* 之前我们比较过Foundation和Bootstrap, 这篇文章更加系统地介绍了目前比较浏览的前端响应式框架。注2* 文中的多个框架基于SASS创建,SCSS是一种比LESS更简洁的样式表编程语言,它可以编绎成CSS,可复用CSS代码...

    注1* 之前我们比较过Foundation和Bootstrap, 这篇文章更加系统地介绍了目前比较浏览的前端响应式框架。

    注2* 文中的多个框架基于SASS创建,SCSS是一种比LESS更简洁的样式表编程语言,它可以编绎成CSS,可复用CSS代码,声明变量,甚至是函数,类Ruby/Python的语法,参见: LESS vs SASS?选择哪种CSS样式编程语言?

    762f129682d7599ea4faae01f2429027.png

    最好的HTML5框架一般也是最流行的,使用这些框架可以极大地减少你的工作量,节约你的时间。

    HTML5有非常有用和令人意想不到的功能,但也有少数浏览器并不支持HTML5,因此我们需要基于HTML5的前端响应式框架做跨浏览器的支持。这些HTML5的框架有很多,大多支持响应式布局,干净的代码,跨浏览器兼容,内置按钮等等这些设计师常常使用的功能。同的这些HTML5框架将帮助你更加容易地构建任务。包括支持javascirpt和jQuery插件的HTML5的框架,我们可以实现网站的许多应用效果。

    最好的响应式前端框架

    在这篇文章中,我将展示我收集的15款最佳的前端响应式HTML5框架。

    Foundation

    12b9f9d1a4119885da04ecadd320b600.png

    顾名思义,支持HTML5设备的基础。对于懒人们来说,我们已经建立了一个新的命令行工具来加速项目开发,并增加支持Libsass,SCSS编绎加快了5倍。

    skeljs

    78a38961675b17f1b4dd645a77015f1c.png

    skelJS是一个轻量极的前端框架,可以创建响应式网站和应用。 只需要引用一个不到20Kb的JS文件,然后就可以调用强大的组件。

    Gumby

    c4aa7b26676d82755ebc21708a295a8e.png

    Gumby 2 是基于Sass创建的. 因为你可以使用它快速定制你所需要的Gumby框架组件。

    Grid System

    dc8d7cb03da2fcaf348d99f2b521befa.png

    响应式式前端框架

    Less Framework 4

    aa8d41687674fd1510e84c48d6ae4ed0.png

    Less框架是一套CSS网格系统,它有4套布局(layouts)和3组预设版式,都只基于一个网格。

    Yaml

    3f5d0542c26f840322044d96846af83c.png

    模块化的CSS框架,真正灵活,方便的响应式网站。 YAML提供了一套完整匹配的积木来创建复杂的网站。网格,导航,表格,排版模块和所有提供的附加组件无缝地在一起协同工作。

    HTML5 Boilerplate

    7b84d91513d25da576ec64b04a569146.png

    HTML5 Boilerplate帮助您构建快速,健壮,适应性强的Web应用程序或站点。

    Montage Studio

    c9450703d1cf6caf221ce0fa869ce9e3.png

    MontageJS是一个现代化,完整的HTML5的框架,旨在创建单页的应用程序,快捷! MontageJS使用经过时间考验的设计模式和软件的原则,可以让你轻松地创建一个模块化的架构,并帮助您的项目提供高品质的用户体验。这允许设计人员和开发人员快速协同工作。

    Columnal

    52623a577191f4137e83daae1422a9ac.png

    该Columnal的CSS网格系统是一个“混合”的弹性网格,而一些代码的灵感(和想法子从960.gs(注*960 Grid为一开源项目)获取

    Layers CSS

    e9b507faff2a22bf9111c3eaacb669c3.png

    Layers CSS是一个轻量级的CSS框架,它不强调任何设计,只处理的主体结构。它即支持响应的布局又有流式网格和简单。

    Twitter Bootstrap

    1ff90091feb2bee07b7f324d6df46ed1.png

    Bootstrap 是一种流行的,现代的前端/ UI开发框架。它的功能丰富,大部分你所需要的功能里面都有。

    SproutCore

    cad064736e0702435f5b187c1e7a6a5e.png

    SproutCore的是基于网络的创新用户体验的开源框架。它具有令人难以置信的速度意味着没有更短的页面渲染时间。利用最新的Web技术和规范。良好的可访问性。

    HTML KickStart

    5c2540d2c7171ea8925d9e20be81a01f.png

    最新的一个框架,HTML5的KickStart的是一个非常干净的HTML,CSS, JavaScript包,以节省UI开发人员的工作。

    CreateJS

    104595750758aaddbf11b7c8ffb2a568.png

    CreateJS是一套开源的JavaScript库和工具,用于创建丰富的,交互式的HTML5内容。它由5个模块化的JavaScript库组成。这将帮助你实现动画效果,在您的网站上支持HTML5的音频,等等。

    52Framework

    a94261e662e341f600332035fae6eea4.png

    52Framework是一个HTML5的框架,其目的是提供一种简单的方法来构建使用HTML5和CSS3,同时支持所有现代浏览器响应网站。它是挤满了像HTML5视频播放器,圆角,HTML5 Canvas及HTML5验证等等优秀的组件。

    展开全文
  • 通过bs,可以很轻松地建出一个表格组件。以下是建表格组件必须认识的一些标签。 标签 描述 为表格添加基础样式。 表格标题行的容器元素(),用来标识表格列。...

    通过bs,可以很轻松地建出一个表格组件。以下是建表格组件必须认识的一些标签。

    标签 描述
    <table> 为表格添加基础样式。
    <thead> 表格标题行的容器元素(<tr>),用来标识表格列。
    <tbody> 表格主体中的表格行的容器元素(<tr>)。
    <tr> 一组出现在单行上的表格单元格的容器元素(<td> 或 <th>)。
    <td> 默认的表格单元格。
    <th> 特殊的表格单元格,用来标识列或行(取决于范围和位置)。必须在 <thead> 内使用。
    <caption> 关于表格存储内容的描述或总结。
    <table>标签样式有以下几种:

    .table 表格基本样式
    .table-striped 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)
    .table-bordered 为所有表格的单元格添加边框
    .table-hover 在 <tbody> 内的任一行启用鼠标悬停状态
    .table-condensed 让表格更加紧凑
    .table-responsive 可以让表格水平滚动以适应小型设备(小于 768px)。当在大于 768px 宽的大型设备上查看时,您将看不到任何的差别。


    基本建表演示代码:

    <table class="table table-striped table-bordered table-hover table-condensed table-responsive">
    	<caption>基本的表格布局</caption>
    	<thead>
    		<tr>
    			<th>产品</th>
    			<th>付款日期</th>
    			<th>状态</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<td>产品1</td>
    			<td>23/11/2013</td>
    			<td>待发货</td>
    		</tr>
    		<tr>
    			<td>产品2</td>
    			<td>10/11/2013</td>
    			<td>发货中</td>
    		</tr>
    		<tr>
    			<td>产品3</td>
    			<td>20/10/2013</td>
    			<td>待确认</td>
    		</tr>
    		<tr>
    			<td>产品4</td>
    			<td>20/10/2013</td>
    			<td>已退货</td>
    		</tr>
    	</tbody>
    </table>
    效果图:


    实际应用中,基本表格并不能满足需求,bs已经为我们考虑到了,我们还可以在<tr>,<th>和<td>添加色彩样式,实现类似于带状态的表格效果,色彩样式有以下几种:

    .active 将悬停的颜色应用在行或者单元格上
    .success 表示成功的操作
    .info 表示信息变化的操作
    .warning 表示一个警告的操作
    .danger 表示一个危险的操作


    演示代码:

    <table class="table table-bordered table-condensed table-responsive">
    	<caption>带状态表格布局</caption>
    	<thead>
    		<tr>
    			<th>产品</th>
    			<th>付款日期</th>
    			<th>状态</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr class="active">
    			<td>产品1</td>
    			<td>23/11/2013</td>
    			<td>待发货</td>
    		</tr>
    		<tr class="success">
    			<td>产品2</td>
    			<td>10/11/2013</td>
    			<td>发货中</td>
    		</tr>
    		<tr class="warning">
    			<td>产品3</td>
    			<td>20/10/2013</td>
    			<td>待确认</td>
    		</tr>
    		<tr class="danger">
    			<td>产品4</td>
    			<td>20/10/2013</td>
    			<td>已退货</td>
    		</tr>
    	</tbody>
    </table>
    效果图:


    展开全文
  • 拼图响应式前端框架版响应式后台正式发布。 考虑到目前拼图的状况,我们不打算免费开放下载,但也不会收各位朋友1分钱,该版后台将有偿提供给各位给予拼图贡献的朋友。 废话不多说,一切皆以有图有真相,下面...
  • 本文收集了14个响应式前端开发框架,可以帮助前端开发人员大大简化开发过程。针对每个框架,文中均指出了它所包含的UI组件及JavaScript插件。几乎所有的框架都采用了响应式网格系统。 使用这些前端框架,有如下好处...
  • 文章目录Vue 项目前端响应式布局及框架搭建一、项目基本结构二、项目分辨率响应式创建1、flexible.js2、引用 flexible 插件3、修改 flexible 默认配置4、cssrem 插件 (px -> rem)三、项目页面框架搭建1、设置背景...
  • FreeNG是一款完全响应式前端UI框架,它采用了主流的左右两栏式布局,使用了Html5 CSS3 Angular2( 4)等流行的前端技术,同时提供了诸多强大的可以重新组合的UI组件,门槛极低,拿来即用。
  • 初识响应式前端框架——Vue.js

    千次阅读 2018-08-06 14:44:23
    响应式编程已经渗透到很多领域中的编码中,比如RxJava,Vue.js等,当然,目的就是提高编程的效率 起因: 以前我们改变UI的时候,就需要通过Dom来操作UI元素,随着业务的增多,这种方式就显得很笨重了 比如...
  • 废话不多说,一切皆以有图有...2,然后我们再通过拼图响应式测试工具直接查看不同设备下该款后台的样子。 http://www.pintuer.com/tools/test.html 3,目前该款后台暂时只提供登录及初始页。详细访问地址:http:
  • 国产bootstrap前端框架 拼图响应式前端框架版响应式后台正式发布
  • 拼图响应式前端框架版响应式后台正式发布。 考虑到目前拼图的状况,我们不打算免费开放下载,但也不会收各位朋友1分钱,该版后台将有偿提供给各位给予拼图贡献的朋友。 废话不多说,一切皆以有图有真相,下面...
  • 分享一个开源响应式前端框架-SkelJS

    千次阅读 2014-02-10 10:21:52
    SkelJS 仅有一个js文件,大小只有17...是一个轻量级的响应式设计网站应用的前端开发框架。提供可配置的栅栏结构、响应式breakpoint处理和许多其他功能。 中文版API文档,参考手册: http://now.willin.org/p/skeljs/
  • 文章目录1、BootStrap栅格系统 1、BootStrap栅格系统 所谓的栅格系统是指在Bootstrap3中,把我们的网页宽度等分成12等份,而每个内容占12份中对应的份数。
  • 前端商店 前端存储是一个静态网站,仅使用HTML和CSS而不使用框架进行响应式设计。 该站点作为静态Web应用托管在Azure中。 蒂恩达: Nosotros: 产品:
  • 20个优秀的前端框架

    2021-03-02 09:03:48
    时髦、直观并且强大的前端框架,让Web开发变得更加容易最先进的响应式前端框架。960gs提供了一个简单的网格系统,适合快速开发。非常漂亮的Web模板,适合响应式、移动友好的开发。适合网站快速开发的极简HTML构建...
  • 网上发现的,觉得不错的响应式设计css+兼容手机+平板+电脑PC 跨屏响应式布局前端开发CSS框架

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 74,639
精华内容 29,855
关键字:

响应式前端框架