【Bootstrap教学课程 (入门篇)】由0开始, 编写网页外观

Bootstrap是一个最常用的一个CSS Framework。

今天,你将会学习使用Bootstrap,Step By Step,从零开始,去编写一个网站的外观。

在这篇「Bootstrap教学课程」,你会学习到:

  • Bootstrap 基本概念
  • 利用Bootstrap去编写网页外观 - KO Party

准备好了?我们开始吧!

目录

第1章

Bootstrap 基本概念

第2章

建立K.O. Party网站

第1章Bootstrap 基本概念

即使大家学习了HTML及CSS的语言后,如果我叫大家从零开始,去编写一个网站的外观,其实你都会觉得有点辛苦。

因为在现实环境当中,编程网站时,我们都会使用不同的Framework去帮忙。

最常用的一个CSS Framework,就是Bootstrap了。

Bootstrap 基本概念

今天,你将会学习使用Bootstrap,我会Step By Step,从零开始,教授大家去编写一个网站的外观。

注意的是,今日这个教学,需要有一定HTML和CSS的基础知识,才能看懂。

如果不会HTML或者CSS的朋友,可以先看回我们HTML与CSS的基础教学:
HTML教学课程 (入门篇) 4个章节 - 由浅入深学习HTML

即使大家学习了HTML及CSS的语言后,如果我叫大家从零开始,去编写一个网站的外观,其实你都会觉得有点辛苦。

因为在现实环境当中,编程网站时,我们都会使用不同的Framework去帮忙。

什么是Framework?

试幻想一下,如果大家要制作一件蛋糕,可以用两种方法。

第一个方法,

从零开始制作,由买面粉、人手打蛋,到制作模具等等,亲手完成每一个步骤,所需要的时间也非常之多。

第二个方法,

是去购买一些现成的自动打蛋机、模具或蛋糕,再自行加入创意,改头换面,创作成一个新的蛋糕。这样一来,所需要的时间也会相对较少。

Framework就如第二种方法,它预先已经编辑好一些设定与编码,让你所用。

你只需要灵活运用这些不同的元素,再改头换面。这样,你就可以快速完成你想要制作的网站了。

现在,无论你是做Backend,还是Frontend,你都可以借助不同的Framework去帮忙,编写Code的。

今日,我们会讨论这个CSS Framework,而最常见的CSS Framework,就是Bootstrap了。

Bootstrap 目前已经推出到第五代。

其实它的原名叫做Twitter Bootstrap,原本是Twitter开发人员内部使用的Frontend Framework来的。

后来在2011年,Twitter改成为Open Source,令到网络上人人都可以免费使用这个Frontend Framework。

Bootstrap主要有两个元素,可以加快你的开发速度。

Grid System

第一个元素,就是Grid System。

Grid System的意思,大概可以幻想成上图般,将横著的网站转化成为12个Columns。

当你要编程不同的Layout,就可以使用不同数量的Columns。

假如我需要制作12格的Columns,只需变成12格的Layout。

假如我需要制作6格x6格的Columns,只需变成每边一半的Layout。

假如我需要制作4格x4格x4格的Columns,只需变成3个4格的Layout。

假如我需要制作4格x8格的Columns,只需变成左边1/3,右边2/3的Layout。

而且这些Grid System是Mobile Responsive,非常方便。

Components

第二能加快开发速度的元素,是Components。

例如是:按钮Button、Navigation等等。

只要在编程时,直接Copy这些HTML Code,或者使用一些Class,便可以很快制作到你想要的东西。

这篇文章教学,将会教大家使用Bootstrap,从零开始,编写一个简单的Layout。

由于我们今天主要是学习CSS,先不会解说部分JavaScript。

然而, 除了Bootstrap之外,还会使用到Google Font,及Font Awesome这两个CSS的Framework。

Google Font

Google Font 主要是让大家能使用一些不同的字形。

Font Awesome

Font Awesome 是可以让大家使用一些Icons。

准备好了?我们开始进入编程网站吧!

第2章编程K.O. Party网站

今天,我会Step By Step,从零开始,教授大家去编写K.O. Party网站的主页。

网站主页的内容,包括有:

  • Banner
  • Menu
  • 简介
  • 活动页面
  • Email List
  • Footer
  • Responsive

准备好了?我们开始吧!

K.O. Party网站 - 主页

今天,我们会使用Bootstrap来制作这个网站ko-party.com:
K.O. Party

这是一个Party公司的网站,我们首先简单地看看网站有什么内容。

包括上图中,有一个Introduction的标题。

拉下会看到,关于这间公司/创办人的简介。

再拉下,你会看到是一些活动介绍。

