定制 Bootstrap 架构

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

首先我们去下载 Bootstrap 架构,http://twitter.github.com/bootstrap/,点击页面上的 Download 按钮可以下载到最新版的 Bootstrap。

不过这里我们可以先定制一下,点击导航菜单上的定制 Customize ...

在这里,你可以选择想要在我们的项目里使用的 Bootstrap 组件,这些组件就是一些定义好的 CSS 样式,这些样式会在 boostrap.css 这个样式表里 ...

我们要做的这个网页不需要响应式的设计,所以 ... 可以去掉 Responsive 下面的所有东西 ... 这样这部分样式就不会包含在 boostrap.css 这个样式表里 ...

第二部分是选择想要使用的 jQuery 插件 ... 你可以根据自己的需求去选择想要使用的 jQuery 插件 .. 选择的这些 jQuery 插件会包含在 bootstrap.js 这个脚本文件里 ...

第三部分定制的内容是一些变量 ... 你可以修改这些变量来改变 Bootstrap 架构的样式 ... 比如各种颜色 ... 字体,字号 ... 等等

我们可以根据自己的设计来修改这些变量 ... 下面我们改一下链接的颜色 ... 先回到网页的设计图 ... 点击工具栏上的前景色 ... 然后使用吸管工具选择页面上的某个颜色 ... 这里我们事先定义好了一些色块 ... 点击可以拾取色块上的颜色 ...

复制一下颜色的值 ...

再回到 Bootstrap 架构的定制页面 ... 找到链接 Links ... @linkColor 就是链接的颜色 ... 先输入一个 # 号,然后把刚才复制的颜色值粘贴过来 ...

Bootstrap 架构会根据这个颜色去改变一些相关的设计的颜色... 比如链接的颜色,悬停在链接上的颜色,悬停在下拉菜单上的颜色,按钮的颜色等等 ....

浏览到这个页面的底部... 点击 定制并下载 按钮 ...

这样我们可以把定制的 Bootstrap 架构下载到自己的电脑上 ...

找到下载下来的 Bootstrap ... 先解压一下 ...

然后把它放在网页项目的目录里 ....

定制 Bootstrap 架构《 HTML5 与 Bootstrap 应用实例 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点