User Input

Loading...

From the course by The Hong Kong University of Science and Technology

Front-End Web UI Frameworks and Tools: Bootstrap 4

754 оценки

The Hong Kong University of Science and Technology

Front-End Web UI Frameworks and Tools: Bootstrap 4

754 оценки

Course 1 of 4 in the Specialization Full-Stack Web Development with React

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.

From the lesson

Bootstrap CSS Components

This module concentrates on Bootstrap's components that are designed using pure CSS classes. You will learn about Navigation and Navigation bar. Then, you will learn about buttons, forms, tables, cards, images and media, tags, alerts and progress bars. At the end of this module you need to complete your second assignment.

Exercise (Video): Buttons9:53

Exercise (Video): Forms22:21

Meet the Instructors

Jogesh K. Muppala
Associate Professor
Department of Computer Science and Engineering

[MUSIC]

Gone are the days when websites were purely used for

delivering information to the users.

These days on most websites, users will be able to interact with the website to

supply information, for example by clicking buttons or by filling in forms

and by typing something into search boxes, and so on.

So how do we support these kinds of interactions with the users?

So that is what we're going to deal with in this particular lecture and

the exercise that follows.

As an example, if you visit the Coursera website, you will see that you have

buttons at the top here that you could click to reach different places.

You could have a search box, into which you can type in information,

to search for, say for example, full stack web development and, so on.

So, what we notice is that user interaction needs to be supported

on websites using many different approaches including buttons,

forms, text boxes, check boxes, and many others.

Early interactions with websites were provided mainly through hyperlinks.

So you could click on a hyperlink and go on to other places and so on, but

this is obviously,

hyperlink is just one of the many methods of interacting with your website.

You could have buttons included on the website which when clicked,

will result in some action being taken on the website.

You could have forms that you fill out to supply information to the website.

So when you look at how you would include such user

Interaction features into your website, you will see that you could use something

like the a tags that are useful for providing hyperlinks,

then you have the button tags that enable you to include buttons in your website.

Now what we're going to look at is how do we format with a tags on

the button tags using bootstrap classes so that you can style them

to fake the general theme of bootstrap.

HTML already includes the form elements and the input elements in there.

Now, we can look at how bootstrap enhances these elements by providing

styling features for forms, and various elements that go into the forms.

Buttons obviously provide a simple way of interacting with your website.

So when you have a button on your website, you might hover on the button,

you might click on the button and expect something to happen in the process.

The button behavior depends upon where it is positioned in bootstrap.

If the button is inside a form, for example,

typically the button clicking will result in the form being submitted to a server,

or the form information being canceled.

A button outside a form could have other ways of providing interaction.

Similarly, the < a > tag that we have traditionally associated with

hyperlinks could also be hijacked to be styled and

presented in the form of a button.

So here we will see how bootstrap provides classes that can be

used to format the <a> tag into a button to be presented on your website.

We'll also look at various form elements, like the input elements,

select, the button and also the text AD elements, and

how we make use of them within our forms to design and

construct a form that can be included in our website.

So the exercise that follows this particular lecture will introduce you to

bootstrap support for styling buttons, and

also look at how various form elements can be enhanced using

bootstrap classes to present classic Bootstrap forms.

Ознакомьтесь с нашим каталогом

Присоединяйтесь бесплатно и получайте персонализированные рекомендации, обновления и предложения.

Coursera делает лучшее в мире образование доступным каждому, предлагая онлайн-курсы от ведущих университетов и организаций.

© Coursera Inc., 2018 Все права защищены.

Загрузить из App Store

Загрузить в Google Play