最后,会有一个留下电邮的格式,接著有一个Footer,包括连结及联络我们。

我们会利用Bootstrap,来制作出上图这个效果。

与KO Party网页一样,包括:

  • 有一个Section,
  • 然后介绍这间公司,
  • 接著就是活动介绍,
  • 之后有一个Email List
  • 以及Footer。

首先,请大家先下载这个Bootstrap开发完整编写网站外观学习源码档案:
加入我们的Email List,免费获取以上源码

解压后打开文件夹,你会看到有两个文件:start、final。

final是我完成品的样子,先不用打开它。

我们来打开start文件夹,你看到只有3张图片而已。

首先,我们打开Visual Studio Code这个软件。

按档案、开启。

选择之前大家下载的bootstrap文件夹,在start中按「打开」。

我们右键新增档案「Index.html」。

开立文件后,先输入网站的基本结构,如上图的:

html Tag、head Tag、body Tag、title Tag。

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.


然后在title Tag输入:

K.O. Party - 全港好玩既Private派对

我们先去Bootstrap网站,按Docs > Getting started > Introduction。

我们需要用到CSS、JS的Code。

按后把两段Code Copy去head Tag当中:

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.


以上两条Code,其实它就是将一条整个Framework Embed进来。

大家要注意,如果是Copy他人的Code,最好放在head的顶层位置(如上图)。

做网页编程,通常都是由顶部开始,再做到下面部分。

所以第一个Section,有一个Navigation,还有一个大主题的底图片。

我们先完成大主题的底图片那个位置,因为这样输入,会比较简单。

第一章节 - Banner

首先我们在body Tag内层输入:

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.


然后,在内层输入:

上图漏了一个重点要提大家的是,container与col-md-12之间,要加回一个row:

内文

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.


然后用Chrome打开后,你会看到上文输入的东西,已经是页面置中了。

为何会这样的呢?

只要在页面右键「检查」一下,就会发现是container这里做的设定。

有关页面置中,是因为我们输入了「col-md-12」,拿了全部12格的位置。

有关​​Grid system问题,大家可以去网站​​Grid system这里看看,了解更多。

比如图中的设定「.col-md-」,就是代表Medium size的电脑荧光幕,就会显示12行。

因为在Bootstra里面,我们可以自行定义,
比如大Mon(Extra large)的时候,拿6行;
很小的Mon(Small)的时候,变成12行。

如果你不想设定得那么细致,正常情况下,只输入Column Md,就会令到全部Screen都合适地使用。

另外还有一些经常用到的,就是Jumbotron与Buttons。

Jumbotron的意思就是图中的Hero banner。

这些功能,大多都是完成了设定的Code来的,我们只需要Copy它对应的Class去做就行了。

回到主题,由于Bootatrap 5已取消了jumbotron功能,所以我们要自行加回这个style,在head Tag中输入:

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.


在然后在css文件中输入:

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.


用Chrome打开看看,你会成功编程出这个样子。

那要怎样设定css的文件呢?
我们只需要再增加一个css的排版的文件。

我们在Visual Studio Code同一层文件夹中,按右键,开一个「CSS」的Folder。

在Folder中,开一个名为「style.css」的文件,
在这个文件内容中,便是我们网站中,所有css设定的文件了。

记得,在css文件中输入以下code,来更改banner空间:

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.


然后再把css连接入html当中,在head Tag输入:

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.


来到下一个步骤,就要转换字形。

正常字形设定,标题会使用一种字型,
内文就用另一种字型,设计成一种对比感觉。

今天教大家的方法,就是使用Google Fonts

标题文字,我会使用Noto Sans Traditional Chinese​,Medium 500

内文文字,我会使用Open Sans​,Light 300

在右上角位置,按入就会看到了Fonts的Code了。

然后Copy link当中的连结在你head Tag之中。

接著,我们就要去css文件中,输入:

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.


h1、h2、h3、h4、h5、h6等主题,
我都会使用Noto Sans字型;

p、a、input、label、textarea、span、ul、li等内文,
我都会使用Open Sans字型。


下一步,就要更改h1的文字细节,可以一起输入:

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.


温馨提示一下,

由于大家之前已经学习过各种css的输入法,所以这里不再一个一个输入法来解说了。

用Chrome打开看看,成功更改了css的设定了。

下一步,就要改善这个按键位置,可以在css文件中输入:

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.


然之后,我们要将整个banner内文向下移动,大家可以这样输入:

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.


用Chrome打开看看,成功将整个banner内文向下移动,这样设定后,就会自动化整个Center Aignment了。

以上就是第一章节 - Banner的部分,成功完成了。

