进阶语法
1 混合器
开发者在编写整个网站的时候常常遇到类似或者一样的样式块,例如 Bootstrap 中的栅格样式。当然如果重复的次数少又简单,当然没有什么影响,可当项目变得越来越复杂,产品需求越来越多,复制粘贴就很难应付了。此时便可以使用 Sass 的混合器来实现大段样式的重用。混合器使用标识符 @mixin
定义,在 @mixin
后面跟一个自定义的名字,然后用花括号内填写需要重用的样式。定义完以后便可以在样式中使用 @include
引用这个混合器。
"CSS 预处理脚本 Sass/Scss 进阶"继续阅读
一、背景
使用前端 UI 框架(例如:Bootstrap、Mustard UI)的时候,虽然我们可以直接修改源码里面的 CSS 样式,但是修改起来非常麻烦低效;好在大多数框架是基于当下流行的 CSS 预处理脚本 Less 和 Sass 编译开发的,通过修改官方给出的 Sass 源码,我们可以很方便的定制它们。
"CSS 预处理脚本 Sass/Scss 入门"继续阅读
一、介绍
单页面结构简单、布局清晰,常常用来做手机 App 或者某个产品的下载介绍页面。现在,展示型网页整体趋向于单页网站设计,这样一次性把核心信息展现出来,对于用户来说更加直观和简单,能够快速了解一个产品。
"Bootstrap实战 - 单页面网站"继续阅读
介绍了社交媒体网站评论功能的实现,使用 Bootstrap 媒体对象构建评论组件。详细讲解了基础媒体对象、多层嵌套、对齐方式及列表应用,最后通过实例展示如何创建评论列表。
介绍了注册和登录模块的实现,使用 Bootstrap 标签页和表单构建可切换的登录注册界面。详细讲解了标签页的基础和进阶用法、按钮样式以及表单布局与验证。最后通过实例展示如何创建切换登录和注册的模块。
介绍了响应式布局的实现,使用 Bootstrap 构建兼容多终端的导航栏和轮播组件。详细讲解了导航栏的基础和进阶用法、响应式设计,以及轮播的自动播放与文字说明。最后,通过实例展示如何组合栅格系统、导航栏和轮播创建响应式页面。
介绍了如何使用 Bootstrap 实现瀑布流布局,涵盖了基本配置、栅格系统、缩略图、响应式图片及 CSS3 样式。通过实战案例逐步解析布局细节,并提供 JavaScript 实现方式以增强兼容性。
1、导入JavaScript插件
Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单、按钮组、导航、分页等。他还包括一些JavaScript的插件。
Bootstrap的JavaScript插件可以单独导入到页面中,也可以一次性导入到页面中。因为在Bootstrap中的JavaScript插件都是依赖于jQuery库,所以不论是单独导入还一次性导入之前必须先导入jQuery库。
"Bootstrap支持的JavaScript插件"继续阅读
1、缩略图(一)
缩略图在网站中最常用的地方就是产品列表页面,一行显示几张图片,有的在图片底下(左侧或右侧)带有标题、描述等信息。Bootstrap框架将这一部独立成一个模块组件。并通过“thumbnail”样式配合bootstrap的网格系统来实现。可以将产品列表页变得更好看。
"Bootstrap学习-内置组件"继续阅读
1、导航条基础
导航条(navbar)和上一节介绍的导航(nav),就相差一个字,多了一个“条”字。其实在Bootstrap框架中他们还是明显的区别。在导航条(navbar)中有一个背景色、而且导航条可以是纯链接(类似导航),也可以是表单,还有就是表单和导航一起结合等多种形式。
"Bootstrap学习-导航条-分页导航"继续阅读