【10bet】让你的网站支持iOS13 Darkmode 模式的工具

来源:http://www.chinese-glasses.com 作者:Web前端 人气:179 发布时间:2020-04-15
摘要:时间: 2019-10-09阅读: 108标签: 模式 第5章 深入了解:自定义Bootstrap 想象一下,一个网站,所有的网站都是用Bootstrap构建的,看起来和感觉都一样。无聊,对吧?幸运的是,我们有能力改变我

时间: 2019-10-09阅读: 108标签: 模式

第5章 深入了解:自定义Bootstrap


想象一下,一个网站,所有的网站都是用Bootstrap构建的,看起来和感觉都一样。无聊,对吧?幸运的是,我们有能力改变我们使用的任何框架的默认样式。

许多Bootstrap的组件和插件都有自己的默认样式。为了给他们一个特别的体验,你需要替换他们的CSS规则并定义你的自己的。

在第一章,我和大家分享了一些建立在Bootstrap上的流行网站。它们都有自定义的Bootstrap的CSS,以使它们的模板看起来独一无二且美观。

在本章中,我们将讨论可以完全自定义Bootstrap默认样式的各种方法,并分析哪种方法更可取,为什么。最后,我们将尝试理解Bootstrap的CSS是如何编写的,使它成为一个高度响应的框架。

最近iOS13 发布了darkmode模式。虽然本人觉得次此功能呼声大于实际,但作为一个以用户体验为己任的前端,当然不能坐视不管,我们总该做点什么。在进行了一番调研了解后,我们有几种支持darkmode模式的方法。

自定义Bootstrap样式


您可以通过各种方式自定义引导程序。在本节中,我们将通过静态CSS文件和较少的文件进行自定义。

什么是Less?

Less是一个CSS预处理器,它扩展了CSS功能,添加了诸如变量、混合、函数等编程特性。
它保持CSS模块化、可维护和可扩展。
更少的文件被编译来生成CSS文件,然后你可以在你的项目中使用。

如果你使用Ruby,Sass是一个替代选择。
它也是一个CSS预处理器,Bootstrap支持;然而,我们不会在本书中涵盖Sass的定制。

带有Bootstrap默认包的样式表是普通的CSS文件。如果您使用文本编辑器打开静态CSS文件,您将发现许多选择器及其相关的CSS属性。您可能会倾向于在这些文件中直接更改CSS属性及其值,以节省时间,但我强烈建议您不要使用它!

直接修改CSS文件有很多缺点。尤其是下列一些:
1、这些变化是不可逆的。您将不记得最初出现的CSS属性和它们的值,因此您将无法还原回原来的引导样式。
2、您对一个选择器所做的任何更改可能会破坏Bootstrap的响应性。
3、调试变得非常困难;您需要了解CSS继承链来到达父选择器。

在我们进入定制阶段之前,让我们首先来建立本章中将要使用的项目。和往常一样,我们将使用在第1章中创建的项目Bootstrap_demos。将所有内容复制到一个名为Chapter_5的新文件夹中。并更改index.html页面标题为“Customizing Bootstrap”。现在将<h1>标记从<body>中删除。

首先了解到一个叫Darkmode.js的工具,该工具通过配置一些通用的颜色,能让网站实现一键切换darkmode模式,简单方便。但缺点就是没办法实现比较细微的界面定制,只能在一些颜色上做处理。

使用CSS自定义Bootstrap

这种类型的定制通常被称为覆盖默认的CSS。我们实际上用我们自己的自定义值覆盖了一些Bootstrap的CSS属性。

首先,我们在/css文件夹中创建一个名为app.css(或任何你想要的)的新文件。然后我们打开index.html并链接到新的CSS文件。这个新CSS文件的链接应该包含在Bootstrap的CSS文件的链接下面:

<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/app.css">

让我们添加一个Bootstrap按钮,如图5.1所示。

<div class="container">
<a href="#" class="btn btn-primary btn-lg">Big Fat Button</a>
</div>
Figure

10bet 1

图5.1

我们将使用它展示如何对其默认设计进行一些更改:
1、从这个按钮上删除圆角
2、改变填充量
3、调整字体大小
4、改变背景颜色

让我们使用开发工具来检查这个按钮。我们将使用Chrome,如图5.2所示,但是您可以使用任何类似的工具,比如Firefox中的Firebug。填充、字体大小和边界半径等属性来自btn类,而属性背景则应用于类btn-primary。要修改它们,我们需要在CSS文件app.css中使用相同的选择器重写属性。

10bet 2

图5.2

打开app.css加入下列CSS代码:

.btn{
border-radius: 0;
padding: 5px 10px;
font-size: 16px;
}
.btn-primary{
background: #63AEF0;
}

如果我们刷新页面,我们的按钮应该看起来像图5.3。

10bet 3

图5.3