第二章节 - Menu

完成了Banner后,就要来到第2章节,Menu的教学了。

首先,我们去getbootstrap网站,按Docs > Components > Navbar页面。

然后将整个Navbar的Code Copy,

Copy到body Tag中,section Tag上层的位置,

记得整理好Opening Tag和Closing Tag是同一个Level位置。

然后用Chrome打开看看,成功输入了整行Navbar设定的Menu。

由于Menu需要作修改,所以我们在navbar上一层,输入一个container:

navbar内文code

用Chrome打开看看,成功改动Menu为置中位置了。

由于我们Menu左边位置,需要放置Logo,所以大家需要更改成一个img Tag:

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.


接著,我们输入一个header Tag在这里,

原因是,我们需要在css这里,更改Logo的size,所以我们在css文件中输入:

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.


用Chrome打开看看,成功改动Logo的size了。

由于Menu当中,我们只需要用到「Link」那个li Tag的功能(上图红圈),其他的li Tag可以Del。

然后把这个li Tag Copy多3次,主题更改为:

  • 主页
  • 最新派对
  • 常见问题
  • 联络我们

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.


用Chrome打开看看,成功更正分类主题了。

因为Menu右手边的Search Box我们不需要使用,所以可以把其中的form Tag都Del。

接著,你会发现Menu主题有一种灰色的低层色,所以我们需要把nav中的bg-light把它del。

然后再css文件输入:

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.


用Chrome打开看看,每个题目之间的空位增加了。

这样,我们就成功地完成了一个Navigation了。

第三章节 - 介简

来到第三章节,介简页面的设定。

我们先输入一个新的section,这个版面,

我们也是分12个Column,不过左手面有2个Column的位置需要Offset,所以输入方法为:

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.


用Chrome打开看看,我们成功建立了这个主题了。

然后,我们在内层,增加多一个Column,左右4/8来分布。

然后,由于要把内文col-md-8 Left,所以要输入text-start:

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.


然后我们就要输入图中的内容了,可以这样输入:

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.


完成后,用Chrome打开,你就会得出一个这样的页面内容。

接著就要整理一下CSS Style排版,第一个要输入的是在intro jumbotron中加入:

margin-bottom: 0px;

再输入:

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.


用Chrome打开看看,整个介简页面的排版位置,终于成功完成。

第四章节 - 活动页面

来到第四部分,活动页面「最新派对」的设定。

同样地,我们先输入基本版面设定:

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.


用Chrome打开看看,基本的排版位置都有了。

由于原本的设计,这一页面会有一种浅灰色的底色。

所以我们要在CSS文件中输入:

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.


然后就要设定图中的每个细节,你会看到,有一个大格,包含著:

图片、报名、价钱、活动主题、地址及时间。

所以我们首先输入:

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.


初稿样子完成后,用Chrome打开,应该是这样的。

由于这个灰色格式爆了出来,所以我们要在CSS文件中,输入:

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.


由于我们经常会使用不同萤幕,包括手机或电脑,都会有不同萤幕size。

如果你之后的设计,要做到不同的Responsive,那就会比较复杂。

所以我们可以在Bootstrap的网站,Docs页面中的Starter template中的这句:

输入在head Tag,最前面的位置上,当你之后需要做Responsive的时候,就会容易一点了。

回来Box设定上,我们都需要将文字都修改进灰色格式之内,所以我们可以在CSS中输入:

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.


用Chrome打开后,成功修改这部分的位置设定了。

如果觉得价格文字太大的话,也可以在CSS中输入:

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.


接下来,可以完成下面的部分了。

我们在class lower的下层位置中,输入:

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.


用Chrome打开看看,应该会显示出这个样子的。

接著,就要处理CSS的排版问题了,可以输入:

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.


然后在两个span Tag之间加入br Tag分开两行。

另外如果大定留心注意的话,会发现附span Tag还会多一个Icon。

Icon要怎样输入的呢?

最常用的方法可以去fontawesome,按Start for Free。

输入你的Email后、确认,就会得到一段Code。

按指示,可以输入html的head Tag顶部位置。

然后,就可以如上图般,寻找一些icon图案来输入了。

比如搜寻「address」的图案,选择合适的图案。

Copy HTML Code,放入span Tag文字的前方(上图)。

同样地,另外搜寻一个clock图案。

输入另一个span Tag的前方。

用Chrome打开看看,成功输入了Icon。

再整理一下CSS排位,输入:

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.


另外大家留心的话,

其实还有一个白色Box的Background,有Padding及Shadow的效果。

所以在CSS文件中,可以这样输入:

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.


然后用Chrome打开看看,成功做了一个,有Padding及Shadow效果的白色Box了。

