开发文档 - 兔小白工作室

快速开始

感谢您选择兔小白，我们致力于为您打造安全、丝滑、极致体验的智能生活平台。

文件结构

解压兔小白模板包后，您将看到以下文件结构：

CSS 样式文件位于 assets/css 目录
JS 脚本文件位于 assets/js 目录
字体文件位于 assets/fonts 目录

HTML 结构

兔小白模板的 .html 页面结构基于以下原则构建：

<!DOCTYPE html>
<html lang="en">
<head>
	
	<!-- Your Title, Description, Stylesheets -->
	
</head>
<body>

	<main class="main"> 

		<header class="header">
			...
		</header>
		
		<article class="main-body">

			<div class="bread-crumbs">
				...
			</div>
			  
			<div class="section">
				...
			</div>
		
		</article>
		
		<footer class="footer">
			...
		</footer>

		<div class="preloader active"><div></div></div>

		<nav class="spf main-menu">
			...
		</nav> 
	
	</main>
	
<!-- JavaScript -->
</body>
</html>

CSS 结构

style.css 文件包含页面的所有特定样式。文件结构基于以下原则构建：

/*
0. Root
1. Reset
2. Content
    2.1 Fonts
    2.2 Base
    2.3 Tables
    2.4 Typography
3. Layouts
    3.1 Grid
    3.2 Gutters
    3.3 Header
    3.4 Section
    3.5 Footer
4. General
5. Components
    5.1 Preloader
    5.2 Lines
    5.3 Buttons
    5.4 Tabs
    5.5 Accordions
    5.6 Breadcrumbs
    5.7 Socials
6. Sections
    6.1 Intro
    6.2 Items of numbers
    6.3 Icon items
    6.4 Contacts
    6.5 Brands
7. Media
*/

JS 结构

*.js 文件结构基于以下原则构建：

(function() {

    "use strict";
										  
    const app = {
										  
        init: () => {

            app.setUpListeners();

            ...	

        },

        setUpListeners: () => {

            ...

        },

        ...
											  
    }
										  
    app.init();
										  
}());

模板自定义

更换 Logo

Logo 容器可以在头部容器中找到 - <header>

<!-- Begin logo --> 
<a class="logo" href="./" title="兔小白">
    <img src="assets/img/logo.svg" width="160px" height="32px" alt="兔小白"/>
</a><!-- End logo -->

配置配色方案和字体

style.css 文件包含根变量，您可以根据需要进行修改。

:root {
    --font-family: "Source Sans Pro";
    --font-size: 16px;
    --font-weight: 400;
    --font-style: normal;
    --line-height: 1.5;
    --heading-font-family: "Montserrat";
    --heading-font-weight: 700;
    --heading-line-height: 1.3;
    --additional-font-family: "Playfair Display";
    --accent: #DB3700;
    --background: #ffffff;
    --text-primary: #151515;
    --link: #3267B5;
    --border: #474747;
    --placeholder: #6F6F76;
    --error: #E02D00;
    --gutter-x: 2rem;
    --gutter-y: 2rem;
}

使用文档