This course will give you an overview of client-side web UI frameworks, in particular Bootstrap 4. You will learn about grids and responsive design, Bootstrap CSS and JavaScript components. You will learn about CSS preprocessors, Less and Sass. You will also learn the basics of Node.js and NPM and task runners like Grunt and Gulp. At the end of this course, you will be able to a)Set up, design and style a web page using Bootstrap 4 and its components, b) Create a responsive web page design, and c) Make use of web tools to setup and manage web sites. This course also includes an honors track that enables you to work on your own project developing a website using Bootstrap 4. Students enrolling in this course should have prior good working knowledge of HTML, CSS and JavaScript.
Exercise (Video): Getting Started with Bootstrap
Loading...
来自 The Hong Kong University of Science and Technology 的课程
Front-End Web UI Frameworks and Tools: Bootstrap 4
1426 个评分
The Hong Kong University of Science and Technology
1426 个评分
课程 1（共 4 门，Specialization Full-Stack Web Development with React）
从本节课中
Front-end Web UI Frameworks Overview: Bootstrap
This module gives you a quick introduction to full-stack web development and the outline of the course. Then you will learn the basics of Bootstrap, setting up a web project using Bootstrap. You will learn about responsive design and the Bootstrap grid system. At the end of this module, you need to complete your first assignment.
与讲师见面
Jogesh K. MuppalaAssociate Professor
Department of Computer Science and Engineering
Strap on your boots,
and let's get started with Bootstrap.
I'm sure your fingers are itching to get your hands around Bootstrap.
So, first step, go to
the exercise instructions that follow this video
in your Bootstrap course page on Coursera.
And then in the instructions,
you will see a link to this file Bootstrap4-starter.zip.
Download the zip file to your computer.
Also, the step-by-step instructions that are illustrated in this video will
also be given in the exercise instructions that follow this video.
There, you will have access to any of the code snippets that you need for this exercise.
This would be the case for all the exercises in the future, too.
So, should you need to get hold of the code snippets,
that is where you will find them.
Once you download the zip file,
move that zip file to a convenient location on your computer.
So, here, I have moved it to a folder named Coursera on my computer,
and then I have the zip file with this long name there.
Just unzip the file.
Once you unzip the file,
you will find a folder named Bootstrap4 created in your computer.
Inside the Bootstrap4 folder,
you will see another folder named conFusion, there.
Go into the conFusion folder and you would see two files there,
index.html and package.json file.
Now, open a command window or
a terminal and then move to this folder in your command window or terminal.
At the command prompt, type npm install.
Note that I already have the package.json file in there.
So the package.json file is configured so that
the lite-server development dependency would be installed if I type npm install.
So, once you type npm install,
you will see that the lite-server will be installed in your node_modules folder each.
Once this is complete,
open this folder in your favorite editor.
Once you have the folder open in your editor,
create a.gitignore file and
then put node_modules into the gitignore file and save.
So this is to ensure that when you do a gitcommit,
the node_modules folder will not be committed.
After that, it is time to go and fetch Bootstrap for use in our project.
Before we fetch Bootstrap,
let's do a commit of the current state of the file.
So, do git init and initialize your git repository.
Then you can check git status,
and you would see that these files need to be committed,
add all the files,
gitcommit -m "Initial Setup".
So this is the starting point of your folder at this moment.
So, with this, your starting point of your web project has been now committed to git.
Now you can set up this git to synchronize with an online repository,
just like we talked about in the git exercises.
So you can set up a repository either on Bitbucket or on Github and then
synchronize this project to that git repository.
Our next step is to go and fetch Bootstrap.
To do that, add the prompt type npm install bootstrap@4.0.0 and also --save,
and let the Bootstrap be installed.
Once Bootstrap is installed,
we realize that we also need to install its peer,
which is jQuery as well as Popper.js.
So let's go ahead and install both jQuery and Popper.js into this project folder.
So, to do that, add the prompt type npm install
jquery@3.3.1
and Popper.js@1.12.9 --save.
Now, whenever I install any of the npm packages,
I am explicitly specifying the version of the package that you should install.
The reason for this is that I want to make sure that as you go through this exercise,
all the steps will work correctly.
So I am specifying the exact version of the npm modules to be installed.
So, here, we are installing the jQuery version 3.3.1 and Popper.js version 1.12.9.
Subsequently, also, I will specify the exact versions of the modules to be installed.
So let's go ahead and install these.
And once they are installed,
we can go to the next step.
Going back to our project folder,
you would see that if you go into node_modules,
you will see a folder in there named Bootstrap.
And inside the folder named Bootstrap,
you'll find a folder named dist.
So, inside dist folder,
you'll find two sub-folders named CSS and js.
If you go into the CSS folder,
you'll find a whole bunch of precompiled CSS files here.
The one that is of interest to us at the start is Bootstrap min.css.
That's the file that we are going to include into our
index.html file in order to make use of Bootstrap in our project.
Similarly, going to the js folder,
you would see that there is a Bootstrap min.js file.
We're going to include that also into our index.htm.
So that'll be the next step that you will see me doing.
Before we go to the next step,
let's start up our lite-server so that we can see the changes that we make to the
index.html immediately reflected into our web page in real time.
So let's start up lite-servers.
So, type the prompt type npm start,
and then that should start up your lite-server.
You can now see, on the screen,
my editor on the left and the current version of the index.html page on the right.
So, as you can see,
I have already configured the index.html page with some content.
This web page looks like the typical web page of a computer science professor.
Let's now open the index.html page in our editor.
And then in the head part of the index.html page,
right before the title,
I'm going to paste in a little bit of code.
This code snippet is given to you in the instructions.
So you can simply copy and paste this code snippet,
and I'll walk you through what this code snippet is trying to do.
You will notice that I have three meta tags here.
The first one says charset="utf-8".
So this is the unicode that is going to be used.
The second line which says meta name="viewport",
I'm going to come back and explain this particular line to
you in the next lesson when we will look at responsive web design.
Now, let me draw your attention to this particular line which
says link rel="stylesheet", and then href.
Note that I am specifying href as "node_modules/bootstrap/dist/css/bootstrap.min.css".
So what I am specifying is that the bootstrap.min.css file,
which contains the CSS classes corresponding to Bootstrap that we have
downloaded using NPM to our node_modules folder,
I'm going to include that into the head of my index.html page.
So you need to include the CSS classes provided by Bootstrap.
You also need to include the JavaScript classes provided by Bootstrap,
which we're going to do at the bottom of this page.
Going to the bottom of this page, note,
just before the closing body tag,
I'm going to paste in the code to include all the scripts there.
So, to do that,
I just paste in the three lines for the script to include the jQuery,
Popper.js, and also the Bootstrap min.js.
And note the order in which I have included this.
So the Bootstrap is at the bottom.
Then, since Bootstrap is dependent upon both jQuery and Popper in that order,
so I will first input jQuery.
And then after that, we input Popper, and then finally,
Bootstrap min.js at the bottom of the index.html file.
Now, this is included at the bottom of the page.
Because when you are loading the page from a web server,
you want the CSS classes to be loaded immediately so that as the page starts rendering,
when the JavaScript is fetched,
the JavaScript needs to execute in order to make changes
to your page with the JavaScript code,
and that will take a little bit of time.
So you don't want the user to be waiting for
the entire page to be loaded before they see something in their browser window.
So that's why we normally load the JavaScript classes
towards the end of our html page just before the body tech.
After making these changes,
let's save the file.
Now, the reason why I am showing the index.html
file in my editor and also the browser right next to it is,
the moment you save the changes that you have made to the index.html file,
note how the browser rendering of that file
immediately updates and see Bootstrap already in action on the page.
Right now, you'll see that your page is using Times New Roman to render all the content.
The moment I save the web page,
you notice that the fonts being used on your web page have changed.
Now, your web page is set up to make use of the Bootstrap classes,
and it is using Bootstraps default typography to render all the content.
Bootstrap by default uses Helvetica Neue for the font.
You can change the default font for bootstrap and so on,
but that will be beyond the scope of our discussion right now.
So, once you set up your index.html page and save it,
you will immediately see Bootstrap coming into action in our web page.
So this is how I'm going to keep illustrating,
as we add various bootstraps, CSS classes,
and components to our web page,
how the rendering of it in our browser will keep changing.
Now, obviously, the rendering of the page in our browser is still terrible.
It's better than the typical computer science professors web page,
but definitely not readable.
We need to now bring into action the various CSS classes and
the JavaScript components that
our Bootstrap web UI framework provides in order to design our web page.
So we will do that step by step as we go through this exercise.
This may be a convenient time for you to do a git commit of
the changes that you have made so that at the end of this exercise,
your state of your project folder will be saved to your git repository.
Going to my conFusion folder in another tab of my terminal window,
if I type git status,
I now see that my index.html file and the package of JSON file have been modified.
So I'm going to do a commit.
So, now, my status of
the folder at the end of this exercise has been committed to my git repository.
You can synchronize that with your online repository so that
the state of your project will be saved at this point.
With this, we complete our first Bootstrap exercise.
You have now seen how we can configure Bootstrap to be used in our web project.
As we proceed to the next few exercises,
we're going to employee the Bootstrap classes to design our web pages.