由于整个Box都有按入的功能,所以我们会输入一个a Tag,把整个upper及lower包含著。

接著,在CSS中输入:

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.


然后,将整个Box的内容,直接Copy 2次,
再修正CSS中atest h3的margin-bottom为50px。

几经辛苦,终于完成以上的编程后,

我们终于完成这个第四部分 - 活动页面了。

第五章节 - Email List

下一步骤,正式来到第五部分的Email List设定了。

首先输入基本设定:

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.


用Chrome打开看看,你会得出这个样板的。

接著要输入电邮格式,所以我们可以去Bootatrap的网页,

按Docs > Forms > Input group,Copy Large size那个Code。

把那段Code,输入到HTML图中的位置。

接著要输入一个「提交」的Botton,及整理一下整段Code的排版:

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.


用Chrome打开看看,初稿的样板终于成形。

由于我们不需要「Large」这行文字,所以这一段Code可以Del。

之后就要修改CSS的排版,所以一起输入:

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.


另外让版面更美观一些,这里可以输入br Tag来隔行。

然之后,在这里输入一行:

placeholder='你的电邮'

整理完以上输入法后,用Chrome打开看看,我们终于成功完成Email List这部分的设定了。

第六章节 - Footer

来到第六部分,就是网页底部的Footer了。

同样地,输入基本格式:

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.


用Chrome打开看看,是否输入正确了。

接著在Footer上方位置,会有一条线来分格,及修改logo size,

所以我们可以在CSS中输入:

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.


用Chrome打开看看,完成了左手边的Column。

接著,就要进行第二及第三个Column的设定了,一起在第一个Column下面位置输入:

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.


然后在CSS文件中,输入:

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.


然后用Chrome打开看看样版,是否正确地修改了CSS的设定。

最后,来到中间「连结」部分的Column,一起输入:

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.


同样地,然后在CSS文件中,输入:

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.


用Chrome打开看看,我们终于成功地,完成第六部分的设定。

大家可以从头到尾细看一次,整页网站是否正确地完成了呢!

第七章节 - Responsive

来到Responsive的部分,由于网站会使用不同的萤幕Size来运作,所以你原先的网站设计,在不同萤幕上,总会有一些出入。

由于Botstrap原本的设定已经很好,所以要修正的部分原会太多。

比如是去到768px时,有部分位置要修正,所以可以在CSS中输入:

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.


然后用768px以下的size看一看,成功修正了部分的设定。

以上就是Responsive的基本修改教学,大家记得要多加练习喔。

最后这里再补充两点,

其实每当我们写一个html code的时候,最好在head Tag上层,加一个:

这段Tag其实是方便用来记录及证明,这是一个怎样的输入格式。

另一点还要补充的是,就是html的head Tag第一行,还需要输入这一段Code:

See the Pen by Chan Ying Yeung (@chan-ying-yeung) on CodePen.


这个meta Tag有什么用途呢?

其实这个meta Tag是一些附加资料来的。

原来没有输入这一段Code的这,有些中文文字,就会有机会变成乱码。

以上两点补充,希望大家多加注意喔。

总结

以上七个章节课程,就是Bootstrap的基础概念。

你还需要好好去做练习,巩固每一章的概念,才能充份理解和运用Bootstrap。

如果大家有甚么问题,欢迎email与我讨论!

你可能也会喜欢...

in 全部, 网页设计教学 Jun 20, 2021

HTML教学课程 (入门篇) 4个章节 - 由浅入深学习HTML

这是一篇全面, 适合新手看的HTML教学。文章会分开4个章节,由浅入深,由零开始教授你所有你要知道的HTML编程知识。

in 全部, 生活隋笔 Sep 01, 2021

生日优惠/生日好去处全攻略(2021年更新) - 30个吃喝玩乐,行程推介

生日有咩做?这篇「生日优惠全攻略(2021年更新)」将会为你介绍30 个生日好去处以及不同的生日优惠,更为大家准备生日一天的行程,希望你们得到一个美满的生日!

加入我们的Email List

免费参加【网页开发入门CRASH COURSE】线上课程!

提交

胡子科技学院

地址: 香港铜锣湾谢斐道535号Tower 535 18楼

电邮: info@mtache.com

© The Mustache Technology
本文由作者【鬍子Jack】创作,原文刊登于【鬍子科技學院】,如未经授权不得转载。
创作者
Awwwards得奖网页设计师 畅销书<90后的半退休生活>作者
回应
Blogger / 内容创作者 / 作家大招募
投稿刊登你的文章,成为HKESE 平台作家
HKESE 自由作家计划™