如何定制 Twitter Bootstrap 以适合你的网页设计

分享于 

9分钟阅读

Web开发

  繁體

介绍

将Web页面的图形化设计转换为HTML和CSS的过程一直都是一个很大的挑战。
幸运的是,近年来,一些经验丰富的web设计师开始了一些称为web前端框架的项目。

Twitter Bootstrap的流行框架之一,它是由 MarkJacob Thornton创建的,著名的开发者。
( 多亏了他们)

web上使用文档实际上是完全完整的,另外还有很多其他的文章,说明如何使用网格,解释如何使用 Bootstrap 系统和组件,这是一个默认的图形设计,使用 Bootstrap 作为布局框架的所有网站都是如此的简单。

因这里,我决定编写本文并解释如何自定义 Bootstrap 框架以适应你自己的样式和设计。
开始了.

要求

重要:要完成本教程,用户必须具备语言的基本知识。

首先,从Github网站下载 Bootstrap 包: https://github.com/twitter/bootstrap

然后,你需要配备"开发工具开发工具"的网络浏览器,理想是"webkit 浏览器"。 我使用"苹果浏览器"的Safari,这是我最喜欢的。 你可以在这里下载"google Chrome 浏览器": https://www.google.com/intl/en/chrome/browser/

此外,你还需要"文本编辑器"的理想选择,使用"html"和"较少"突出显示( 我使用了 sublime text 2.),以及一种编译更少文件的方法,这是在网站的。
( 我将使用 Less.app )

设置文件结构

从 Bootstrap 页面的Github中提取下载的ZIP文件,并查看提取的文件夹中的inside。

树"较少"。"js"和"img"文件夹是每个 Bootstrap 网页设计的主要文件夹。
inside LESS 文件夹,LESS 文件是将构成 Bootstrap css框架的localed。

仔细看,你会发现"测试"文件夹位于 LESS 文件夹的inside 文件夹中。
这个文件夹包含一些html文件,这些文件是一些简单的Bootstrap 布局。 这些可以用于自定义目的,但我将创建自己的测试页面,包括要自定义的主要组件。

我创建了一个简单的Bootstrap 布局,结合了上面解释的测试文件中的一些组件。
我的页面由两个"导航栏"。"英雄单位"。"按钮"。"下拉列表"和"dropup"菜单组成。

就像前面提到的,Bootstrap 是一个框架,每个人都知道,改变主框架文件来定制它是一个很好的实践。 为什么?
因为,首先,这个框架可能会及时获得更新,这样你就需要再次对新版本进行定制。
同样,你可能会搞乱框架文件,框架可能无法正常工作 !

原因,我在 上面 js文件夹中创建文件夹,保存我要添加到网页和可能的javascript文件中的文件,这样我就会创建一个新文件夹。
然后我把 index.html 文件放在这些文件夹旁边。

下一步是添加我自己的LESS 文件,以覆盖和定制我自己的LESS 文件夹中的主框架。

Bootstrap 包含两个主要文件,如果覆盖的话,几乎整个框架将被覆盖和定制。

这些文件是" variables.less"和 bootstrap"

为了覆盖等价的原始文件和附加的"自定义变量。更少"文件,我创建了和"自定义引导程序。减少"文件,并添加了一个"my-bootstrap-theme。更少"来包含一个单独的css文件,并将。

在创建自定义文件时,我自己的自定义文件将包含框架,修改文件 url,修改文件 url,使编译文件与我的自定义文件一致。

下一步,我提取了默认的Bootstrap 颜色,使用"colorschemer工作室"旋转颜色并使它们变得更暖。
我也让灰色的家庭颜色稍微温暖一些,所以白色和 black 不是绝对白色和黑色。
( 可以在文件中添加和使用任何其他颜色,也没有限制)

所以我用新颜色替换了 inside custom-variables.less 文件的颜色。
同时更改了 body background 和 body 文本颜色。

在进一步进行之前,我们需要一个对应于 LESS 文件更改的实时样式更新。

为此,我从 LESS 官方网站下载了文件。

我按照页面上的指示设置了 Bootstrap 页面进行实时预览。

重要:less.js 使用ajax加载. less 文件,大多数现代浏览器不允许跨域ajax文件访问,因此你需要在工作站上运行一个简单的html服务器,并可以使用来实时显示. less 文件。
( 本文使用了x 选项的Mac OS WebSharing,这是一个简单的Apache服务器设置

可以看到,我包括原始 bootstrap.less 文件和我自己的my-bootstrap-theme.less 文件,这样我们可以重新回到原始框架,看到不同的结果。

在这里,当访问web服务器地址时,页面会使用 less.js 呈现,并且可以看到布局的实际外观。

在 my-bootstrap-theme.less 文件中,我导入了 custom-bootstrap.less 文件,它本身导入了 custom-bootstrap.less。

因此,通过注释原始文件并注释 my-bootstrap-theme.less 并开始处理变量 inside 来处理变量文件,从而减少了对我的html文件 inside的。

但是在进入定制之前,这里有一个小技巧可以让你更轻松。
在 less.js 库中,你通常需要重新加载页面来查看所做的更改并减少文件的存储。库引入了减少重载页面需要的功能:

在页面的url后面追加 #!watch 查询,用新的查询字符串重新加载页面,这就是。 不再需要重新加载。

在这里,我将 inside的custom-variables.less 文件变成了to类,并保存了文件,我的页面自动更新了更改。

通过使用内置 inside,然后你就可以使用内置的函数来调整颜色,然后查看结果,这样就可以自动测试css值,然后就可以看到这些结果。

我想调整按钮的角半径,并且想要玩这个值,看看按钮的即时更新。

右击你选择的元素并选择"检查元素"和"开发工具开发工具",操作左边的html元素标签,并在浏览器窗口中显示 in。

在这里我改变了角大小值,我可以在浏览器窗口中看到结果。

利用我们的知识

我更改了按钮'边框和背景颜色( 包括渐变),正文背景和文本颜色,英雄单位背景色,navbars'颜色,的常规颜色和我们自定义主题中的一些其他更改几乎已经准备就绪。

final 步骤的步骤。

最后一步

最后,我想调整一些不在 variables.less 文件内的值。
有些组件包括下拉菜单,在直接组件文件中的样式设置较少,因为它们不能从 variables.less 文件中覆盖。 在这种情况下,我们有两种解决方案可以。

首先,不首选一个( 由我) 是创建类似 custom-dropdown.less的LESS 文件,并使用类 inside 来覆盖更改。 但这让你创造了太多的文件。

第二个解决方案是从原始文件中复制相应的类并将它的插入到单个文件(。我已经创建并将它的命名为 my-bootstrap-theme less ) 中。
这就是我所做的。
这是我的final my-bootstrap-theme.less 文件。

我们的定制 LESS 文件已经准备好了,我们可以编译 final. css 文件了。

在这里有一些方法可以完成这个过程,但是我喜欢使用工具,我选择了" less.app"应用程序,然后将"my-bootstrap-theme。更少"文件编译成"my-bootstrap-theme。css"文件。

最后我更新 index.html 链接最近生成的. css 文件,并注释出 LESS 文件和 less.js 引用,所以我的页面只在纯css文件上。

这是我们的新 Bootstrap 主题完全功能和定制。

希望你喜欢它,我们将会在不久的将来看到很多新的Bootstrap 主题。


WEB  BOO  DES  引导  设计  Bootstrap  
相关文章