Explore
For Enterprise
Join for Free
Log In

예술 & 인문학
비즈니스
컴퓨터 공학
데이터 과학
정보 기술
건강
수학 및 논리
자기개발
물리 과학 및 공학
사회 과학
언어 학습
학위
수료증

Explore all of Coursera

검색
포 엔터프라이즈 (For Enterprise)
로그인
무료 회원 가입

Tooltips, Popovers and Modals

Loading...

Front-End Web UI Frameworks and Tools: Bootstrap 4

홍콩과학기술대학

4.8(1,845개의 평가) | 42K명의 학생이 등록함

Full-Stack Web Development with React 전문 분야에서 4의 강좌 1

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,845개의 평가)

5 stars
1,529 ratings
4 stars
265 ratings
3 stars
36 ratings
2 stars
8 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 Javascript Components

This module concentrates on Bootstrap's JavaScript based components. You will learn about tabs, pills and tabbed navigation, collapse, accordion, scrollspy, affix, tooltips, popovers, modals and the carousel. At the end of this module you need to complete the third assignment.

Tooltips, Popovers and Modals5:10

Exercise (Video): Tooltips and Modals15:16

강사:

Jogesh K. Muppala
Associate Professor

스크립트

[MUSIC]

Let us now try to understand several mechanisms to enable us to

display information to the users overlaying the content of your web page.

So here we'll look at three different constructs that are available in Bootstrap

called tooltips, popovers, and modals.

So what are tooltips, popovers and modals and how are they useful?

We'll look at some basic ideas first ,and then we'll go on to look at some examples.

In the exercise that follows, we'll use tooltips and

modals in our web page, and we'll look at an example of popovers.

So, as I mentioned, tooltips, popovers, and modals are a way of revealing content

to the users, when the user interacts with certain elements on your web page.

Say for example when the user's mouse

clicks on a button, or hovers over a button, or clicks on a link,

or reaches a certain point on your web page.

So all these will trigger information to be displayed to the users.

So in this case,

the information is displayed as an overlay on top of your web page.

So the underlying content of the web page is still there, but

this is laid out on top of the underlying content.

So in terms of flexibility, tooltips are the simplest to implement, but

at the same time have limited flexibility in how they can display information.

Popovers are more flexible than tooltips, but they also have their own limitations.

Modals give you the most extensive support for

displaying content in a wide variety of ways.

As an example, let's go to our webpage that we have been working on.

You see that when we hover our mouse pointer onto this button.

You see this message popping up on the screen here,

with some additional information.

This is an example of a tooltip.

This allows you to display smaller amounts of information to the users.

So for example if you are trying to guide users through your website and

want them to know what happens when you click various locations any web page,

these maybe a good way of reminding them of what is expected.

So you could easily design for example,

walkthroughs of your website using these tooltips to indicate to users.

If you want a bit more detailed information,

then popovers would be more useful.

The same example, implement and using a popover would look like this.

Now in this case,

you will have to explicitly click on the button to show the popover.

So in that case, the popover is shown with some title information, and

then the actual content at the bottom in that popover.

Now, dismissing the popover will require you again to click on the bottom there.

So this is the behavior of a popover.

In some circumstances, popovers are more useful than tooltips.

Our third kind of data overlay is the modal.

A modal allows you to present more

detailed information to the users than a tooltip and popover.

The content of the modal is itself divided into a header, body, and the footer.

And the modal itself can contain a lot more detailed information.

And you can use the entire Bootstrap grid,

inside the modal body, to organize the actual content.

We look at a couple of examples of the use of modals next.

Going to our web page, you will see that on the right hand side,

here we have a link here called Login.

So when you click on that link, you will notice that this modal

with their login form is popped up on the screen.

So this is the typical behavior of a modal.

And so here you can type in the information, and

then click on the Sign In button to sign in to your website.

Going to your Coursera page, here is a real life example of the use of a modal.

So for example, if you click on the Log In button here,

you can see that on Coursera, a form pops up on the screen.

So this is another use of a modal in your web page.

Now that you have seen examples of tooltips, popovers, and modals,

let's go to the next exercise, where we'll create a tooltip on our index.html page.

We'll also create a modal that allows the user to type in information for

logging in into our web page.

[MUSIC]

Coursera 카탈로그 살펴보기

무료로 참여해 맞춤화된 추천, 업데이트 및 제안을 받아보세요.

Coursera는 세계 최고의 교육에 대한 보편적인 접근 기회를 제공하며, 최고의 대학 및 기관들과 제휴하여 온라인 강좌를 제공합니다.

© 2019 Coursera Inc. All rights reserved.

앱스토어에서 다운로드하기

구글 플레이에서 받기

Coursera
소개
리더십
직업
카탈로그
수료증
MasterTrack™ 수료증
학위
포 엔터프라이즈 (For Enterprise)
정부용

커뮤니티
Learners
Partners
Developers
Beta Testers
Translators

연결
블로그
Facebook
Linkedin
Twitter
Instagram
YouTube
기술 블로그

이상
조건
개인정보 보호
도움말
접근성
보도 자료
문의하기
디렉토리
계열사