Explore
For Enterprise
Join for Free
Log In

Гуманитарные науки и искусства
Бизнес
Компьютерные науки
Наука о данных
Информационные технологии
здоровье
Математика и логика
Личное развитие
Естественные и технические науки
Социальные науки
Изучение языков
Степени и сертификаты

Полный обзор Coursera

Обзор
Поиск
Для организаций
Войти
Присоединиться бесплатно

User Input

Loading...

Front-End Web UI Frameworks and Tools: Bootstrap 4

Гонконгский университет науки и технологий

4.8 (оценок: 1,675) | Зарегистрировано учащихся: 40K

Курс 1 из 4 — 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.

Получаемые навыки

Bootstrap (Front-End Framework), Node.Js, Jquery, SASS (Stylesheet Language)

Рецензии

4.8 (оценок: 1,675)

5 stars
1,395 ratings
4 stars
237 ratings
3 stars
30 ratings
2 stars
6 ratings
1 star
7 ratings

AA

Jul 12, 2018

One of the best courses I have ever taken. Everything is explained in the best way possible. The Instructor is also good. Must give this course a try. It enhanced my knowledge of the subject matter.

BB

Nov 07, 2018

The instructor knows his subject well. He uses real world examples that allow you to achieve something tangible. On a personal note I loved listening to his instruction. He is an enjoyable teacher.

Из урока

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

Преподаватели

Jogesh K. Muppala
Associate Professor

[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., 2019 Все права защищены.

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

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

Coursera
О проекте
Руководство
Карьера
Каталог
Сертификаты
Сертификаты MasterTrack™
Степени
Для организаций
Для правительственных организаций

Сообщество
Learners
Partners
Developers
Beta Testers
Translators

На связи
Блог
Facebook
LinkedIn
Twitter
Instagram
YouTube
Технический блог

Еще
Условия
Конфиденциальность
Помощь
Доступность
Пресса
Контакты
Справочник
Филиалы