Exercise (Video): Bootstrap and JQuery

Loading...

En provenance du cours de The Hong Kong University of Science and Technology

Front-End Web UI Frameworks and Tools: Bootstrap 4

1511 notes

The Hong Kong University of Science and Technology

Front-End Web UI Frameworks and Tools: Bootstrap 4

1511 notes

Cours 1 sur 4 dans 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.

À partir de la leçon

Web Tools

This module rounds out our discussions on Bootstrap JavaScript components. Then we discuss CSS preprocessors, Less and Sass. Finally, we discuss building and deployment of our Web projects through task automation using NPM scripts, and task runners like Grunt and Gulp. The final assignment of this course needs to be completed at the end of this module.

Bootstrap and JQuery16:43

Exercise (Video): Bootstrap and JQuery10:14

Exercise (Video): More Bootstrap and JQuery11:01

Rencontrer les enseignants

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

[MUSIC]

Many of the Bootstrap's JavaScript-based components provide us with a mechanism

to control some of the features of these components by writing JavaScript code,

in particular, by writing code Using the jQuery syntax.

So we're going to explore this index exercise by using some

JavaScript-based controls for our Carousel that we

included in the index.html page in the previous exercise.

In the previous exercise, we introduced this Carousel into our index.html page.

What I would like to do in this exercise is to introduce a couple of

control buttons into this Carousel, and

then use JavaScript to be able to activate these buttons.

The buttons would be used to pause and

play the sliding action of this Carousel.

So, including the button in our Carousel here,

we can click a button to stop the sliding action of the Carousel, and

then we can click another button to resume the sliding action of the Carousel.

So, that is what we can explore in this exercise.

To get started on this exercise, we will go to the index.html page.

And right after the left and right controls of our Carousel,

I will introduce a div with the class button group.

So this will enclose a button group of two buttons here, and then with an ID of,

carouselButton and

close off the div there.

Now, inside this, I'm going to add in two buttons.

So let me add in one button with the class btn, btn-danger,

btn-small, and

an id of carousel-pause.

So this is going to act as the pause button, slows off the button there.

And for this button, I'm going to introduce

a font as an icon with the class fa fa,

pause, and close off the span.

So this will introduce a pause button into the group of Carousel buttons.

I'm going to copy this and paste it again to create another button.

That second button, I'll call btn btn-danger btn-sm, and

then this would be carousel-play.

And the span class,

the button would be if it play here.

Let's say the changes and go and take a quick look at it in the webpage.

Taking a look at the buttons as they exist in our browser, you can see that

these two buttons are now positioned to the left corner of my Carousel.

I would like to reposition these buttons to the right edge, so

that it doesn't cause this blue, empty space underneath the image here.

So let me use a couple of CSS properties to reposition these buttons to

the right column of the Carousel.

Going to that style start CSS file,

let me introduce some CSS code here.

So for the element with the ID carouselButtons,

I'm positioning it to the right edge and bottom, 0 pixel here.

So these two and then the position is absolute.

So this will position these buttons to the right corner of my Carousel.

Obviously, just introducing the buttons into the Carousel will not serve

any purpose.

Now, we're going to take advantage of the JavaScript controls that

the Carousel provides by writing a little bit of jQuery code at

the bottom of index.html page to make these buttons do their work.

We want to be able to pause and resume the sliding action of my Carousel.

Going to the bottom of the index.html page, let me introduce some script here.

So this script should contain some

JavaScript code written in jQuery syntax.

So I'm going to say,

$(document).ready(function), And

this function should contain a couple of

functions here to activate the buttons.

So I would say, mycarousel.

This is the ID of the carousel that we are introduced,

so we would say, carousel,

Interval: 2000.

So what this does is it sets the sliding interval of the Carousel

to 2000 milliseconds or 2 seconds.

So I'm making it a bit faster for

the sliding action to take place in the Carousel.

Continue with the jQuery code here.

I'm going to now activate that pause button, so I will say carousel-pause.

So that's the id I gave to the pause button there.

So that's the reason for giving the id.

So I want to activate the pause button.

So I say when the user clicks.

So you can see how to read the syntax.

So this says, for the carousel-pause button,

if a click action is done by the user, then execute

this particular function that I specify inside this code here.

What is the function that I want to do?

I want to be able to,

Pause the Carousel.

So we would say, carousel('pause').

So now you see how you have used the jQuery-based controls.

The JavaScript controls that are given for the Bootstrap Carousel component and

written some code to be able to control the Carousel.

Similarly, I want to be able to activate the play button.

So when the play button is clicked,

I want the sliding action of the Carousel to resume.

So I'm going to simply copy this code, paste it there.

And then I would say carousel-play,

click function my carousel and then the function says carousel('cycle').

That's the way you specify that the Carousel

should resume sliding like before.

So this one, this function we are attaching to the play button here.

So with this two,

our function's introduced inside this document ready function.

You're all set for the Carousel to be activated,

and the two buttons to be able to control the behavior of our the Carousel.

So let's show the changes, and go and have a look at the behavior of our Carousel.

Going to our page, you now see that your Carousel is moving very fast,

because I set the interval to 2,000 milliseconds or 2 seconds.

So every two seconds, you will see the sliding action of the Carousel.

This is definitely annoying.

So let me pause that by clicking on the pause button.

So when you click on the pause button, your Carousel's sliding action is paused.

Because when you click on the pause button, then the function that we

introduced in the JavaScript code comes into action and

then pauses the movement of the Carousel.

Now, if you want to resume, the click on the play button and

then the Carousel should resume its motion.

So as you can see, the moment you click on a play button, the carousel starts moving.

Now, of course, you can improve more upon how you create these buttons and so on,

but this is a simple way that we can introduce to control our Carousel.

This exercise illustrates to you how we can use JavaScript code

to be able to control our Bootstrap JavaScript-based components.

This is a good time to do a comment of

your code with the message Bootstrap jQuery.

[MUSIC]

Explorer notre catalogue

Rejoignez-nous gratuitement et obtenez des recommendations, des mises à jour et des offres personnalisées.

Coursera propose un accès universel à la meilleure formation au monde, en partenariat avec des universités et des organisations du plus haut niveau, pour proposer des cours en ligne.

© 2019 Coursera Inc. Tous droits réservés.

Télécharger dans l'App Store

Disponible sur Google Play