【CTB项目笔记】框架的选择

Celia 2020年11月10日 13:40 385 0

CTB 网站的建设分为前端和后端两部分。后端的同学们负责的是针对声音识别与面部识别机器学习程序的编写，作为前端成员之一的偶，任务便是写一个漂漂亮亮与众不同万里挑一的网站页面 (๑•̀ㅂ•́)و✧ 在组长导师的建议下，本人决定使用 Bootstrap 框架来搭建网页前端，这篇文章将简单介绍 Bootstrap 这个框架，以及我们选择 Bootstrap 的原因。

介绍

首先，什么是 Bootstrap？

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

支持大多数主流浏览器，CSS 是自适应的。

用 Bootstrap 一个最大的好处是不用从 html 从头搭起。网站也比较好设计，因为网上有许多已经提前设计好了的模板。

自适应网页

Bootstrap 一个最大的特点就是能够制作在不同屏幕大小的设备上都能显示美观的网页。

这里介绍了如何制作自适应网页的基础，总的来说就是能够将网页分成不同的 columns。Bootstrap 默认一个网页的完整宽度有 12 列，只要给网页不同元素添加不同的 class，告知 Bootstrap 元素在这12列中占有的比例，就能控制元素的宽度。网页能在不同大小的屏幕上显示不同数量的 Rows，让网页更加美观。

一个宽度为12的网页可以像下面这样分割：

将网页分成左右两部分则这样写：

<div class="row">
    <div class="col-md-6">
        <!--- Left Part --->
    </div>
    <div class="col-md-6">
        <!--- Right Part --->
    </div>
</div>

SCSS变量

颜色

Bootstrap 提前设定了一些主要的颜色变量，可以直接在 scss 中使用：

例子：

.alpha {
   color: $purple; 
}
.beta {
   color: $yellow-300;
   background-color: $indigo-900;
}

宽度

Bootstrap 初始设置：

$grid-breakpoints: (
   xs: 0,
   sm: 576px,
   md: 768px,
   lg: 992px,
   xl: 1200px,
   xxl: 1400px
);

例子：

// No media query necessary for xs breakpoint as it's effectively `@media (max-width: 0) { ... }`
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }
@include media-breakpoint-down(xxl) { ... }