首先,读者需要分辨3个概念:(1)Fix(固定式布局)对于固定式布局而言,无论浏览器是放大还是缩小,内容位置都不会因受挤压而改变,而且整个布局居中。(2)Fluid(流式布局)流式布局要设置布局的最大宽度和最
Bootstrap提供两种布局方式:固定式布局和流式布局。结合3 2节讲解的栅格系统来说,Bootstrap的布局实际上是在栅格外加个容器(container)。固定式布局加的是固定宽度的容器,流式布局加的是自适应(即可变)宽
在默认情况下,Bootstrap没有启用响应式布局特性。如果加入响应式布局CSS文件(bootstrap-responsive css),栅格系统会自动根据可视窗口的宽度从724px到1170px进行动态调整。在可视窗口低于767px宽的情况下,列
Blueprint(http: www blueprintcss org )是个经典的960栅格系统,提供了完整的CSS框架,栅格系统是它的一部分功能。Bootstrap默认的栅格系统为12列,宽度为940px,比标准的960栅格系统少20像素,这是因为它少
在网页设计中,当搭建页面结构复杂的门户型网站时,一般习惯定义页面宽度固定宽度,同时多选择宽度为950px 960px。例如,Alexa全球排名前100的站点,它们的主页宽度多为950px或960px,这些站点有个共同特点:页面
栅格系统更多的是一种布局思想,在实际使用时,根据具体需求选用合适的技术实现即可。需要注意的是,对于栅格的技术实现来说,太灵活未必是好事,适度灵活最难得。栅格搭好了页面框架,接下来很重要的事情是往里
栅格系统(Grid System),也称网格系统,是一种平面设计的方法和设计风格。它运用固定的格子设计版面布局,其风格工整简洁,很受平面设计师的欢迎,已成为今日出版物设计的主流风格之一。在网页设计中,有人参
设计师们都梦想着这样一个完美世界:所有的浏览器都能够理解和适用所有CSS规则,并且呈现相同的视觉效果(没有兼容性问题)。但是,现实却总是恰恰相反,很多CSS样式在不同的浏览器中有着不同的解释和呈现。当今
合理而严谨的CSS设计,将使CSS代码更易于维护和重用,从而提升执行效率。一般应先规划样式,并严格区分公共样式和页面对象化样式;然后开始编码,在编码的同时进行调试、验证和代码片断的总结,而不是在所有模板
Bootstrap框架的核心是轻量的CSS基础代码库,没有一味地重置,而是注重各浏览器基础表现,降低开发难度。目前90%的Reset(样式重置)都是归零的思想,但在开发过程中开发人员经常发现样式归零存在着潜在的问题。
Bootstrap为屏幕、排版和链接设置了基本的全局样式。本节只简单说明,详细介绍可以参阅scaffolding less文件。Bootstrap使用的部分HTML元素和CSS属性需要文档类型为HTML5 doctype,因此<!doctype html>文档类型
设计全局样式表栅格系统Bootstrap布局响应式设计Bootstrap框架主要是由动态CSS语言LESS编写,在很多方面类似于Blueprint框架(http: www blueprintcss org )。经过Node js编译后,Bootstrap就是众多CSS的合集。
本节借助Bootstrap布局版式设计一个完整的页面效果,页面版式模拟企业网站类型。企业网站一般都遵循基本的营销类设计格式,具有一个主消息板块和三个辅助性栏目,如图2-16所示。第1步:新建HTML5类型文档。根据2
2 4 开发第一个Bootstrap示例本节不详细分析源码文件,因为读者可以随时下载它们。这里通过几个示例介绍使用已经编译好的Bootstrap文件进行入门练习。2 4 1 设计交互组件Tabs是页面中使用频率比较高的组件之一
为了把读者的注意力完全放到使用Bootstrap上,本节先做一下准备工作。这里创建一个基本的HTML模板。1)启动Dreamweaver,新建HTML5文档。在菜单栏中选择文件新建选项,打开新建文档对话框。在对话框中选择空白页
Bootstrap中的HTML、CSS和JavaScript适用于各类设备,如移动设备、平板电脑、PC等,不过它们的功能可以概括成如下几个类别。脚手架:全局性的样式文件,用于重置背景、链接样式、栅格系统等,并包含两个简单的布
Bootstrap安装大致需要以下两步。第1步:安装Bootstrap的基本样式。样式的安装有多种方法,下面代码使用<link>标签调用CSS样式,这是一种常用的调用样式方法。<!doctype html><html><head><meta charset="utf-
把Bootstrap压缩包下载到本地之后,就可以安装使用了。本节不仅介绍如何正确安装Bootstrap工具集,同时介绍Bootstrap架构组成,这个架构有什么功能,能够为网页设计和开发带来哪些用处。最后,引导读者创建一个符
在2 1 1节中,如果按照第二种方法,下载编译版Bootstrap,则解压bootstrap zip文件,可以看到该包中包含的所有文件,如图2-12所示。图2-12是Bootstrap的基本结构,编译后的文件可以快速应用于任何Web项目。压缩包
2 2 Bootstrap的文件结构下载Bootstrap压缩包之后,在本地进行解压,就可以看到包中包含的Bootstrap的文件结构,Bootstrap提供了编译和压缩两个版本的文件,下面针对不同的下载方式进行简单说明。2 2 1 源码版