如何定制Bootstrap

Posted 2023-05-15

参考技术A 现在用的主题是基于Bootstrap制作的，，预定义了许多样式及功能，，但是实际应用很少会全部需要，，或者会想要自己设置不同的样式，
好在我们可以下载Bootstrap的源码版自行修改编译（涉及到Less等知识），或者直接在线定制Bootstrap
Bootstrap

ZUI前段框架简介

 

一、说明

基于Bootstrap定制

ZUI继承了Bootstrap 3 中的大部分基础内容，但出于与Bootstrap不同的目的，一些组件都进行了定制和修改。这些变化包括：

• 移除了部分插件的限制，增加了一些适用特性，例如Popover弹出的内容可以指定已有的标签内容,Modal对话框可以自动使用iframe弹出整个页面内容等；
• 增加了实用的视图组件，包括卡片、评论、列表、文章、仪表盘、看板等；
• 新增了几个Javascript组件，包括拖放、排序、灯箱预览，本地存储，图片裁剪等；
• 集成了一些实用的第三方组件，包括cookie、hotkey、chosen、Kindeditor、ChartJs、DatetimePicker等，并且这些组件样式经过重写，风格更为统一；
• 增加了配色表和新的主题模板，最少只需更改一个配置项更换颜色主题；
• 修改了默认字体配置，包含所使用的字体集和字体大小；
• 替换了默认的字体图标，在FontAwesome图标集的基础上去掉了一些图标同时增加了一些新的图标，写法上比FontAwesome更简单；
• 大部分组件的默认样式都不需要额外的指定包含‘default‘的Class，例如class=‘btn btn-default‘，‘panel-default‘在ZUI中不需要；
• 增加了一些辅助类，例如文本背景及高亮等；
• 增加了一些可选样式，例如滚动条等；
• ……

选择ZUI还是Bootstrap？

Bootstrap是非常优秀的前端框架，但在构建大型应用的开发时通常远远不够。如果Bootstrap能够完全满足你的项目，建议使用Bootstrap，如果你需要的更多，则建议使用ZUI。使用ZUI的显著理由如下：

• 大部分书写方式继承Bootstrap，从Bootstrap方便迁移到ZUI，学习成本低，而且写法上更精简；
• ZUI提供更多的功能选项，即使是第三方组件也提供统一的样式和主题支持；
• ZUI采用核心+独立组件按需加载机制，即使包含的内容更丰富，也会控制核心内容打包后体积大小，一般css不超过150k（目前140k，精简版100k），js不超过100k（目前84k，精简版40k），精简版包含绝大部分功能，但体积更小。非核心的独立组件内容按需加载，推荐自定义编译；
• ZUI从实际项目中诞生（包括禅道、蝉知和然之），实践证明其有效性，一切为了快速构建你的应用；
• 一些令人激动的新内容正在开发中...

二、全局样式表

 

ZUI使用 normalize 来重置样式，这样尽可能保证在所有浏览器中有一致的体验。

为何使用 Normalize.css

如果一份没有任何样式设置的html文档在浏览器打开时，浏览器会使用默认的样式来呈现文档，确保更易于阅读文本和区分文档中不同的内容。

但是当我们需要应用自己的样式时，浏览器默认的样式会造成干扰，更重要的是不同的浏览器的默认样式并不相同，这使得我们希望的样式最终呈现效果变得不可控。Normalize.css 正是为了解决此问题而生，而且做的更好。

相关资源

• Normalize.css 项目地址
• Normalize.css Github 项目地址

三、约定

 

UI元素类型及定义

ZUI中包含各种各样的界面元素（或控件），例如按钮、列表、表格等，甚至一些特定场景用到的一组元素也会在ZUI中精心设计，例如评论列表。为了更好的展示我们的设计理念，把这些元素归为如下四类：

• 基本控件：用来构建网页应用的基本界面单元，例如按钮、文本标签、输入框等。
• 组件：通过一个以上的基本控件组合而成的较复杂的界面单元。例如表单、菜单、表格等。
• Javascript 组件：这些组件要正常使用会使用到Javascript。某些Javascript组件需要手动调用来启用。
• 视图：视图是将基本控件和组件组合使用来展现网站上的通用内容，例如评论视图及文章预览列表视图。

ZUI中的大多数界面元素都有不同的子类型、状态及参数。关于类型、状态及参数的定义如下：

• 类型：同一种界面单元的不同类型，例如按钮有主要按钮、次要按钮及危险按钮等，导航菜单类型有普通导航及顶部固定导航等。任何时候都应该只为同一个界面元素指定一种类型，默认类型无需指定。
• 状态：状态为同一种界面单元允许在不同的状态中切换，例如按钮有正常状态和不可用状态，下拉菜单有展开及收拢状态，菜单项目有选中和未选中状态等。在同一个界面元素中允许叠加多个状态。
• 参数：参数作为界面单元如何展现提供依据，例如表格是否隔行变色，是否启用鼠标悬停等。可以同时指定多个参数。

通用状态和参数

很多状态和参数在不同的控件或组件中具有一致的用法和相同的含义。在ZUI中，这些通用的状态和参数具有固定的名字（CSS 类名）。

常用通用状态如下：

名称	说明	常见使用对象
.active	指示控件或者其子项目已经被激活。	导航条目、下拉菜单条目、菜单列表、按钮组中可以激活的按钮等。
.hover	指示控件正处于鼠标悬停状态，在CSS中相对于:hover选择器。	少部分需要Javascript处理的控件。
.focus	指示控件正处于鼠标悬停状态，在CSS中相对于:focus选择器。	少部分需要Javascript处理的控件。
.disabled	指示控件处于不可用状态，通常与DOM属性disabled="disabled"一起使用。	按钮、可以点击菜单项目、超链接、表单元素等。
.in	用于控制控件显示或消失的动画过程。在控件显示时指示控件已准备完成CSS动画并完全显示；在控件消失时如果移除该状态指示控件已准备执行控件消失动画；与状态.collapse一起使用时表示处于完全展开状态。	标签页、下拉菜单等
.open	指示隐藏的内容已经完全展示。	下拉菜单等。
.collapse	指示当前组件可以被折叠或展开。与状态.in一起出现时表示组件已被展开，没有此状态则反之。	响应式导航、折叠菜单等。
.collapsing	指示当前组件正处于折叠或展开的动画过程中。	响应式导航、折叠菜单等。

常见的通用参数如下：

名称	说明	常见使用对象
.bordered	使得组件具备边框样式。	表格等。
.borderless	移除控件的边框样式。	表格等。
.inverse	指示组件使用与默认颜色样式相对的样式。	导航等。
.fixed	指示当前组件位置被固定，不受页面交互影响。
.with-icon	指示当前组件在显示内容时能够额外显示一个图标。	消息框等。
.with-padding	指示当前组件内容显示区域包含更多的边距。

界面元素的命名

命名原则

• 所有控件、组件、视图、模块和行为的命名都应该使用最常见的名称，准确体现界面元素功能。例如菜单应该命名为menu，而不是navigation。
• 类型、状态及参数的命名均为元素名加上类型（或状态及参数名）前缀，中间用间隔号分隔，例如固定位置的菜单为.menu-fixed。对于通用状态或参数可以省略前缀，例如一个菜单项目处于激活状态，则只需命名为.active，而不许命名为.menu-active。
• 所有控件、组件、视图、模块和行为的命名均不加与当前元素功能无关的前缀和额外命名，例如一个导航菜单命名为.nav，而不增加额外命名为.ui.nav或者.zui.nav。