【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与我讨论!
你可能也会喜欢...
HTML教学课程 (入门篇) 4个章节 - 由浅入深学习HTML
这是一篇全面, 适合新手看的HTML教学。文章会分开4个章节,由浅入深,由零开始教授你所有你要知道的HTML编程知识。
生日优惠/生日好去处全攻略(2021年更新) - 30个吃喝玩乐,行程推介
生日有咩做?这篇「生日优惠全攻略(2021年更新)」将会为你介绍30 个生日好去处以及不同的生日优惠,更为大家准备生日一天的行程,希望你们得到一个美满的生日!
加入我们的Email List
免费参加【网页开发入门CRASH COURSE】线上课程!
提交胡子科技学院
地址: 香港铜锣湾谢斐道535号Tower 535 18楼
电邮: info@mtache.com
© The Mustache Technology