对于前端框架，Jeff 了解Bootstrap 甚于这个Foundation（貌似在写该文之前还没听说过Foundation）。...所以，今天在这里恶补一下，介绍一下这个高级的响应式前端框架（The most advanced responsive front-end framework in the world）——Foundation...简介 Foundation 前端框架官方地址：http://foundation.zurb.com/ Foundation 是一款开源的前端框架，我们可以使用它快速创建页面原型。...相比于其他同类型工具，Foundation的移动化方案更加出色；借鉴响应式Web 设计的思路和方法，Foundation 对内容结构在不同类型设备中的的呈现方式进行了相应的预设。...又言道响应式设计，姑且不论前端显示效果如何，单单为不同分辨率做媒体查询，进而增加“响应式”的CSS 代码，整个网页在样式文件、脚本文件上就够臃肿了。因此，我认为，响应式设计是看着很美好的东西。
Bootstrap响应式前端框架笔记四——表单 一、基本表单样式 在Bootstrap框架中，可以为表单标签添加form-control属性来为其设置默认样式，默认表单控件的宽度将充满父容器标签...Bootstrap框架中默认的下拉列表样式示例如下： 默认的下拉列表 上海...前端学习新人，有志同道合的朋友，欢迎交流与指导，QQ群:541458536
Bootstrap响应式前端框架笔记五——按钮 Bootstrap中预设了default，primary，info，warning，danger和link6种按钮风格，示例如下： Bootstrap...前端学习新人，有志同道合的朋友，欢迎交流与指导，QQ群:541458536
Bootstrap响应式前端框架笔记八——按钮组 在Bootstrap定义的Css样式中，开发者可以将一组btn控件包裹在btn-group类中使其组合成按钮组控件，组合后的控件左右两侧的按钮将被圆角处理...通过按钮组，可以十分方便的实现分裂式下拉菜单，示例如下： 分裂式下拉菜单 <button type="button" class...前端学习新人，有志同道合的朋友，欢迎交流与指导，QQ群:541458536
Bootstrap响应式前端框架笔记十五——面板与井 Bootstrap中的面板由pannel相关类来创建，一个完整的面板分为面板头部、面板体和面板注脚，并且Bootstrap中默认定义了一些面板风格...前端学习新人，有志同道合的朋友，欢迎交流与指导，QQ群:541458536
Bootstrap响应式前端框架笔记三——代码与表格 一、代码 在技术博客文章类页面的开发中，常常需要在文本总插入说明代码，使用code便签可以创建这种效果，示例如下： code标签用于在文本中插入代码...列表元素也可以包裹在table-responsive类内，此时列表会变成响应式列表，当屏幕尺寸小于768px时，会自动出现水平滚动条。 ...前端学习新人，有志同道合的朋友，欢迎交流与指导，QQ群:541458536
Bootstrap响应式前端框架笔记十八——导航滚动监听 Bootstrap框架中提供了十分方便的方法来使用导航关联内容快，并且开发者可以监听滚动进行导航按钮的切换，示例如下： <!...前端学习新人，有志同道合的朋友，欢迎交流与指导，QQ群:541458536
Bootstrap响应式前端框架笔记十七——下拉列表交互 为dropdown-toggle类添加data-toggle="dropdown"属性可以实现其下拉列表功能的绑定，示例如下： <div...前端学习新人，有志同道合的朋友，欢迎交流与指导，QQ群:541458536
Bootstrap响应式前端框架笔记七——下拉菜单 在Bootstrap的Css框架中，下拉菜单属于组件。一个完整的下拉菜单应该有两部分组成，一个触发按钮与一个选项列表。
Bootstrap响应式前端框架笔记十六——模态框交互 模态框也可以称为弹出窗，其作用是当用户点击某个功能按钮后，在网页上弹出一个内容窗口。在Bootstrap中，创建模态框十分简单。...前端学习新人，有志同道合的朋友，欢迎交流与指导，QQ群:541458536
Bootstrap响应式前端框架笔记十一——分页与标签 在开发搜索结果页、列表页时通常会使用到分页器控件，Bootstrap中提供了方便的类来进行分页器的创建，示例如下： 标准的分页器控件...前端学习新人，有志同道合的朋友，欢迎交流与指导，QQ群:541458536
UI=render(data) Vue的data存在bug ---- 数据响应式 什么是数据响应式？ 我打你一拳，你会喊疼，那你就是响应式。...若一个物体能对外界的刺激做出反应，它就是响应式 ---- Vue的data是响应式 const vm = new Vue({data:{n:0}}) 我如果修改vm.n，那么UI中的n就会来响应我...Vue2通过Object.defineProperty来是想数据响应式 ---- 响应式网页是啥？...如果我改变窗口的大小，网页内容就会做出响应，那就是响应式网页。 比如：https://www.smashingmagazine.com/ 但是要注意，用户没事不会拖动网页大小。...必须要有一个'n'，才能监听&代理obj.n对吧 如果前端开发者比较"睿智"，没有给n怎么办？
响应式 Web 设计 -Viewport什么是 Viewport? viewport 是用户网页的可视区域。 viewport 翻译为中文可以叫做"视区"。
Bootstrap的官方解释：Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为做多12列。
Bootstrap响应式前端框架笔记十九——标签页的使用 Bootstrap中通过为导航标签增加data-toggle="tab"，配合类或id来进行标签页的关联，示例如下： <ul class...前端学习新人，有志同道合的朋友，欢迎交流与指导，QQ群:541458536
Bootstrap响应式前端框架笔记十——导航栏相关组件 Bootstrap中提供的导航栏分为两种模式，使用nav-tabs类可以创建页卡模式的导航栏，使用nav-pills类可以创建胶囊模式的导航栏...针对胶囊式导航，也可以设置其排列方向为堆叠，添加nav-stacked类即可，示例如下： 堆叠排列的胶囊导航 <ul class="nav nav-pills nav-stacked...<em>前端</em>学习新人，有志同道合的朋友，欢迎交流与指导，QQ群:541458536
Bootstrap响应式前端框架笔记一——强大的栅格布局 一、Bootstrap？ ...Bootstrap是一款HTML，Css和JavaScript开发框架，其也支持开发者进行自定义构建，开发者也可以只打包自己需要的功能模块使用。...Bootstrap是一款响应式的编程框架，所谓响应式，是指在不同屏幕尺寸的设备上，使用Bootstrap开发的项目可以自动进行布局调整适配。...其响应式布局的核心是栅格系统，栅格系统将浏览器分隔成一定数量的行和列。默认栅格系统将浏览器窗口分为12列，开发者可以为元素设置其在对应设备尺寸中所占的列数。...前端学习新人，有志同道合的朋友，欢迎交流与指导，QQ群:541458536
目前，网上有大量的框架供大家选择，本文作者分享了9款各方面都兼具优势的PHP框架，主要用来构建响应式网站，开发人员可以根据自己的需求来选择下面的某一个框架。...2 Phalcon 如果你想提高网站速度，你可以试试Phalcon框架。基于C语言开发，也是目前市场上最快的一款PHP框架。...Laravel是2016年最流行的PHP框架，也是最容易学习的开发框架，开发者只需一个脚本就可以实现一个网站功能。...4 Yii Yii是一个基于组件、用于开发大型Web应用的高性能PHP框架。Yii几乎提供了今日Web 2.0应用开发所需要的一切功能。Yii是最有效率的PHP框架之一。...8 FuelPHP FuelPHP是一个简单、灵活的PHP 5.3 Web框架，其思路结合了来自主流框架的优点。它也是一个MVC框架，并且支持HMVC。
Bootstrap响应式前端框架笔记二——排版标签与类 Bootstrap中对h标签的字体和字号进行了微调，开发者除了可以直接使用这些标签进行标题的修饰外，还可以使用.h1到.h6类来将其他元素的字体进行修饰...前端学习新人，有志同道合的朋友，欢迎交流与指导，QQ群:541458536
Bootstrap响应式前端框架笔记九——输入框组 将input标签与input-group-addon类组合使用可以为输入框添加前后挂件，需要注意，Bootstrap不支持在输入框控件一侧添加多个挂件
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