注意,我们使用了Bootstrap类btn和btn - primary来覆盖CSS样式。从此以后,每当您使用Bootstrap的按钮组件时,它将会有一个类似于图5.3的更改样式。要还原回原来的样式,我们只需从app. CSS文件中删除CSS样式。

如果您想要更改web页面中仅一个特定按钮的样式,而不是针对Bootstrap的选择器,请使用ID来应用CSS更改。

如果你的设计师在设计稿上另外做了一版暗黑模式的,并且细节上除了颜色还有一些图片的修改,这时候可以用到css的媒体查询,对正常模式下的一些样式做覆盖。举个例子

使用Less自定义Bootstrap


如果您是一个Less的开发人员,您将喜欢这个部分,因为有很多选择,可以使用Less的自定义Bootstrap。每个Bootstrap组件都可以轻松地更改它们的属性。要访问所有Less文件,您需要下载一个特定版本的Bootstrap。请登录http://getbootstrap.com/docs/3.3/getting-started/#download并点击[Download source]按钮(选择下载源代码)。这个源代码包包含编译后的和原始的Less文件。【注:在翻译这本书的时候,Bootstrap已经推出了v4.0.0-beta版本,但建议在推出稳定版本后再去用于实际项目】

Less文件位于Less文件夹内。在这里,你会发现很多根据Bootstrap的组件命名的.less文件。所有与特定组件相关的CSS属性和值都存在于相应的.less文件中。您还将找到一个bootstrap.less,这是.less主文件。它包含了该文件夹中的所有的less文件。您只需要编译此文件就可以生成定制的Bootstrap样式。让我们把这个文件夹里的所有文件分类。

.body { color: #000; background: url('normal.png');}

Bootstrap的Variables和Mixins

所有Bootstrap中使用到的变量和混入分别放在两个文件中:

1、variables.less 包含了Bootstrap中使用的全部标准颜色,默认的响应宽度值、默认填充值和边界值。如果你想做任何这样的改变,你需要处理这个文件。
2、mixins.less 包含用于生成前缀的混入,并动态计算网格的宽度、占位符、按钮大小等。

在媒体查询中,我们覆盖需要修改的属性

复位文件

这里有两个复位文件去清除浏览器的默认值:

  1. normalize.less清除了许多浏览器默认设置如字体,字体大小,填充和边距,标题标签设置,表单元素的样式,等等。

2、print.less包含打印支持媒体查询。

/* b.css */.body { color: #000; background: url('normal.png');}@media (prefers-color-scheme: dark) { .body { color: #fff; background: url('dark.png'); }}

核心文件

这里有七个核心文件
1、scaffolding.less包含所有辅助类的图像(如img响应。IMG圈),对各种状态的链接元素,风格水平规则,屏幕阅读方式,等等。
2、type.less是一个排版文件,它包含了标题标签、段落标记和其他与内容相关的助手类的样式,例如.lead、.text-muted等等。
3、code.less包含CSS属性,用于样式化web页面上的任何代码。
4、grid.less涉及到在Bootstrap网格系统上应用的所有CSS值。
5、tables.less用于装饰<table>元素的样式。它还为诸如此类的表定义各种助手类,例如:table-condensed。table-bordered等等。
6、forms.less美化窗体元素,如文本框、复选框、单选按钮等等。
7、buttons.less包含各类Bootstrap按钮风格造型。这里定义了所有与按钮相关的类。

在支持暗黑模式媒体查询的浏览器中,会自动渲染出media中的样式,实现样式覆盖。

组件文件

这里有Bootstrap的21个组件文件;前一章所涵盖的每个组件都有自己的文件。与组件相关的所有CSS定义都可以在其对应的less文件中找到。
■ component-animations.less
■ glyphicons.less
■ dropdowns.less
■ button-groups.less
■ input-groups.less
■ navs.less
■ navbar.less
■ breadcrumbs.less
■ pagination.less
■ pager.less
■ labels.less
■ badges.less
■ jumbotron.less
■ thumbnails.less
■ alerts.less
■ progress-bars.less
■ media.less
■ list-group.less
■ panels.less
■ wells.less
■ close.less

这个列表中还有一个文件,实际上它本身不是一个组件,close.less。它包含了将用于模式按钮的CSS规则,警报,以及关闭此特定组件的其他元素。

该方法需要我们每次写一个样式都要在媒体查询中输入同样的选择器,如果选择器嵌套比较深或者当样式表比较长的时候,需要来回切换位置或文件,比较麻烦。基于这点,我开发了一个小工具,支持在正常样式的旁边,以注释的方式写上暗黑模式的样式,后续工具会自动编译成media的格式,无需用户手动编写。

插件文件

这里有四个.less文件定义了通过引导标记触发或创建的JavaScript插件的CSS样式:
■ modals.less
10bet,■ tooltip.less
■ popovers.less
■ carousel.less

本文由10bet发布于Web前端,转载请注明出处:【10bet】让你的网站支持iOS13 Darkmode 模式的工具

关键词:

频道精选

最火资讯