IntroductionWelcome| 00:04 |
Hi, I'm Jen Kramer.
Welcome to Bootstrap, Adding
| | 00:07 |
Interactivity to Your Site.
This course builds on the Up And Running
| | 00:11 |
With Bootstrap course located in the
online training library.
| | 00:16 |
First, we'll make an interesting
thumbnail grid, linking our thumbnails to
| | 00:19 |
a modal window.
Next, we'll build an image carousel with
| | 00:23 |
all the bells and whistles, including
links, captions, a position indicator,
| | 00:28 |
and navigation.
Finally, we'll take an in depth look at
| | 00:34 |
forms in bootstrap.
I'll show you how to style a form with
| | 00:38 |
bootstrap's classes.
And we'll also enhance our form with
| | 00:41 |
JavaScript Base tool tips and the
collapse feature.
| | 00:45 |
So if you're ready, let's get started
with Bootstrap, Adding Interactivity to
| | 00:49 |
Your Site.
| | 00:50 |
| | 59:59 |
(MUSIC).
| | Collapse this transcript |
| Using the exercise files| 00:00 |
Exercise files for this course have been
made available to all lynda.com subscribers.
| | 00:05 |
Simply download the exercise files to
your computer and place them on the
| | 00:09 |
desktop for ease of access.
These exercise files are organized by
| | 00:14 |
chapter number.
Whenever an exercise file is available
| | 00:18 |
for a video, you'll see a yellow overlay
at the bottom of the screen that
| | 00:21 |
indicates the location and the name of
the exercise file.
| | 00:26 |
I recommend you watch each chapter of
this course from start to finish.
| | 00:30 |
In most cases, you won't have a working
product until you've completed all of the steps.
| | 00:35 |
In the folder associated with the first
video of each chapter, you will find any
| | 00:39 |
images required to complete the chapter.
You'll also find the first HTML file of
| | 00:44 |
the chapter.
You can use this HTML file throughout the
| | 00:48 |
chapter, but if you get lost, I've given
you the starting-state HTML for each
| | 00:51 |
video as well.
Copy these HTML files from the exercise
| | 00:55 |
files folder to your working directory.
For me this is the Bootstrap folder here
| | 01:01 |
on my desktop.
You'll be creating this Bootstrap folder
| | 01:04 |
in the first few videos as you download
Bootstrap and start working with it.
| | 01:09 |
When I've given you some images to use,
you should drag these images to the IMG
| | 01:12 |
folder inside of your Bootstrap folder on
the desktop.
| | 01:17 |
Working with the exercise files can add
great value to the training.
| | 01:21 |
However, if you don't have access to the
exercise files, you can still follow
| | 01:24 |
along with the videos, often using your
own files and have a fulfilling learning experience.
| | 01:30 |
| | Collapse this transcript |
| Setting up the working environment| 00:00 |
Before we get started building these
cool, interactive widgets and things
| | 00:03 |
inside of Bootstrap.
The first thing we need to do is make
| | 00:07 |
sure we've got Bootstrap downloaded,
we've got jQuery downloaded, we've got
| | 00:10 |
our files and folders configured and
ready to go on our desktop.
| | 00:15 |
Right now, on my desktop, what I've got
is my Exercise Files folder, which I've
| | 00:19 |
copied down and placed there.
The next thing I'm going to do is come to
| | 00:23 |
Bootstrap, and I'm just simply going to
download Bootstrap, and I'm just going to
| | 00:27 |
go ahead and open that in its zipped
format when I download it.
| | 00:31 |
Of course inside of that is my styles, my
images, and my JavaScript except for jQuery.
| | 00:38 |
So all I'm going to do is drag that
folder here on to my desktop.
| | 00:42 |
Now when I go inside of that I can see
the CSS, my images folder and my JavaScript.
| | 00:48 |
Okay, so then of course I need to
download and include my copy of jQuery,
| | 00:53 |
so if you go to the jQuery website at
jquery.com.
| | 00:58 |
I'm going to click on the download the
jQuery button here and then I'm going to
| | 01:01 |
go to the compressed production version
of jQuery.
| | 01:05 |
for the purposes of this video this is
version 1.9.1.
| | 01:08 |
You can download any version of jQuery
that is compatible with this version of Bootstrap.
| | 01:13 |
The version of Bootstrap I'm working with
is 2.3.1.
| | 01:17 |
so I'm just going to right click on this
and say Save Link As.
| | 01:21 |
And I'm going to save that down to my
desktop, and I'm going save that down
| | 01:25 |
inside of my Bootstrap > JavaScript
folder here.
| | 01:30 |
There we go.
Now what you should have, inside of your
| | 01:33 |
Bootstrap folder, inside of your
JavaScript folder, are the two forms of
| | 01:38 |
the Bootstrap JavaScript.
The human readable format and the
| | 01:43 |
minified format as well as the jQuery
format of JavaScript and of course all of
| | 01:47 |
your supporting CSS and images.
The last thing that we need to do is make
| | 01:53 |
sure that we have Sublime Text setup for
working with Bootstrap.
| | 01:58 |
Sublime Text is the text editor that I'll
be using for this course for building by
| | 02:01 |
Bootstrap webpages.
You can use any text editor you want.
| | 02:05 |
You can use Dream Weaver, you can use
anything that you like.
| | 02:08 |
But I am using Sublime Text for this
particular course and if you just open up
| | 02:13 |
Sublime Text then the easiest way to work
with this is to include some folders here
| | 02:17 |
as part of your project.
So over here under Project if you just
| | 02:22 |
say Add Folder to project and the folder
I am going to add is on my desktop.
| | 02:28 |
And it is this Bootstrap folder, so I'm
going to go and say OK.
| | 02:32 |
So that'll show me all of the files and
folders that I have with Bootstrap over
| | 02:35 |
here on the left side of my screen.
So, now as I work with my files from the
| | 02:40 |
exercise files, what you should do is
copy the HTML from the Exercise Files folder.
| | 02:48 |
You can deposit that directly into the
Bootstrap folder and the way I will have
| | 02:52 |
configured the links, it should
correspond very nicely to your style
| | 02:56 |
sheets and your Javascript,and I'm
going to be providing a link in the HTML
| | 03:00 |
to jquery-1.9.1.min.js.
So if your jQuery is called something different.
| | 03:08 |
You'll need to make sure that you change
the name of the file inside of those
| | 03:12 |
exercise files in order to be able to
work with the example effectively.
| | 03:19 |
Alright, so now that we've got all of
that in place.
| | 03:22 |
Let's go ahead and tackle our first
project.
| | 03:24 |
| | Collapse this transcript |
|
|
1. Creating a Thumbnail Gallery with Modal Pop-upsPlanning the thumbnail gallery| 00:00 |
The first project we're going to work on
is a thumbnail gallery that is hooked up
| | 00:04 |
to modal windows.
So this is the final state of what we're
| | 00:08 |
going to be building today.
This is a series of thumbnails here on
| | 00:12 |
the left side of the screen.
A little bit of text on the right side of
| | 00:15 |
the screen.
This might be part of your web page that
| | 00:18 |
you've got contained somewhere under a
header, a navigation, and so on and so forth.
| | 00:23 |
And the idea here is that you have these
nice little thumbnails, when you roll
| | 00:26 |
over it you get this nice glow state
around the thumbnail.
| | 00:30 |
When you click on the thumbnail, this
actually opens up a modal window with
| | 00:33 |
more information about this particular
artist and a larger version of the piece
| | 00:37 |
of art.
It also contains a little close x up here
| | 00:40 |
in the corner.
A little close button down on the bottom.
| | 00:43 |
Both of these will get the window out of
the way.
| | 00:46 |
So to get started on this chapter.
Inside of your Exercise Files folder in
| | 00:51 |
Chapter One.
There's a bunch of stuff that's
| | 00:54 |
associated with this particular project.
So, first of all, there's a folder here
| | 00:58 |
of thumbnails.
You'll want to drag the whole folder into
| | 01:02 |
your IMG folder inside of your Bootstrap
site.
| | 01:05 |
You'll also see that we have a series of
larger images.
| | 01:09 |
You're going to drag those also into the
IMG folder, inside of your Bootstrap site.
| | 01:14 |
And there's an HTML file.
And you're going to put that inside of
| | 01:17 |
your Bootstrap folder.
So when you're done, you should wind up
| | 01:21 |
with a Bootstrap folder that contains
your HTML file.
| | 01:26 |
And your Images folder is going to
contain your thumbnails as well as all of
| | 01:29 |
those big images inside of it.
So that's going to be your starting state.
| | 01:34 |
And then when you open up your HTML here
inside of Sublime Text 2, you'll see that
| | 01:40 |
I've given you some of the starting HTML.
So, basically right now we have.
| | 01:47 |
just a bulleted list and we have our text
over here on the side.
| | 01:52 |
We've made use of the Bootstrap grid
system here to put this site together.
| | 01:57 |
And if you're not familiar with the
Bootstrap grid system or anything else
| | 02:00 |
that I happen to be talking about here,
you can take a look at Up and Running
| | 02:03 |
with Bootstrap, which is available in the
lynda.com library and that will bring you
| | 02:06 |
up to speed with the basics of Bootstrap.
So just to show you what this page looks
| | 02:12 |
like to start with, I'll go ahead and
open this up in a browser.
| | 02:15 |
so, this is what we're going to start
with.
| | 02:18 |
It's the list of images.
There they are with our chunk of text
| | 02:21 |
over here on the side.
If you are working with your own images
| | 02:25 |
and you needed to prepare some for this
example.
| | 02:28 |
What you need to do is start with your
large version of the image.
| | 02:31 |
It could be a really super large image,
potentially something that's suitable for
| | 02:35 |
print quality.
You're going to need to resize those for
| | 02:38 |
the web, and you would generally create
two images.
| | 02:41 |
One would be the thumbnail, which would
either be a cropped version of the larger image.
| | 02:46 |
Or it could just be a resized version of
the larger image.
| | 02:50 |
Depending on level of detail and so
forth.
| | 02:53 |
And you're going to need the second image
that will go inside of the modal window.
| | 02:57 |
If you need help in creating these
images, there's two courses that I
| | 03:00 |
recommend that you can take a look at.
One is Photoshop for Web Design, with
| | 03:05 |
Justin Seeley.
And he's got a video down here in Chapter
| | 03:09 |
Nine, Optimizing Web Graphics, which
talks about how you can optimize your
| | 03:13 |
graphics for the web.
You won't need the part about slicing,
| | 03:18 |
but certainly the Understanding Web File
Formats and Saving For the Web are the
| | 03:21 |
videos in that chapter that'll be really
important to you.
| | 03:25 |
If you're not a Photoshop person or you
don't have a huge amount of money to
| | 03:28 |
spend, there's a great open source
alternative, that is GIMP.
| | 03:32 |
And Justin Seeley has also done a course
on GIMP essential training, and this can
| | 03:36 |
also be used.
It's a free program that you can
| | 03:39 |
download, it's available for MAC and PC.
You can download it, and use it to crop
| | 03:43 |
your images, and optimize them for the
web as well.
| | 03:46 |
And if you want to take a look at Chapter
11.
| | 03:50 |
There is the option to print and save
images.
| | 03:53 |
And there's an option for exporting for
print and web.
| | 03:56 |
So you're going to want to, of course,
take a look at the website of exporting
| | 03:59 |
those images.
Alright, so now that we know what it is
| | 04:01 |
that we're going to build you have all
your images set.
| | 04:05 |
In the next video I'll show you how to
set up your thumbnail gallery.
| | 04:08 |
| | Collapse this transcript |
| Creating the thumbnail gallery| 00:00 |
So, the first thing I wanted to do in
setting up this thumbnail gallery with
| | 00:03 |
the modal windows is to actually set up
the thumbnail gallery side of this.
| | 00:08 |
And I'm looking at
1-thumbnails-start.html.
| | 00:12 |
You can find this file in exercise files
folder.
| | 00:15 |
And also that's where you can find all of
the images for this particular project.
| | 00:21 |
So, I've just given you some basic
starting markup here for this.
| | 00:25 |
And this is just a series of images
inside of a bulleted list, and guess what?
| | 00:31 |
If we take a look at this inside of our
browser, I'm just right-clicking here
| | 00:35 |
inside of sublime text and I'm choosing
Open in browser here.
| | 00:40 |
This will open in your default browser
which for me is Firefox.
| | 00:43 |
But you could certainly use any browser
you like.
| | 00:45 |
And what you'll see here, is, sure
enough, a series of little images that
| | 00:49 |
look like they're in a bulleted list.
So, while our markup is good for a
| | 00:53 |
thumbnail gallery right now.
We definitely do not have the CSS
| | 00:56 |
required in place and integrated to make
this actually look like a thumbnail gallery.
| | 01:01 |
That's what we're going to add in this
video.
| | 01:04 |
So the first thing that I'd like to do
is, up here in the ul tag that's on line
| | 01:09 |
16, I'm going to go ahead and add a class
of thumbnails.
| | 01:15 |
The next thing that I'm going to need to
add is, around the thumbnails, in order
| | 01:18 |
for this to work in Bootstrap.
Its assumed that you're thumbnail
| | 01:22 |
gallery's going to be clickable, so you
need to have a link around each one of
| | 01:25 |
these images.
So we're going to set that up by putting
| | 01:29 |
in an a href= just the pound sign for now
its just a placeholder.
| | 01:36 |
And we'll add a class of thumbnail.
And then after the image tag here, we'll
| | 01:43 |
put in a /a.
(SOUND).
| | 01:45 |
Which is, of course, the closing tag for
your link.
| | 01:48 |
So, I've just got one of these set up so
far.
| | 01:52 |
I'm going to go ahead and just copy my a
tag here, Ctrl+C and Paste that in just
| | 01:58 |
for couple more of these.
I'm going to copy this slash a tag here,
| | 02:04 |
Ctrl or Cmd+C to Copy, Ctrl and Cmd+V to
Paste, there we go.
| | 02:10 |
And I'm just going to go ahead and save
this and now when I take a look at this
| | 02:14 |
inside my browser.
You'll see that the first few thumbnails
| | 02:19 |
that I've given the full treatment are
now showing as thumbnail images.
| | 02:25 |
You can see the, the border around them.
You see the glow sort of behind it.
| | 02:29 |
And then, these images down here have not
had the a tag wrapped around them just yet.
| | 02:35 |
So they don't have the border or the glow
on them.
| | 02:37 |
Like these do, but they do have the grid
like layout, and that's because of the UL
| | 02:41 |
tag has been added that classes of
thumbnails.
| | 02:45 |
And just to show you what this looks like
as the page gets smaller, the grid is
| | 02:49 |
adapting here and so forth.
It actually looks a little bit better
| | 02:54 |
when we compress this a bit, on the page.
And, as I continue to push this along,
| | 02:58 |
what will happen is, these are going to
go into a single column.
| | 03:02 |
Because this is what Bootstraps Grid
does, is as it collapses it puts
| | 03:06 |
everything on top of each other, in
individual containers.
| | 03:10 |
And just stacks them on the page, for
mobile devices or smaller screen devices.
| | 03:15 |
So, that's what you see going on here.
Okay, I'm going to offline now and I'm
| | 03:19 |
going to continue to tweak my HTML file.
I'm just going to go ahead an Copy and
| | 03:24 |
Paste more of these links around all of
my thumbnails and save that.
| | 03:28 |
And, then I'll be set up to go for the
next video.
| | 03:31 |
| | Collapse this transcript |
| Creating the modal windows| 00:00 |
So at this point, you should have all of
your thumbnails styled up.
| | 00:03 |
And you can continue to follow along with
the same HTML document you worked on in
| | 00:07 |
the last video, if you've styled all of
your thumbnails.
| | 00:11 |
Otherwise if you take a look in the
exercise files folder for this particular
| | 00:15 |
video, you'll find an HTML starting file
called 1-thumbnail-modalwin.html.
| | 00:21 |
And that will contain all of your
thumbnails all styled up for you in the text.
| | 00:25 |
And if we want to take a quick peek at
what's going on so far if we go ahead and
| | 00:28 |
just open this up in the browser.
You'll see that now all of my thumbnails
| | 00:32 |
are styled.
Of course they're not linking anywhere
| | 00:35 |
yet, so when I click on them nothing
happens but it looks good doesn't it?
| | 00:39 |
As you roll your mouse over it you get
this cool looking hover state and you can
| | 00:42 |
imagine it winding up looking great in
the end.
| | 00:45 |
Okay, so, what we need to do now is,
we're going to add the information that's
| | 00:49 |
going to come up in the modal windows,
when the thumbnail is clicked.
| | 00:55 |
And this is actually quite a bit of code
to add.
| | 00:57 |
In your Exercise Files folder, you're
going to find a file called html snippet.txt.
| | 01:02 |
You can open that up using Notepad, or
Text Edit, or you can open it up right
| | 01:06 |
here inside of Sublime Text.
And what you'll see here is a, whole
| | 01:11 |
bunch of HTML.
It's all marked up, this is the
| | 01:14 |
information that's going to appear for
each modal window.
| | 01:18 |
And there's a title in this, there's a
paragraph of information inside of that
| | 01:21 |
paragraph as a link to the image.
If you don't have the images they're back
| | 01:26 |
in the first folder for this particular
chapter.
| | 01:29 |
And you should copy them on over to your
images folder.
| | 01:33 |
So what I'm going to do is, I'm going to
go ahead and copy all of this, the HTML.
| | 01:37 |
And there's quite a bit of it.
because there's nine of these modal
| | 01:40 |
windows, Ctrl+C to copy.
And then, here, instead of the modal
| | 01:44 |
windows, after the end of the row, but
before the calls to the JavaScript at the
| | 01:48 |
bottom of the page.
I'm going to add the HTML right here and
| | 01:52 |
just go ahead and Ctrl+V.
So, as you can imagine, if we just save
| | 01:56 |
this and take a look at this in the
browser right now, what we'll see is,
| | 01:59 |
kind of a mess.
We have all of our HTML, here, it's all
| | 02:03 |
stacked on top of each other.
The images are doing this cool stair
| | 02:07 |
steppy thing, that's because they're
floated.
| | 02:10 |
And they're not cleared, so they are all
stacking on top of each other like this.
| | 02:14 |
Kind of a cool effect, kind of arty
actually.
| | 02:17 |
Maybe it's appropriate to this particular
kind of content, but it's not really the
| | 02:20 |
effect that we were after.
The next thing that we need to do now is
| | 02:24 |
wrap the HTML that will turn these into
modal windows around each of these chunks
| | 02:28 |
of text.
So I'm going to show you with the first
| | 02:32 |
chunk of text what you need to do.
And then I'll let you go ahead and
| | 02:35 |
complete the next eight.
Alright, so I'm up here on line 36.
| | 02:42 |
I'm looking at Barot Bellingham, and
we're going to go ahead and add some HTML
| | 02:46 |
around this to make this work as a modal
window.
| | 02:49 |
So, first thing I'm going to do is I'm
going to put in a comment, stating that
| | 02:53 |
these are modal windows.
(SOUND).
| | 02:56 |
Notice, of course, that I have not put
these modal windows inside of the grid system.
| | 03:01 |
There's no need to do that, because
remember they're going to open in their
| | 03:04 |
own window.
So you don't need to include this HTML in
| | 03:07 |
the actual grid system for Bootstrap.
You certainly could, but there's no
| | 03:11 |
reason to do it.
In fact, it's probably better that you
| | 03:14 |
don't, because you may wind up with some
funny spaces on your page.
| | 03:17 |
From the grid system if you actually
include your modal window code in that
| | 03:20 |
grid system.
So right here, before Barot Bellingham,
| | 03:24 |
I'm going to add a div, and I'm going to
give this a class.
| | 03:30 |
Of 3 kinds, modal to make it a modal
window and hide which makes it hide but
| | 03:35 |
to start.
So, we wont see this text on the page
| | 03:40 |
when we take a look at it.
And fade which is an effect that will be
| | 03:44 |
applied when you hit the Close window or
when you zoom in the window from the top,
| | 03:48 |
It'll fade in.
We're also going to give this a tabindex
| | 03:54 |
of -1.
And that's an accessibility thing so that
| | 03:58 |
people with screen readers don't wind up
tabbing onto this information by mistake.
| | 04:05 |
Then we're going to go ahead and give
this a div with a class of modal-header.
| | 04:10 |
So these next few divs are designed to
section this content into three areas, a
| | 04:15 |
header, a content area, and a footer.
Here we go.
| | 04:19 |
That's our modal header, and that modal
header's actually going to end down here
| | 04:25 |
after the h3.
And I should probably also close that div above.
| | 04:31 |
The div with a class of modal height and
fade.
| | 04:34 |
That will actually be closing as you
might expect down here after all of the
| | 04:38 |
content is finished on the page and we'll
just make that line up spacing wise.
| | 04:43 |
I like to try to make sure that all of my
HTML tags are lining up correctly so that
| | 04:47 |
I can tell If things are styled,
correctly, I've got all my divs that I
| | 04:50 |
open or close.
Because we sure use a lot of divs inside
| | 04:55 |
of Bootstrap.
Okay, so there's my modal header.
| | 05:00 |
After this I'm going to add div with a
class of modal-body.
| | 05:05 |
And as you might expect, that is going to
be my paragraph here with the image and a
| | 05:10 |
/div for that, make sure that that lines
up nicely.
| | 05:15 |
And then finally I'm actually going to
add a modal footer as well.
| | 05:19 |
And the modal footer is going to look
like this, div with a class of modual-footer.
| | 05:29 |
And we'll close that div.
And inside of this footer, I'm going to
| | 05:32 |
include some information, notably a
button.
| | 05:35 |
So this is going to be a button with a
class of btn.
| | 05:41 |
And we're also going to add this thing
data-dismiss equals modal and the word Close/button.
| | 05:54 |
Okay so what is this?
Anytime you see data hyphen anything,
| | 05:57 |
you're probably working with HTML5
because this is where its going to validate.
| | 06:02 |
Data hyphen anything is an attribute that
can be included inside of any HTML5 tag
| | 06:06 |
and its a way of making JavaScript bind
to certain elements in your HTML.
| | 06:13 |
so in this particular case we're letting
the JavaScript know that when this button
| | 06:17 |
is clicked we should have a behavior that
is going to close our modal window.
| | 06:22 |
Likewise, back up here at the top of the
page, inside of my modal header.
| | 06:28 |
I'm going to add the little x that that
occurs at the top of the modal window,
| | 06:32 |
and I can add that as well.
Just by putting in a button with a type
| | 06:39 |
of button, and a class of close, and then
once again, here's that data thing.
| | 06:47 |
Data-dismiss=modal the letter x because
of course that's what your going to click
| | 06:52 |
on to close this window and /button.
Alright, so that's a whole lot of HTML to
| | 06:59 |
mark up that modal window.
So if you go ahead and save your page and
| | 07:04 |
if you put this in a browser.
What will happen now is, Barot Bellingham
| | 07:08 |
who is the person we just worked with and
applied the HTML to.
| | 07:12 |
Appears to be gone from this webpage
entirely, and we have the other artists
| | 07:15 |
that are listed underneath here that
haven't had this HTML treatment to their
| | 07:19 |
text yet.
The reason why Barot Bellingham is gone,
| | 07:23 |
is because remember, we specifically told
that chunk of text that it's going to be
| | 07:27 |
associated with the modal window.
When the page opens initially, you
| | 07:32 |
shouldn't see the text.
That's an indicator that we're on the
| | 07:35 |
right track with that bit of HTML.
Of course, we're not really going to be
| | 07:38 |
able to test it and see that modal window
until we actually link our thumbnails up
| | 07:42 |
with the windows.
And that's what we're going to do in the
| | 07:45 |
next video.
So what I'll leave you to do now, is to
| | 07:49 |
continue marking up the rest of the
artist here.
| | 07:52 |
In the same way we just marked up that
first artist.
| | 07:56 |
And insert all the appropriate divs and
classes and data hyphen dismisses.
| | 08:01 |
In order to get all of these set up as
modal windows.
| | 08:04 |
And then, I'll see you in the next video
where we'll actually hook up those modal
| | 08:08 |
windows to the thumbnails.
| | 08:11 |
| | Collapse this transcript |
| Linking the thumbnails to the windows| 00:00 |
How'd you do marking up all those modal
windows.
| | 00:03 |
It's a lot of work and hopefully you got
that all done.
| | 00:06 |
If you did, you can continue following
along this video with the HTML file
| | 00:09 |
that's there in front of you.
If you didn't manage to do that or if
| | 00:13 |
you're just umping in, if you take a look
in your exercise files folder, you'll
| | 00:17 |
find this file,
1-thumbnails-linking.html.
| | 00:22 |
And that'll give you the HTML that will
allow you to jump in at this particular point.
| | 00:26 |
So, what we've got so far is our
thumbnails here.
| | 00:30 |
They're all marked up.
They look great.
| | 00:32 |
And now underneath, we have all these
modal windows.
| | 00:35 |
And if we just take a look at the webpage
as it is in progress so far, then what
| | 00:40 |
you'll see is a thumbnail gallery of
these images.
| | 00:45 |
If you roll your mouse over them, you get
a lovely hover effect.
| | 00:48 |
If you click them, they don't do
anything.
| | 00:50 |
And all of that modal window code that
you just slaved over is completely invisible.
| | 00:55 |
Well, that's actually a feature not a
bug.
| | 00:57 |
What we need to do now is we need to hook
up all of those modal windows to the
| | 01:00 |
thumbnails that you see on top.
So, that is what we're going to do next here.
| | 01:06 |
So, we'll start working with
Barot-Bellingham here.
| | 01:10 |
And if you take a look at line 37, this
is the line for the very first div that
| | 01:13 |
goes all the way around the content here
for Barot-Bellingham.
| | 01:18 |
So, it's the DIV that encloses the modal
header, the modal body, and the modal footer.
| | 01:23 |
To that particular DIV, we are going to
add an ID.
| | 01:26 |
What that ID is doesn't matter.
Although, of course, it needs to be
| | 01:33 |
unique to this page just like ID's in
CSS.
| | 01:36 |
You can only use them once per page so
you should pick an unique ID to this
| | 01:40 |
particular page and assign that here
inside of the modal window.
| | 01:45 |
So, I'm going to call this bell.
Then, what we're going to do is we're
| | 01:49 |
going to go up to the link up here, at
the top and this is on line 17, and
| | 01:53 |
you'll see the href here.
Right now, this is just a pound sign, it
| | 01:59 |
really doesn't do anything.
What we're going to add next to that
| | 02:02 |
pound sign is bell.
And so, that we are linking the ID of
| | 02:07 |
Bell, the modal window below, using the
ref up here, pound sign bell.
| | 02:14 |
There's one more thing we need to add to
this a tag, and it's another one of those
| | 02:17 |
data hyphens.
Data-toggle equals quote modal.
| | 02:24 |
And that is the little bit of JavaScript
for binding to the link here, so that
| | 02:28 |
when you click it the modal window
JavaScript will be triggered.
| | 02:32 |
Okay, if you just take a look at what
we've got so far, go ahead and save that.
| | 02:38 |
And I'm going to go ahead and open them
in the browser Barot-Bellingham is the
| | 02:42 |
very first top left thumbnail here.
When you click it, you're going to get
| | 02:46 |
this lovely little window that's going to
show up if you got it all formatted correctly.
| | 02:52 |
This is the header of the page that's the
h3 that's there here is the button that
| | 02:56 |
we added with the x that will close this
window.
| | 03:01 |
Here's the paragraph of information along
with the floated image that's inside of
| | 03:04 |
modal body.
And then down here at the bottom is that
| | 03:06 |
modal footer, with the button that we
included that's going to close that window.
| | 03:12 |
So, now what we need to do is go through
the rest of these thumbnails and do
| | 03:15 |
exactly the same thing.
So, you're going to add an ID to each one
| | 03:19 |
of the main DIVs that wrap around each
one of the modal windows.
| | 03:23 |
And then to the corresponding link, you
have to add that data-toggle equals
| | 03:27 |
modal, and change the href to point to
the ID you create for each modal window.
| | 03:33 |
So, I'm going to go ahead and do that
offline now, and I'll see you in the next video.
| | 03:37 |
| | Collapse this transcript |
| Customizations and testing| 00:00 |
Alright, so if you work through all of
those examples from the previous video,
| | 00:04 |
you should now have a fully functional
webpage.
| | 00:07 |
And if you've been following along,
you're already there.
| | 00:10 |
If you're jumping in right now, there's
an HTML file inside of your exercise
| | 00:13 |
files for 1-thumbnails-customize.html.
If you just go ahead and put that into
| | 00:19 |
your browser.
You'll see here that we've got a series
| | 00:22 |
of pictures.
We've got the person's name at the top.
| | 00:26 |
You have the little bio here.
You have a larger version of the artwork.
| | 00:29 |
A nice close button down on the bottom of
the page.
| | 00:32 |
A little x up here in the upper right
hand corner that works for you to close
| | 00:35 |
the windows.
So this is pretty much boot straps
| | 00:38 |
default configuration for this type of
page out of the box.
| | 00:43 |
What can you do to customize this?
Well there's actually several things you
| | 00:46 |
can do to customize this.
For example, one of things that you could
| | 00:50 |
do is inside these modal windows.
You have the button at the bottom, to
| | 00:55 |
close the window and by default, we've
just used the class of button, btn.
| | 01:00 |
Which gives you that small grey button
that says close on it.
| | 01:05 |
Well, remember there's lots of classes
inside of bootstrap that you can use, to
| | 01:07 |
make the button look a little bit
different.
| | 01:10 |
For example, I could say btn-success.
That will give me a nice green button.
| | 01:18 |
I could also change the size of the
button, btn-large will give me a large button.
| | 01:24 |
So if I just go ahead and save that this
is Barot Bellingham's modal window where
| | 01:28 |
I've added the additional classes here on
the button.
| | 01:33 |
And if I just go ahead and refresh my
page here, and click on that.
| | 01:37 |
There we go and we have a large green
close button at the bottom.
| | 01:41 |
You can check Bootstraps documentation
for all of the various color variations
| | 01:45 |
and so forth, for some customizations
that you can make there.
| | 01:49 |
The other thing that you should note is
that you don't have to have a model
| | 01:52 |
header, model body and model footer.
What they're responsible is when you take
| | 01:57 |
a look at your web page, the modal header
will give you this space up here at the
| | 02:01 |
top with a line underneath.
And the modal footer will give you this
| | 02:07 |
slightly green back color footer here
with a line.
| | 02:11 |
So you could actually take out the modal
header and the modal footer, and your
| | 02:13 |
modal windows are going to continue to
work okay.
| | 02:16 |
So just to show you what that might look
like, I am down here for Riley Rewington.
| | 02:22 |
I'm going to remove the mark up here for
the modal header.
| | 02:25 |
And the markup for the modal body.
And the markup for the modal footer.
| | 02:31 |
So I'm just going to put all the same
information here.
| | 02:36 |
So now what I've got here is just a
starting div with the class of modal high
| | 02:40 |
fade and the /div down here.
But I've removed all the internal divs.
| | 02:45 |
So there's no more modal header, and
modal body, and modal footer.
| | 02:49 |
So just to see what that will do and
impact your design, I'll go ahead and
| | 02:53 |
save that page.
We'll go ahead and put that in the browser.
| | 02:57 |
And when I click on his piece of artwork,
which is this one here, the green and the
| | 03:00 |
purple and so forth, you'll see the
difference.
| | 03:03 |
So we don't, we're missing the spacing.
We still have the rounded corners on the window.
| | 03:08 |
But we're missing a lot of the spacing
and our text is pushed up against the edges.
| | 03:12 |
Now of course you could use your own
custom styling to overcome these little issues.
| | 03:17 |
If you didn't want to use all of the
extra modal header, modal body, modal
| | 03:20 |
footer markup.
You could just style your modal window to
| | 03:23 |
move some of this information off the
edges of the modalr window.
| | 03:27 |
And your page is going to continue to
work just fine.
| | 03:30 |
So, functionally speaking, your modal
window can work independent of that extra markup.
| | 03:35 |
So, that's just a few customization that
you can make to, your modal windows and
| | 03:39 |
your thumbnails gallery.
And I'm sure you can find, plenty more of
| | 03:42 |
these things.
If you take a look through bootstraps documentation.
| | 03:46 |
You'll find other ways that you can
change the styling of this web page, to
| | 03:50 |
give it a little bit more pizazz, or to
streamline the markup a little bit.
| | 03:54 |
And to get exactly the results that
you're looking for, for your website.
| | 03:58 |
| | Collapse this transcript |
|
|
2. Creating an Image Carousel for the HomepagePlanning the image carousel and prepping images| 00:00 |
The next thing I'd like to do is to take
a closer look at the carousel that comes
| | 00:04 |
with Bootstrap.
And we're going to be building an image
| | 00:08 |
carousel from the JavaScript plugin that
Bootstrap provides us with.
| | 00:13 |
This is an example of that carousel and
probably the first thing some of you
| | 00:16 |
graphic designers in particular are going
to notice is that the images aren't
| | 00:19 |
stretching all the way across the page.
Well, right now, I've got the HTML set up
| | 00:25 |
with this carousel sitting in a row going
the full width across the page.
| | 00:30 |
As I make the page smaller, that arrow
will in fact come on top of the carousel
| | 00:34 |
and the carousel will start to shrink
until you get to a very, very small
| | 00:37 |
dimension here.
If this was a real world example it's
| | 00:42 |
likely that you would be putting the
carousel into a smaller bit of a grid
| | 00:45 |
rather than putting it going all the way
across the page.
| | 00:49 |
Or you would make sure that your images
stretch all the way across the page.
| | 00:53 |
But for our purposes here today, this is
probably sufficient for us.
| | 00:57 |
You'll notice that the carousel has some
arrows here that we can use to navigate
| | 01:01 |
through our carousel in a forwards or a
backwards direction.
| | 01:05 |
Some of them have a caption here and some
of them are clickable, will actually go
| | 01:09 |
off to its own website.
Like that.
| | 01:14 |
And you'll also see up here in the upper
right hand corner a series of these
| | 01:17 |
little icons.
You can use these to navigate around the
| | 01:21 |
carousel as well, this is your position
indicator.
| | 01:24 |
We're going to be covering all of these
features in the course of talking about
| | 01:27 |
the carousel today.
To get started, what you're going to need
| | 01:30 |
to do is go to your exercise files folder
to chapter two.
| | 01:35 |
And in 02_01 here, you'll find all the
files that you need to build this carousel.
| | 01:39 |
So, you're going to have five images,
take those five images and copy them into
| | 01:44 |
your bootstrap folder on your Desktop.
Put these into your img, your image folder.
| | 01:50 |
And then, carousel-start, you'll want to
copy into just the bootstrap folder itself.
| | 01:56 |
So when you're done with that, you should
see your carousel start file here inside
| | 01:59 |
of your Bootstrap folder, as well as your
images here inside of your Bootstrap folder.
| | 02:06 |
When you open up that carousel start file
here inside of sublime text, you'll see
| | 02:11 |
this is our starting mark up here.
I haven't given you a whole lot of
| | 02:16 |
starting markup.
What we have of course is all of the
| | 02:19 |
links and things that are required for us
to interface with Bootstrap style sheets
| | 02:23 |
and JavaScript.
And we also have here our series of 5 images.
| | 02:28 |
Currently they're just laid out on the
page one right after the other, and if I
| | 02:31 |
put that into a web browser, you'll see
that that is in fact what's going on.
| | 02:36 |
We have a bunch of images that are laying
next to each other one after another.
| | 02:39 |
I don't think my screen's going to get
big enough to show you that they'll even
| | 02:42 |
wrap at a higher resolution but maybe
your monitor is big enough.
| | 02:45 |
They'll actually line up horizontally
next to each other if you have a large
| | 02:48 |
enough monitor.
Alright, so now that you have all your
| | 02:51 |
files oriented and you have a picture of
where we're going in this chapter.
| | 02:54 |
Let's go ahead and start by building the
carousel in its simplest format in the
| | 02:58 |
next video.
| | 03:00 |
| | Collapse this transcript |
| Creating the image carousel| 00:00 |
so let's go ahead and get started
creating this carousel.
| | 00:03 |
If you open up the carousel start file
that I gave you from the previous video,
| | 00:06 |
this is your introductory mark up here.
And there's not a lot going on and as we
| | 00:11 |
saw before, if you just put this right
into a browser, you're just going to see
| | 00:14 |
a bunch of images stacked on top of each
other.
| | 00:18 |
Which is lovely, but not exactly a
carousel yet.
| | 00:22 |
So what we're going to do is we're
going to start by adding a whole bunch of
| | 00:25 |
markup that bootstrapper requires for
this to become a carousel its self.
| | 00:30 |
So after the div with a class of span 12,
we're going to add another div tag and
| | 00:34 |
this div tag will have an id of anything
that you chose.
| | 00:40 |
It doesn't matter what the name is but
you are going to wind up referring to
| | 00:44 |
that name several types when you write
your code.
| | 00:48 |
So, don't make it anything too obscure.
I'm going to call mine artCarousel.
| | 00:54 |
And we're going to assign this a class
and that class is going to be carousel
| | 00:58 |
and slide and as you might expect that
will give you styling to make it look
| | 01:02 |
like a carousel and slide has to do with
the transition across the page.
| | 01:09 |
Then following that I'm going to add
another div, this one's going to have a
| | 01:15 |
class of carousel-inner.
And then I'm going to have my images
| | 01:22 |
here, I'm going to close my divs.
And I'm going to put in a note here, this one.
| | 01:27 |
Because we have so many divs when we work
with the carousel, it's really helpful to
| | 01:31 |
put in these HTML comments so that you
remember which slash div goes with which
| | 01:34 |
opening divs.
So this is going to end carousel-inner.
| | 01:43 |
And then I'm going to have another slash
div and this one is going to end artCarousel.
| | 01:51 |
Okay and then I'm going to make sure that
all these line up nice and neat.
| | 01:55 |
I really value it when my div tabs are
lining up nice and neat.
| | 02:00 |
It just makes the page so much easier to
read.
| | 02:03 |
And if you highlight a whole bunch of
stuff at once and hit the tab, it'll all
| | 02:06 |
tab together just like that.
Okay, so now we got something that's a
| | 02:10 |
little bit more readable.
We are five divs deep now until we get to
| | 02:14 |
our images.
But unfortunately we've still got another
| | 02:18 |
div to go and the div is going to go
around each one of these images.
| | 02:23 |
So we're going to have a div with a class
of item.
| | 02:27 |
Then you're going to have your image and
then you'll have your slash div on the
| | 02:31 |
other side of that.
Okay.
| | 02:35 |
So I'm going to go ahead and copy the div
with a class of item.
| | 02:39 |
I'm going to paste it here in front of
all these images.
| | 02:42 |
One two three and four and I'm going to
take the slash div, copy that and I'm
| | 02:46 |
going to put that behind all of these
images.
| | 02:51 |
There we go.
So now all of our dibs are in place and
| | 02:53 |
they've opened and they've closed.
The very last thing is I need to indicate
| | 02:58 |
which image should be the starting image
for the carousel and I'm going to do that
| | 03:02 |
with a class of active.
I'm going to make my first image the
| | 03:06 |
starting image but you don't have to, you
could pick you know, image number four or
| | 03:09 |
image number three or something if you
want to start the carousel at that point.
| | 03:15 |
But I'm going to start with number one so
I'm going to go ahead and select this as
| | 03:18 |
the active class.
Alright, so go ahead and save your page
| | 03:22 |
so far and if you'll just put this into
your browser.
| | 03:28 |
It looks a little bit more carousel-ish
at this point in time.
| | 03:31 |
You'll see the big image here on the page
and sometimes this will start moving.
| | 03:37 |
It seems like it will start moving if I
minimize my browser and come back to it.
| | 03:42 |
Sometimes I switch over to other screens.
I do something and I go back to my browser.
| | 03:46 |
And it'll start moving.
You may wind up doing something in
| | 03:49 |
another window for a minute, go answer an
email or something and then you come back
| | 03:52 |
to your browser window here and your
carousel might be moving at this point.
| | 03:57 |
If it doesn't move it at all, that's
totally okay too.
| | 03:59 |
What's going on here is there's actually
a bit of JavaScript that I'm going to get
| | 04:03 |
to at the very last video in this chapter
that will make this carousel move by default.
| | 04:09 |
Otherwise, the carousel starts in the
stopped position and what you'd need to
| | 04:12 |
do is have some navigation in order to
get the carousel moving.
| | 04:15 |
Well, we don't have any navigation yet,
so we can't see the carousel moving at
| | 04:18 |
this point.
So if you've gotten this far and your
| | 04:22 |
carousel looks like this, then you're in
great shape, congratulations.
| | 04:26 |
And you're ready to move onto the next
video.
| | 04:28 |
| | Collapse this transcript |
| Adding carousel navigation| 00:00 |
So as we saw from the previous video, we
have a carousel or what we think is a carousel.
| | 00:05 |
It's got a bunch of images, we only see
one of them.
| | 00:07 |
But, it's not really moving on the page
yet.
| | 00:09 |
And that's because to get if moving on
the page, we're going to have to add a
| | 00:12 |
little bit of JavaDcript to make that
moving happen by default as the carousel
| | 00:15 |
was loaded.
And we don't have any navigation so we
| | 00:19 |
can't even click on some button or
something to make it transition to the
| | 00:22 |
next slide.
In this video, what I'd like to do is add
| | 00:26 |
that navigation, add some of those arrows
that go on the left and the right.
| | 00:30 |
So that you can see that we actually do
have a carousel and that we do cycle
| | 00:33 |
through our slides in that carousel.
I'm currently working with my file from
| | 00:39 |
the previous video.
And you can continue on working with that
| | 00:43 |
here in this next video.
But if for some reason that file isn't
| | 00:47 |
working for you, or you are just jumping
in at this point.
| | 00:50 |
Take a look in your exercise files folder
and you'll find carousel NAV for this
| | 00:54 |
particular exercise.
Alright, what I'd like to do here is
| | 00:59 |
after the end carousel inner DIV here.
So, we're still inside of the carousel structure.
| | 01:06 |
Because we're within the DIV of art
carousel, that ID.
| | 01:10 |
But it's after the div with a class of
carousel inner.
| | 01:14 |
This is where I'm going to add my
navigation.
| | 01:17 |
And the navigation is going to be put in
as follows.
| | 01:19 |
It's an anchor tag, a class equals, then
we're going to assign two classes here, left.
| | 01:26 |
Because this is a left arrow, and
carousel-control, because of course these
| | 01:31 |
are the controls for our carousel.
Then href equals, and this is where we're
| | 01:38 |
going to refer to the ID of our carousel.
And I've called mine artCarousel.
| | 01:46 |
That ID's up here in line 17.
If you called your carousel by a
| | 01:50 |
different ID, you're going to need to
make sure that's reflected here.
| | 01:53 |
But if you called your carousel
artCarousel like I did, the href is going
| | 01:56 |
to be pound art carousel.
And make sure you get your capitalization
| | 02:00 |
and spelling correct on that.
If you called it something else, then
| | 02:04 |
it's going to be pound whatever it was
that you called it.
| | 02:08 |
Then, we're going to add also a
data-slide, remember data hyphen anything
| | 02:13 |
is an attribute that you can add in HTML
5.
| | 02:17 |
That connects the JavaScript with that
particular HTML tag.
| | 02:21 |
So data-slide="prev" as in previous, and
then what we're going to do is put in the
| | 02:28 |
character for the left facing angle
bracket.
| | 02:34 |
So that will be the ampersand, lsaquo
semicolon slash a.
| | 02:39 |
All right, so that's all the code that we
need for our left navigation button.
| | 02:49 |
Now, I'm going to show you the code for
the right navigation button.
| | 02:51 |
Guess what?
It's another anchor tag.
| | 02:53 |
A class of right and carousel-control.
Then, we're going to give this an href.
| | 03:04 |
Again, exactly as we had before its going
to be pound plus the name of your ID.
| | 03:09 |
So in my case, it's artCarousel.
And then, we're going to have that
| | 03:14 |
data-slide just like we had before.
But this time, it will be next.
| | 03:21 |
And the character here will be ampersand
rsaquo semicolon slash a.
| | 03:31 |
Okay, so now that you've got that in
place, go ahead and save your page and if
| | 03:35 |
you preview that in a browser.
You now have your carousel controls on
| | 03:39 |
either side of the carousel.
And if you click the Next button, you'll
| | 03:44 |
go to the next slide.
So, now we can flip through our carousel
| | 03:48 |
here using our carousel buttons just
flipping back and forth here using our navigation.
| | 03:54 |
So, you see that we do have a carousel
here.
| | 03:57 |
It still doesn't seem to be moving on
it's own, but that will be changing in a
| | 04:00 |
few videos, when we add a little bit of
JavaScript to make that happen.
| | 04:05 |
| | Collapse this transcript |
| Linking images to other pages and adding captions| 00:00 |
Now that we have a carousel that we can
actually flip through the slides, the
| | 00:03 |
next thing I'd like to do is do a little
bit more with the slides in the carousel themselves.
| | 00:09 |
One of the things that carousel can be
used for is providing links to take you
| | 00:13 |
to other places, either within your
website or to other websites.
| | 00:17 |
And you can do that in one of two ways.
You can either add a caption.
| | 00:21 |
To these carousel items, and the caption
may contain links that take you
| | 00:24 |
somewhere, or you could just be plain old
text that describe what that slide is.
| | 00:30 |
Or you can actually take the entire slide
and when you click on the slide it will
| | 00:33 |
take you somewhere else, either within
your own site or to an external website.
| | 00:39 |
So I'm going to show you how to add that
now.
| | 00:41 |
I'm working with the same document that I
worked with in the previous video but if
| | 00:45 |
you're jumping in or if you need to start
over with another document there is a
| | 00:49 |
2-carousel-linking.html inside of your
exercise files folder so you can follow along.
| | 00:58 |
Alright so here on your web page, what
I'm going to do here is with slide number.
| | 01:03 |
One.
I'm going to go ahead and add a whole
| | 01:06 |
caption to this.
So, I have my div with a class of item
| | 01:09 |
and active.
And then, I have the image tag here
| | 01:12 |
that's calling out my slide.
After that, (SOUND) I'm just going to
| | 01:16 |
move my, my slash div tag down here a
little bit.
| | 01:20 |
I'm going to add another div inside of
this.
| | 01:22 |
It's a div with a class.
Of carousel hyphen caption, and close
| | 01:31 |
that div.
There we go.
| | 01:36 |
And then inside of this div with the
class of carousel-caption, you can do
| | 01:39 |
anything you like, pretty much, in terms
of, you know, headers and paragraphs and
| | 01:42 |
so forth.
Just of course be aware that the more
| | 01:46 |
stuff you put here inside of your
caption, it's going to lay this caption
| | 01:49 |
over top of your image, so if your image
isn't very tall, potentially your caption
| | 01:53 |
could cover the entire image.
So you just want to be aware of putting
| | 01:58 |
in too many words in one of these
captions, it should just be a few words.
| | 02:03 |
So I'm going to put in an H4 and I'll put
in the artists name here Barrett Bellingham.
| | 02:11 |
Then it can put in a paragraph with some
information about him.
| | 02:17 |
Barrett has just.
Slash p, alright, so that's just going to
| | 02:22 |
give me a caption let's take a look at
what we've got so far here.
| | 02:27 |
If you go a head and save that page, and
you open this up in the browser, you'll
| | 02:31 |
see that there's my H4, the name of the
artist, and then underneath of that, is
| | 02:35 |
the text.
Now my pictures are really quite wide,
| | 02:40 |
and they stretch pretty far across my
browser window, so this length of caption
| | 02:44 |
works well.
Just remember, though, that as your
| | 02:48 |
screen is going to reduce in size, that
caption takes up progressively more of
| | 02:52 |
that carousel space, until you hit these
break points, right?
| | 02:58 |
So once you hit breakpoints then it's a
little bit different.
| | 03:00 |
But, this may be something that you want
to address at smaller resolutions.
| | 03:05 |
maybe you want to work on some styling
for that text so that it gets smaller.
| | 03:10 |
Or, maybe you even want to try writing a
style that the text completely disappears
| | 03:13 |
at smaller resolutions.
So just be aware of that.
| | 03:17 |
So even if it works great at the large
resolution, make sure you check the
| | 03:20 |
smaller resolutions to make sure it works
there as well.
| | 03:24 |
Now of course I could add a link inside
of this caption if I wished.
| | 03:28 |
Roux Academy, for example.
I could add a link a href equals
| | 03:32 |
www.rouxacademy.com, and we can also say
target equals quote, underscore, blank,
| | 03:38 |
which will make it open in a new window
or new tab, depending on how the user has
| | 03:45 |
their browser configured.
Slash A, so now if I save this and I put
| | 03:53 |
this inside of my browser window, there's
my link to Roux Academy and when I click
| | 03:58 |
that I do get Roux Academy opening here
in another window.
| | 04:04 |
Okay.
So, that is the caption process here with
| | 04:09 |
my carousel.
And, you know, obviously as I go to my
| | 04:12 |
other images here in series, they don't
have captions, but feel free if you'd
| | 04:15 |
like to have a little bit of practice,
you're more than welcome to go ahead and
| | 04:18 |
add captions to some of these other
images.
| | 04:23 |
The next thing that I'm going to do is
show you how you can make the entire
| | 04:25 |
carousel slide become clickable so that
that might take you somewhere to a website.
| | 04:31 |
Here inside of image two for example, I'd
like that whole image to link to the Roux
| | 04:35 |
Academy and that's really quite easy to
do.
| | 04:39 |
All you need to do is just like you'd
link anything else.
| | 04:42 |
Just wrap an a href equals
www.rouxacademy.com target equals
| | 04:51 |
underscore blank.
Just wrap that A tag right on around the image.
| | 05:00 |
Slash A.
And save that.
| | 05:02 |
I have left my alt tags as blank for
this.
| | 05:06 |
But if you're going to use this kind of
method you would probably want to put
| | 05:10 |
something in the alt tag like, click to
visit Roux Academy because you'll want
| | 05:13 |
people to know what happens if they click
that particular slide.
| | 05:20 |
Go ahead and save that and if you put
that into your browser, you'll need to
| | 05:24 |
flip over to the next slide here and when
you click that, that should also take you
| | 05:27 |
to the Roux Academy website.
So that's two ways of including links
| | 05:33 |
within your slides.
You could either put a link inside of the
| | 05:37 |
caption within your slide or you can put
your link around a whole image so the
| | 05:41 |
entire image becomes clickable.
Either way, you'll be able to add links
| | 05:46 |
to your image carousel for your website.
| | 05:48 |
| | Collapse this transcript |
| Adding and styling the carousel position indicator| 00:00 |
The next thing I'd like to add is a
indicator of where I'm in the rotation of
| | 00:04 |
the carousel.
Sometimes you see these as little
| | 00:07 |
thumbnails that occur under the carousel.
But Bootstrap provides you with little
| | 00:11 |
round circles that appear in the upper
right corner of the image carousel.
| | 00:16 |
And those little circles are going to be
indicators of where you are in the
| | 00:19 |
carousel slides.
It allows you to skip around to various
| | 00:24 |
slides within the carousel.
So, I'm going to show you how to code
| | 00:28 |
that now.
What you're going to do is, after the DIV
| | 00:31 |
with an ID of art carousel, that's here
on line 17, this is where you're going to
| | 00:34 |
add this bit of code.
And it's going to be, hopefully of no
| | 00:39 |
surprise to you, an ordered list.
Because, of course, it matters what order
| | 00:43 |
these particular items come in, but it is
a list of stuff.
| | 00:46 |
So, it's an OL with a class of carousel
hyphen indicators.
| | 00:53 |
And I'll make sure that I close my list.
Then, I'm going to go ahead and add a
| | 01:01 |
series of list items.
And these list items are going to have a
| | 01:05 |
couple of those data-attributes to them.
The first one will be data-target.
| | 01:13 |
And that is going to be, of course, the
ID of our carousel.
| | 01:18 |
So, once again, on line 17, I established
the idea of this carousel as art
| | 01:23 |
carousel, artCarousel.
So, I'm going to put that in here as my
| | 01:29 |
data target, pound art carousel.
If you named yours something else in the
| | 01:35 |
ID, you need to make sure that you're
incorporating that here in the data target.
| | 01:40 |
Then, you are going to indicate where
it's going to slide, too.
| | 01:43 |
So, data-slide-2 equals.
And since we're counting in engineer
| | 01:52 |
style, remember human style is 1, 2, 3,
4, but engineer style we always start
| | 01:56 |
with 0, 0, 1, 2, 3, 4.
So, this is going to slide to position zero.
| | 02:01 |
In another words, the very first slide in
the series and the class here will be
| | 02:06 |
active because this is, of course, is
where we are starting.
| | 02:11 |
Then, you're just going to go ahead and
close the list item.
| | 02:13 |
Then, we're going to repeat this process
for the other list items here.
| | 02:17 |
And I can just do that by copying this
particular list item.
| | 02:21 |
I'm going to paste it down here below and
make just a couple of changes.
| | 02:24 |
The data slide to in this case is one,
and we do not want that class of active.
| | 02:30 |
The class of active is going to to the
first slide only.
| | 02:33 |
And it should apply in the same position
as the item that has the active class
| | 02:37 |
down below.
So inside of your carousel inner, you
| | 02:40 |
have a series of DIVs with a class of
item.
| | 02:43 |
One of those has a class of active as
well.
| | 02:46 |
And so, you should match up the indicator
with the slide down below.
| | 02:51 |
Okay, so then, I'm just going to copy
this line of code and paste that in a few
| | 02:55 |
times and then just change my numbers.
So, we're going to slide to 2, slide to
| | 03:01 |
3, and slide to 4.
So, that's going to take care of my five slides.
| | 03:06 |
If I added a 6th slide to my rotation
here, I'd need to copy this line of code.
| | 03:11 |
And then, paste that in directly after
and make sure it says data slide 2, 5.
| | 03:16 |
So remember, we have to count
engineer-style which, which can trip you
| | 03:19 |
up just a little bit.
But remember that you start with zero
| | 03:22 |
when we're talking about counting in the
programming environment.
| | 03:26 |
All right, so now that this is in place.
If you go ahead and save this, we should
| | 03:30 |
be able to put this in your browser
window.
| | 03:33 |
And you'll see the little indicators up
here in the corner.
| | 03:36 |
And if you click say on the third one,
that will skip you up to the third slide.
| | 03:41 |
If you click on the fifth one, that will
click you to the fifth slide.
| | 03:45 |
So, you can use this indicator to move
around within all of your slides here
| | 03:48 |
inside of your carousel.
And you might notice that your carousel
| | 03:53 |
sometimes just starts moving on its own
after I've clicked around a few times.
| | 03:57 |
Yeah, I've noticed that, too.
Once again, we're going to add a little
| | 04:00 |
bit of JavaScript, coming up in the next
video, that will make this carousel start
| | 04:03 |
moving right off the bat.
And get rid of some of this buggy
| | 04:06 |
behavior that you're seeing.
The other thing that is worth noting is
| | 04:09 |
that you can, of course, do some custom
styling for those carousel indicators.
| | 04:14 |
Right now, they're styled to be a little
white circles that may not necessarily
| | 04:18 |
show up the best on this page.
And you may not be happy with the way
| | 04:22 |
that they're screened back.
You can use all the techniques that I
| | 04:25 |
showed you in Up and Running with
Bootstrap to track down where those
| | 04:29 |
styles are.
And override them inside of your custom
| | 04:32 |
style sheet to make those indicators look
the way you want.
| | 04:36 |
| | Collapse this transcript |
| Make the carousel move by default and changing the rotation interval| 00:00 |
So we have one last thing that we need to
do before we're done with our carousel
| | 00:04 |
here, and that is to address this issue
the carousel sometimes moving and
| | 00:07 |
sometimes not moving as you arrive on
that webpage.
| | 00:13 |
And we an address that through
JavaScript.
| | 00:15 |
The way that I'm going to go ahead and do
that, is if you scroll on down here to
| | 00:19 |
the bottom of you HTML webpage, down here
where we have our JavaScript here we're
| | 00:23 |
going to add a little bit of script right
here in the webpage.
| | 00:29 |
As I talked about it up and running with
bootstrap, it does matter what order you
| | 00:32 |
put these scripts in, and it does matter
of course that you're going to add this
| | 00:35 |
particular little bit of script that
we're about to write.
| | 00:40 |
You want to have it included after the
bootstrap.min.js javascript.
| | 00:47 |
Alright, so we're just going to embed a
few lines of code here in the page.
| | 00:51 |
So this is script, just the script tag
and of course you always want to end that
| | 00:55 |
with a slash script.
And an HTML5 you do not have to include
| | 01:00 |
the attribute that type is text slash
JavaScript.
| | 01:03 |
That's something you have to include with
XHTML but it's not required with HTML5.
| | 01:08 |
Then here inside of the script tag we're
going to add a little bit of jQuery.
| | 01:12 |
So, what we're going to do is start this
dollar sign here, and then we're going to
| | 01:16 |
put in some parentheses.
In inside of that are some single quotes
| | 01:21 |
followed by pound, art carousel.
So, this of course, is referring to the
| | 01:27 |
ID of art carousel.
That's what we're talking about.
| | 01:31 |
Where is the script going to be applied?
Followed by .carousel.
| | 01:35 |
And that is the function that makes the
carousel go.
| | 01:39 |
So, that's always going to be enclosed by
little parentheses here and a semicolon
| | 01:43 |
on the end.
Now, inside of that, we have some
| | 01:47 |
additional parameters we want to add.
So, inside of the parentheses, you're
| | 01:51 |
going to put in a couple of curly braces.
And then it's generally customary to
| | 01:56 |
separate these a little bit so that they
go onto their own line.
| | 02:00 |
And if you type in all those parentheses
and curly brackets the way I just showed
| | 02:03 |
you, you'll wind up with fewer nesting
problems later.
| | 02:08 |
Okay, so then inside of this, we're only
going to add two of these parameters.
| | 02:13 |
They're going to describe the carousel.
And there's several of these you can find
| | 02:17 |
inside of the bootstrap documentation,
but there's two that we really need to apply.
| | 02:21 |
One of which is the interval.
And we can set that to at let's say 5,000
| | 02:28 |
by default.
So, this is the speed of the timing of
| | 02:31 |
the changing of the slides in the
carousel.
| | 02:35 |
5,000 refers to 5,000 milliseconds.
So this is a fairly slow rotation.
| | 02:41 |
That's probably a good speed if you've
got some text on, on top of those slides,
| | 02:44 |
but you can easily make that go faster,
and I'll show you how to do that in a minute.
| | 02:49 |
And then the other thing you're going to
want to add is, cycle true.
| | 02:54 |
And you don't need a comma after that
last statement.
| | 02:58 |
That is what we really need in order to
make this work on the website, just that
| | 03:02 |
little bit of code there.
And if you'll go ahead and save the page,
| | 03:06 |
and you put this into your browser, this
should now start to play for you
| | 03:10 |
automatically after five seconds.
There we go.
| | 03:15 |
That's the way to get this carousel
moving consistently as you open the webpage.
| | 03:19 |
You've probably been noticing some
inconsistent behavior with this carousel
| | 03:22 |
as I've been talking through the course,
sometimes it's rotating and sometimes
| | 03:25 |
it's not.
This little bit of JavaScript will make
| | 03:29 |
it rotate consistently every time you
arrive on the web page.
| | 03:33 |
Now, if I wanted this to go faster, I can
certainly change my number here, we'll
| | 03:36 |
make it go ridiculously faster.
So instead of five second interval, let's
| | 03:40 |
say a half second or five hundred
milliseconds.
| | 03:44 |
If I save that and take a look at that in
my webpage and just refresh, you'll see
| | 03:47 |
it start moving right away.
This tiny little bit of JavaScript down
| | 03:53 |
here at the bottom of the page has made
the carousel behavior a little bit more even.
| | 03:59 |
It's now rotating every time we open the
webpage.
| | 04:02 |
And it starts to cycle on its own, thanks
to cycle of true.
| | 04:06 |
We can set the interval for that to a
comfortable interval for the slides that
| | 04:09 |
you're working with.
And as I had mentioned, if you take a
| | 04:13 |
look at bootstraps documentation at
getbootstrap.com, you'll find more
| | 04:16 |
documentation about other JavaScript
parameters that you can add to this.
| | 04:21 |
| | Collapse this transcript |
|
|
3. Creating FormsDefault form layout and styling| 00:00 |
I've gotten a lot of great feedback from
my course up and running with Bootstrap.
| | 00:05 |
But one of the things that many of the
subscribers have asked me for, is more on
| | 00:09 |
forms inside of Bootstrap.
And so, I've decided to include a chapter
| | 00:14 |
on forms in Bootstrap in this particular
title.
| | 00:18 |
The form we're going to build today is
this one.
| | 00:20 |
This is the n state of the forms that
we're going to put together.
| | 00:23 |
And as you'll see here this is just the
layout of the form.
| | 00:28 |
This is not the functionality of the form
or how you submit this form somewhere to
| | 00:32 |
get emailed or whatever it happens to be,
that kind of stuff.
| | 00:36 |
This is just for the purposes of laying
out the form and how it looks on the page.
| | 00:41 |
So, you'll see here that you have a place
where you can type your name you can put
| | 00:44 |
in your Twitter username.
You can make a choice of a favorite
| | 00:48 |
session you attended at a conference,
whether you go to that conference.
| | 00:52 |
Again, notice those radio buttons are
going horizontally instead of vertically.
| | 00:57 |
You can choose a continent that you're
from and then, you can roll your mouse
| | 01:00 |
over the continent box.
You'll get a little tool tip that'll come
| | 01:03 |
up and ask for in this case.
It's saying we welcome your feedback, but
| | 01:07 |
you can incorporate these tool tips to
give people pointers for certain field on
| | 01:10 |
their form.
And then finally, if you say I'd like to
| | 01:13 |
subscribe to the newsletter this will
actually reveal then a blank where you
| | 01:16 |
can type in your email address.
So, the form itself doesn't do anything,
| | 01:21 |
but this will give you a sense of how
Bootstrap is going to work with form controls.
| | 01:26 |
If you need more help in learning how to
code forms, you can take a look at this
| | 01:30 |
course, which is HTML5 Web Forms in
Depth, with Joe Marini.
| | 01:36 |
And this will walk you through how you
would code an HTML form, if you are not
| | 01:40 |
up on the hand coding of HTML forms.
Meanwhile, if you take a look at your
| | 01:45 |
exercise files folder in Chapter 3, there
are seven videos in this particular chapter.
| | 01:52 |
The first six are going to use exactly
the same file.
| | 01:55 |
I have put in, basically jump in files in
each of these folders.
| | 01:59 |
If you get lost along the way, or if you
do in fact jump into the process, you can
| | 02:02 |
pull those out.
And the seventh movie here is talking
| | 02:06 |
about formatting a search box.
So, that is a different document.
| | 02:09 |
You will need to open that up to follow
along with that video.
| | 02:13 |
What you should do as you're getting
started here is to copy the HTML document
| | 02:17 |
into your Bootstrap folder.
Go ahead and put those right in the root
| | 02:21 |
of that Bootstrap folder.
And then, all of your CSS and JavaScript
| | 02:25 |
should then work correctly with those
particular forms.
| | 02:30 |
Your starting state for your form is
going to be the form start.
| | 02:35 |
And if you just take a quick peek of that
in the browser, that's what the form is
| | 02:39 |
going to look like to start with.
And I'll go through that form in detail
| | 02:43 |
in the next video.
| | 02:44 |
| | Collapse this transcript |
| Form field sizing using grid sizes| 00:00 |
So you should have opened
three_form_start.HTML.
| | 00:04 |
This is from your exercise files folder.
And I'm just going to give you a little
| | 00:08 |
overview of what we've got here for HTML
to work with.
| | 00:12 |
Right now, this is just standard HTML5
markup for a form and over the course of
| | 00:16 |
the next six videos, we will be adding
some Bootstrap markup to this.
| | 00:22 |
So, we're going to start here at the very
top just after the body tag.
| | 00:26 |
The first three lines of code here, lines
13 through 15, that's just part of
| | 00:29 |
Bootstrap's grid system.
And we talked about that and up in
| | 00:33 |
running with Boostrap, and I've kept the
grid system here really really simple.
| | 00:37 |
The DIV with a class with a span of class
12.
| | 00:39 |
So, this goes all the way across the
page.
| | 00:41 |
You can certainly put a form into any
kind of grid that you'd like.
| | 00:45 |
You don't have to just put it here into
these span 12.
| | 00:50 |
Then we have our form tag.
Notice the form tag doesn't have any
| | 00:53 |
action associated with it, or anything
else.
| | 00:56 |
And the reason why is well, this form
isn't actually doing anything.
| | 01:00 |
That's an additional piece of programming
that's really beyond the scope of this course.
| | 01:04 |
Following that, we have our field set,
and then we have the legend tag here on
| | 01:08 |
line 18.
The legend tag is the label for this
| | 01:11 |
whole form.
And if we just take a quick peek at this
| | 01:14 |
in the browser, you'll see here the
legend is the word feedback form with a
| | 01:17 |
line under it.
Then we're going to have a series of
| | 01:21 |
these inputs here for the form.
So generally, its a label, and that label
| | 01:25 |
would be something like your name, the
words your name followed by your input type.
| | 01:31 |
So this would be in this case a text
field, with a name of Name.
| | 01:36 |
So, you'd be collecting somebodies name
in that particular field.
| | 01:39 |
And we're just going to sort of continue
on down the page here, we have some radio
| | 01:43 |
buttons, we have some yes and no buttons
here, which are also radio buttons, we
| | 01:46 |
have a dropdown with a choice of
continents.
| | 01:51 |
We have comment, big box here on line 49,
just a big box, you can type in.
| | 01:56 |
You can ask people if they want to
subscribe to the news letter and if they
| | 01:59 |
do, then they should give you their
e-mail address, and then the Submit button.
| | 02:03 |
All in all its a pretty basic form to
start with here on the page.
| | 02:07 |
One of the things you might notice
looking at thin in your browser window,
| | 02:10 |
is that the forum fills themselves
specifically your name.
| | 02:14 |
The Twitter user name, your continent,
comments and email, might be a little bit
| | 02:17 |
narrow for you, particularly given this
big screen.
| | 02:21 |
One of the things you can do with
Bootstrap is the span classes that you
| | 02:24 |
already know and love from the grid
system, you can apply those to some of
| | 02:28 |
these blanks on your form.
And that will increase or decrease the
| | 02:33 |
size of that form field.
So, if I go to that blank at the top of
| | 02:37 |
the page here where it says name, if I
gave this say a class of span four, and
| | 02:41 |
save that.
And take a look at that in the browser,
| | 02:46 |
you'll see that my blank here for your
name has gotten a little bit bigger.
| | 02:52 |
And I can continue adding that span four
on down the page.
| | 02:57 |
So I can put it here inside of my input
type of text, I can put it inside of my
| | 03:02 |
Twitter username and further down here on
the page I can apply it to my select drop
| | 03:07 |
down here.
There we go a class with a span of four.
| | 03:13 |
I can also give it to my email here, and
of course I don't have to keep this to
| | 03:19 |
span four.
Let's say for the comments, maybe I
| | 03:23 |
actually wanted to go a little bit wider.
Maybe I want to go to a span six or
| | 03:26 |
something, I can do that.
That's not a problem at all with these forums.
| | 03:31 |
And if we take a look at that in the
browser, you can see here that, for the
| | 03:33 |
most part, these fields are lining up,
except where I made one particularly big.
| | 03:38 |
The Twitter username is pushed over a
little bit because of this @ sign in
| | 03:42 |
front of the field.
So we might want to trim that and make
| | 03:45 |
that a little narrower.
So I'm going to make my text area back to
| | 03:49 |
a span four.
And my Twitter username, which is
| | 03:52 |
going to be short anyway, I'm going to
make that a span three.
| | 03:56 |
So once again if I save this and I put
that in a browser window, then you have
| | 03:59 |
form fields here that are a little bit
bigger.
| | 04:03 |
They line up for the most part down the
right side of the page.
| | 04:06 |
The twitter username field is a little
bit shorter, so that is one of the first
| | 04:09 |
tricks that you can use for styling your
Bootstrap form.
| | 04:13 |
Applying your grid sizing classes to each
of these form fields to change the size
| | 04:18 |
of the field.
| | 04:20 |
| | Collapse this transcript |
| General form styling| 00:00 |
Now that we have our boxes in place on
our form.
| | 00:03 |
And they have been assigned a size via
those span classes.
| | 00:06 |
It's time to turn our attention to some
of the other troubling little display
| | 00:10 |
issue that are going on with our form.
So, if I just go ahead and open this up
| | 00:14 |
in a browser, you'll see what I'm talking
about.
| | 00:18 |
I'm sure you've noticed that these radio
buttons don't quite line up with the text
| | 00:20 |
next to them.
As you can see here neither does the checkbox.
| | 00:25 |
And there's probably a little bit of
styling that can be applied here.
| | 00:28 |
To clean all that up and make it look
better.
| | 00:31 |
Also we have this big box up here at the
top for your name.
| | 00:34 |
But I haven't been really clear about
what is suppose to go in there.
| | 00:38 |
Is it just your first name, your last
name, both names.
| | 00:41 |
So it might be good to have a little
pointer that would indicate what it is
| | 00:44 |
that I'm looking for in that box.
And then finally down here, towards the
| | 00:47 |
bottom of the page, we have a Submit
button.
| | 00:50 |
It's a functional Submit button, if it
was actually hooked up to some kind of function.
| | 00:54 |
But it's not terribly attractive.
We could make that button look a whole
| | 00:58 |
lot more interesting than that, so let's
go ahead and address these problems one
| | 01:02 |
by one.
Back here in your HTML, if you scroll on
| | 01:06 |
down to line number 20, this is the blank
where you're going to put in your name.
| | 01:12 |
What we can add here is a HTML5
attribute, and that is the place holder
| | 01:17 |
attribute, placeholder= First and last,
please.
| | 01:23 |
And placeholder is a new attribute in
HTML5.
| | 01:28 |
What this will do, is it will give you
text that will appear in the box.
| | 01:32 |
It will be grayed back a little bit.
But when you click in the box and you
| | 01:35 |
start typing, then that text is going to
disappear.
| | 01:38 |
And that is again an HTML5 thing, not a
Bootstrap thing.
| | 01:42 |
If you go ahead and save your page and
then open this up in a browser, you'll
| | 01:46 |
see here there's that text, first and
last page.
| | 01:49 |
You can see it's kind of grayed back.
When I click inside and I start to type
| | 01:52 |
my name, then that text is going to
disappear.
| | 01:57 |
So that's very nice.
The next thing we should address is those
| | 02:00 |
radio buttons.
Bootstrap has a way of dealing with that,
| | 02:03 |
and the way we deal with it is to the
labels that go around your radio buttons.
| | 02:10 |
You're going to add a class, and that
class is going to be radio.
| | 02:14 |
And we have several places that we're
going to need to apply this class.So this
| | 02:18 |
is the first radio button here for HTML5.
So I'm just going to go on down and apply
| | 02:24 |
this class in all of these buttons for
the favorite session.
| | 02:28 |
Also down here where I've got, would you
come to this conference again, the Yes
| | 02:32 |
and No buttons, they're also going to get
that treatment inside of the label tag.
| | 02:36 |
Alright?
So if we just go ahead and Save that, and
| | 02:39 |
put that in a browser, you'll see now
that our radio buttons are lined up with
| | 02:42 |
the text next to them.
One of the things we might want to do
| | 02:46 |
for, Would you come to this conference
again?
| | 02:49 |
We just have Yes and No, and they sort of
push the content down the page a little bit.
| | 02:54 |
They're just short answers.
And it might look better if these were
| | 02:57 |
side by side.
And Bootstrap does have a way of doing that.
| | 03:00 |
We can add a class of in line to those
radio buttons.
| | 03:05 |
So, here where we have on line 31 the
label for the class of radio, we can add
| | 03:10 |
to that a class of inline, likewise down
here on line 34.
| | 03:17 |
So the two classes of in line there and
if I put that in my browser you'll see
| | 03:20 |
now that these buttons are appearing next
to each other.
| | 03:24 |
The next thing that we should do is
address this check box down here towards
| | 03:28 |
the bottom of the page, which isn't
lining up.
| | 03:32 |
Down a little bit further here in the
label that goes around your checkbox.
| | 03:37 |
Let's go ahead and add a class of
checkbox.
| | 03:42 |
And then finally down here at the bottom,
here's our button.
| | 03:44 |
And it's a of type submit and doesn't
have any classes associated with it at all.
| | 03:49 |
So let's go ahead and put some classes
on.
| | 03:51 |
A class of btn at the very least that
would just give it buttony sort of styling.
| | 03:57 |
In fact lets just take a look at what
that looks like so far.
| | 04:00 |
If you go ahead and save this and put
that in a browser you'll see that our
| | 04:03 |
button looks much more buttony.
Its not quite so square and small, its
| | 04:08 |
pushed out a little bit.
Its got a nice gradient to it, its got
| | 04:11 |
this nice hover effect when I roll over
it.
| | 04:14 |
But it's still kind of grey and blends in
to the page.
| | 04:16 |
A little color would make it pop out.
So, I can add a couple of other classes
| | 04:20 |
to this.
Btn-warning will make it orange and
| | 04:24 |
btn-large will make it big.
So, if we go ahead and Save that and put
| | 04:30 |
that inside of our browser.
Now we have a nice big orange button down
| | 04:34 |
here at the bottom of the page that we
can click on to submit this form.
| | 04:38 |
So with just a few Bootstraps standard
styling classes, we've managed to improve
| | 04:43 |
the look of this page by quite a bit.
Making sure that those radio buttons were
| | 04:47 |
all lined up, and adding a little color
to the button has definitely improved the
| | 04:51 |
look of this page.
| | 04:53 |
| | Collapse this transcript |
| Using tooltips to enhance form usability| 00:00 |
The next thing I'd like to add to this
page is a Tooltip.
| | 00:04 |
Tooltips are what you can get when you
roll over something on the page.
| | 00:07 |
You can have a little balloon sort of pop
up that has text inside of it that might
| | 00:11 |
provide more information about what's
expected on one of these form fields.
| | 00:17 |
If you've got a really long, complicated
sort of form Tooltips can be pretty helpful.
| | 00:21 |
You can have one come up for example and
talk about the formatting required for a
| | 00:25 |
phone number or you could talk about the
type of information that you're looking
| | 00:29 |
for in a particular form widget that kind
of thing.
| | 00:34 |
Where I'm going to apply this is down
here in my text area.
| | 00:39 |
So, all we'd like to do is when we roll
over the text area there's just a Tooltip
| | 00:43 |
that comes up that says we welcome your
feedback.
| | 00:47 |
So I'm going to go ahead and make this
happen and it's a combination of HTML and
| | 00:50 |
Javascript to make this Tooltip happen.
So here inside of the text area I'm going
| | 00:57 |
to go ahead and add a title and the title
for this is going to be "we welcome your
| | 01:03 |
feedback." the title attribute is
something that is part of the HTML 5 spec
| | 01:08 |
and other versions of HTML, it's in their
specs as well.
| | 01:16 |
This is going to be the text that's going
to appear in the tool tip.
| | 01:20 |
So that's what the title is going to do
in this context.
| | 01:23 |
Then I'm going to need to add two of
those data hyphen attributes that are new
| | 01:28 |
in HTML5 and connect JavaScript with this
particular field here on the form.
| | 01:35 |
So, I'm going to add a data - toggle and
that will equal quote Tooltip, and I'm
| | 01:41 |
going to add a data-placement.
Alright, so, the data title ToolTip of
| | 01:48 |
course is required to make the ToolTip
appear, data placement is where would you
| | 01:53 |
like that ToolTip to appear.
And the values for that would be top,
| | 01:59 |
left, bottom or right.
So, you can pick one of those.
| | 02:03 |
And I'm going to have mine appear on the
right, because I've got plenty of room on
| | 02:05 |
the right in this form.
Then the last thing that we need to do to
| | 02:09 |
make this Tooltip work is down here at
the bottom after our bootstrap.min.js
| | 02:13 |
script, we're going to add a little bit
of JavaScript once again.
| | 02:20 |
So we start with the script tag and then
we end with the /script tag.
| | 02:25 |
And inside of this what we need to do is
we need to initialize the Tooltip here
| | 02:29 |
for the website.
And the little bit of code I'm going to
| | 02:33 |
include here is a dollar sign.
Inside of the parentheses are single
| | 02:38 |
quotes and inside of that is the word
textarea.
| | 02:41 |
Then after the parentheses here, we'll
have a dot, tool tip With the double ()
| | 02:48 |
and a ;.
So, what does that mean?
| | 02:53 |
Well, this is the initialization for the
Tooltip JavaScript and what we're saying
| | 02:58 |
here is, "Hey JavaScript, I would like
you to listen to this webpage.
| | 03:03 |
When somebody rolls over the textarea
HTML tag on this webpage." Then you're
| | 03:08 |
going to do something.
So, that is what the text area here
| | 03:13 |
refers to inside of this parentheses.
It's the textarea HTML tag.
| | 03:19 |
Now, I didn't have to do it this way.
I only have one textarea HTML tag on my
| | 03:23 |
page, so I chose to do it this way.
I could have assigned textarea an ID and
| | 03:28 |
I could have used an ID here.
That would have looked like a pound, say
| | 03:32 |
comments, let's say I set the ID to be
comments then I put a pound sign in front
| | 03:36 |
of it to be ID or if I had to set up as a
class it will be dot comments.
| | 03:43 |
But in this case I didn't do either of
those things because I have simple loop
| | 03:47 |
mark up here there is only one textarea
on the page.
| | 03:51 |
I just decided to work with that textarea
tag instead.
| | 03:54 |
That way I don't have to add any
additional markup.
| | 03:58 |
Okay.
So if you go ahead and save this.
| | 04:00 |
And now if you preview this in your
browser.
| | 04:03 |
When you roll over the comments box,
you'll see your tool tip appears here on
| | 04:06 |
the right side of the screen that says,
we welcome your feedback.
| | 04:11 |
Just to show you as I had mentioned the
data placement controls where that's
| | 04:14 |
going to appear.
If I said something like top instead of
| | 04:18 |
right and save that and put that in the
browser.
| | 04:22 |
When I roll over my comments now, it's
going to appear on the top of that box.
| | 04:26 |
But I definitely think it works better on
the right side because there's space over there.
| | 04:29 |
Alright, so tool tips are useful built-in
bootstrap functionality that you can
| | 04:34 |
incorporate in a number of areas on your
website but a forum might be a great
| | 04:38 |
place to put them.
| | 04:41 |
| | Collapse this transcript |
| Using collapse to enhance form usability| 00:00 |
At this point, our form is looking pretty
good.
| | 00:02 |
Things seem to be aligned.
We have a nice little tool tip that
| | 00:05 |
appears by the text area.
But the next part of this form that I'd
| | 00:08 |
like to address is down towards the
bottom of the page, where I have a check
| | 00:11 |
box asking you to sign up for the
newsletter.
| | 00:14 |
And if you do, then you need to enter
your email address.
| | 00:18 |
So just to take a quick peek at what I'm
talking about.
| | 00:22 |
Down here at the bottom, if you check
this, then you should fill in your email
| | 00:25 |
address right here.
What I'd like to have happen now is, I'd
| | 00:29 |
like to have just, subscribe me to the
newsletter.
| | 00:33 |
And if you check that off, then, and only
then, I'd like to have the email box
| | 00:37 |
appear on the page.
So that will be pretty cool.
| | 00:42 |
We have a little animation going on there
with something opening up on the page.
| | 00:45 |
So that's what I am going to code next in
this video.
| | 00:50 |
So if you scroll on down the page here,
we're going to go on down here to line 50ish.
| | 00:56 |
And that is the label with the class of
check box followed by our input name of subscribe.
| | 01:04 |
And then our text, subscribing to the
newsletter, followed by the label with
| | 01:07 |
your name and then the input here.
So, here's what we're going to do, to
| | 01:12 |
change this around a little bit.
First of all, around your email here, i'm
| | 01:17 |
going to wrap a div.
So, I'm going to give this a div with an ID.
| | 01:22 |
And that ID can be anything that you
want.
| | 01:25 |
Of course, it's an ID, so it should be
unique to the page.
| | 01:28 |
I'm just going to call mine email.
And I'm going to give this a class.
| | 01:34 |
And my classes are going to be collapse,
and in.
| | 01:40 |
After the input here, I'll go ahead and
I'll close my div.
| | 01:46 |
And then I'm going to just line up my
code here, a little bit.
| | 01:49 |
Make it a little easier to read.
Alright, so collapse and in for these
| | 01:53 |
classes, what does that mean?
Well, collapse of course, is the
| | 01:57 |
Bootstrap class that will allow things to
expand or contract.
| | 02:02 |
And in means that this is going to start
closed, as opposed to open.
| | 02:08 |
Alright.
So that's the first part here.
| | 02:10 |
Now that I have that div in place that
goes around both the label for the email
| | 02:14 |
and the email box itself.
I'm going to add to the check box.
| | 02:19 |
Because when we check the check box, we
want something to happen.
| | 02:22 |
So we're going to need something here.
And it's more of those data hyphen
| | 02:27 |
attributes, data hyphen toggle equals
collapse.
| | 02:34 |
And a data hyphen target of #email.
So, once again, data-target of #email, of
| | 02:43 |
course those means an ID of email, and
down here, I have an ID in my div.
| | 02:50 |
So that's the easiest way to connect
these things, is by IDs, because there's
| | 02:53 |
only one on the page.
There's no room for confusion.
| | 02:57 |
So the last thing that I want to do here
is I need to add a little bit of
| | 03:00 |
JavaScript in order to make this
completely function.
| | 03:05 |
Right here underneath the JavaScript for
my tool tip, I can add a dollar sign,
| | 03:09 |
just like this, and what goes here inside
of these parentheses once again is some
| | 03:13 |
kind of CSS selector.
And this is the selector when it's
| | 03:18 |
clicked or hovered over or whatever it
happens to be, this is going to trigger
| | 03:22 |
something to happen, in this case the
collapse.
| | 03:27 |
So, I am simply going to work with a
class of collapse.
| | 03:34 |
And then I'm going to put after this, dot
collapse.
| | 03:39 |
Couple of parentheses.
That's all I need to do.
| | 03:43 |
And if you save that.
And you open that on up inside of your
| | 03:47 |
browser window.
What you'll see here is your feedback
| | 03:50 |
form and there's your check box for
subscribing to the newsletter.
| | 03:54 |
And when you check the check box, then it
will open up to your email here on the bottom.
| | 04:00 |
And, uncheck that.
And it will contract again.
| | 04:05 |
You might notice a little twitch in this
form as I check the newsletter here, and
| | 04:10 |
uncheck it you see the whole form
shifting back and forth.
| | 04:14 |
The reason that is happening, watch over
here it's the scroll bar on this page
| | 04:18 |
that is appearing and dissapearing.
That is the reason why the scroll bar is
| | 04:22 |
shifting everything over a little bit as
I check and uncheck that box.
| | 04:26 |
If you're on a taller monitor than the
one that I'm using, you may not see that
| | 04:29 |
shift at all.
So just keep that in mind that if you're
| | 04:33 |
using this kind of functionality for
collapse where you make the page a little
| | 04:36 |
bit longer.
And you don't have a scroll bar but then
| | 04:40 |
you add one, you may see a little twitch
in your form and that's what it's from.
| | 04:44 |
Alright.
So collapses really, it is a really
| | 04:47 |
interesting use of collapse.
We saw a collapse before back in, Up and
| | 04:51 |
Running With Bootstrap when we made some
accordion panels.
| | 04:54 |
In this case, we put it to work here.
the same kind of functionality but now
| | 04:58 |
we're applying it to a form.
And i think that the addition of the
| | 05:01 |
collapse here makes the form a little bit
more usable because you don't have to
| | 05:04 |
enter your e-mail address unless you want
to subscribe to the newsletter.
| | 05:09 |
| | Collapse this transcript |
| Adding characters to form fields| 00:00 |
The last thing that I'd like to address
with this feedback form is the Twitter
| | 00:03 |
username field here at the top of the
page.
| | 00:06 |
It's not terribly attractive.
The outside might be something that you
| | 00:10 |
want to have in front of your Twitter
username just so that people know that
| | 00:13 |
they're just typing in that username.
They don't have to put the at sign and so forth.
| | 00:18 |
So it might be a useful thing to include,
but it's just not very attractive looking.
| | 00:22 |
Fortunately, Bootstrap has a way that we
can format this a little bit to make that
| | 00:26 |
a little bit more attached, at least to
the form field that's next to it.
| | 00:31 |
And it'll make it a little bit more
attractive.
| | 00:33 |
So, if you've been following along with
me, it's still the same HTML page that
| | 00:37 |
we've been working on.
If you haven't been following along with
| | 00:41 |
me, you can go grab this page out of your
exercise files.
| | 00:44 |
This is 3-4-character.html.
And if you scroll on down here to around
| | 00:49 |
line 21, this is the Twitter username
here.
| | 00:54 |
And you'll notice that I have this
character in front of the field which is
| | 00:57 |
what you type in to enter your Twitter
username.
| | 01:01 |
So, here's what I need to do.
Just after the label for the Twitter
| | 01:05 |
username, I'm going to add another DIV.
And this will have a class of input-prepend.
| | 01:10 |
In other words, we're going to be putting
something in front of the field.
| | 01:17 |
Then we're going to Tab on over.
I'm going to put this @ on its own line.
| | 01:21 |
The input will come after that, and then
I will go ahead and close the DIV.
| | 01:27 |
Then around the at sign here, I'm going
to add a span tag.
| | 01:31 |
So, it's going to be span, with a class
of add-on.
| | 01:39 |
Then, the at sign and then a slash span.
So, we've added this DIV around the whole
| | 01:44 |
thing and we put a span around the at
sign here, and now when you save this and
| | 01:49 |
you put this into your browser.
You have a much more attractive treatment
| | 01:55 |
for that at sign, or any other character
that you need to put in front of a field here.
| | 02:00 |
Whether it, you know, it's a dollar sign.
Or something else that might be
| | 02:03 |
appropriate to be putting on the front of
that blank.
| | 02:07 |
Now, it looks at least connected with the
field that's next to it.
| | 02:11 |
And this is definitely a much more
attractive layout.
| | 02:14 |
There's several more of these kinds of
tricks in the Twitter Bootstrap documentation.
| | 02:19 |
If you go to www.getboostrap.com, you can
read up on other ways that you can make
| | 02:23 |
characters, and buttons, and things,
fused with form fields.
| | 02:27 |
There's quite a few of these tricks that
are on the website and and they're worth
| | 02:31 |
trying out.
So, definitely go visit
| | 02:33 |
www.getbootstrap.com so that you can get
some pointers and tips for similar kinds
| | 02:37 |
of tricks with buttons and with other
characters.
| | 02:41 |
| | Collapse this transcript |
| Search form layouts and styling| 00:00 |
The last thing I wanted to show you is
how we can make a search box look kind of
| | 00:03 |
pretty using Bootstrap.
So, to start with here, this is the only
| | 00:07 |
thing that I have on this particular web
page.
| | 00:10 |
I've just got my standard sort of grid
place holder stuff here, the container,
| | 00:13 |
the row, and a spam 12, and then inside
of that I have a form, and the form
| | 00:16 |
contains two things.
It contains the input.
| | 00:20 |
And it contains a button.
So, if we just take a look at what we've
| | 00:24 |
got so far.
If we just go ahead and open that up in
| | 00:26 |
the browser, you'll see it's not terribly
attractive.
| | 00:29 |
I mean they don't line up next to each
other real well to start with.
| | 00:32 |
And it's kind of a boring looking search
box, so we might want to find some way of
| | 00:36 |
making that a little bit more attractive.
The best way to do this is up here in the
| | 00:41 |
input type of text, we're going to add a
class.
| | 00:46 |
And that class is going to have a class
of search hyphen query.
| | 00:51 |
And that's actually all you need to do.
If you just add the class with the search
| | 00:57 |
hyphen query, save that.
And put that back in your browser.
| | 01:02 |
Things are going to line up again.
Notice also that the search box has these
| | 01:05 |
lovely rounded outsides on it.
So, that's really quite attractive, but
| | 01:10 |
now it's kind of odd looking also in that
your search is rounded and pill like, but
| | 01:13 |
the search button next to it is still
kind of square looking.
| | 01:18 |
Just as we saw in the last video where we
attached that at sign to the Twitter
| | 01:22 |
username field.
You can do the same thing here with a
| | 01:25 |
search box.
I'm going to show you how to do that now.
| | 01:30 |
So, here's what we're going to need to
do, first of all in the form tab itself
| | 01:32 |
we're going to need to add a class.
Of form hyphen search.
| | 01:39 |
Then the next thing we going to want to
do is add another div and the div will
| | 01:44 |
have a class of input-append, just like
we kind of saw before.
| | 01:52 |
And the slash div is going to come after
the button.
| | 01:54 |
And what I'll do here is just a little
bit of tabbing to make these things line up.
| | 02:01 |
There we go.
Then, to the button itself, we can add
| | 02:04 |
some additional classes and so forth.
But this is the most simple thing that we
| | 02:07 |
need to do.
Just simply adding a class of form-search
| | 02:11 |
and then adding this div of input hyphen
append and wrapping that around both the
| | 02:15 |
input box and the button.
If you go ahead and save this and put it
| | 02:19 |
in a browser you'll see here now that my
search box is nicely attached to the
| | 02:22 |
search blank that's next to it.
That's kind of the default look for this.
| | 02:28 |
Now what we can do is attach any of the
other classes that we've seen in action
| | 02:32 |
to tweak the search box just a little bit
more.
| | 02:36 |
For example, we can change the size of
our search box, via class, just as we saw
| | 02:40 |
towards the beginning of this chapter.
I could give it a span 3, for example.
| | 02:46 |
Maybe I don't want the search box quite
that big.
| | 02:49 |
I could also change my button here, so I
can add some additional classes for my
| | 02:53 |
search button like button hyphen info
which makes our search button a lovely
| | 02:56 |
shade of light blue.
Go ahead and save that, and look at that
| | 03:01 |
in the browser, now we have a different
size search box, with a blue button next
| | 03:05 |
to it.
If I wanted the search box smaller, I
| | 03:09 |
could certainly make a span of 1.
Which would make a very small search box.
| | 03:14 |
In fact, that's sort of cut in half
there, doesn't it look like?
| | 03:17 |
So, maybe not quite that small, maybe
more like a span of 2.
| | 03:21 |
And open that up in the browser.
That's sort of more like your average
| | 03:24 |
search box size there.
And of course you can make your search
| | 03:28 |
box as big or as little as you want using
those span classes.
| | 03:31 |
So, this is a lovely treatment for a
search, lots of sites have search these days.
| | 03:36 |
Or, this type of treatment where you
have, a blank, and then a button next to
| | 03:39 |
it, this could be one of those Subscribe
boxes, for example, instead of Search,
| | 03:42 |
the button might say Subscribe, and that
would subscribe you to a newsletter also.
| | 03:48 |
So, this is a great pattern that you can
use.
| | 03:51 |
When you encounter these type of form
controls on your website.
| | 03:54 |
| | Collapse this transcript |
|
|
ConclusionNext steps| 00:00 |
Thanks so much for watching the course
today, I really appreciate it.
| | 00:04 |
And just wanted to give you a few tips
for keeping up with Bootstrap, this is
| | 00:08 |
the Bootstrap website, it's
getbootstrap.com.
| | 00:12 |
And if you take a look on through here,
there's some great documentation that's
| | 00:15 |
available to you.
We've really dug into a lot of the
| | 00:19 |
components and the JavaScript this
particular time as well as under the Base CSS.
| | 00:25 |
There's a whole section here on forms and
buttons that we really dug into as well.
| | 00:29 |
So, you can always come back here and
read up on the latest documentation for
| | 00:32 |
Bootstrap, whatever version that happens
to be.
| | 00:36 |
And that's always a great way to stay up
to date with what's the latest is with Bootstrap.
| | 00:41 |
The other thing you might consider doing
is taking a look at Joe Marini's course,
| | 00:45 |
CSS with LESS and Sass.
Bootstrap works with LESS.
| | 00:49 |
It's a way of centralizing its variables,
and so if you watch the LESS part of this
| | 00:54 |
course, That will certainly help you
become more proficient with Bootstrap.
| | 01:00 |
And you can centralize more styling, and
generally make your CSS a bit more sophisticated.
| | 01:05 |
So that would be another thing to try to
stay up with Bootstrap and to enhance
| | 01:09 |
your skills.
Finally, I just wanted to thank you all
| | 01:13 |
again for all of the feedback that I've
gotten on Up and Running With Bootstrap.
| | 01:19 |
And many of you had a great suggestion
which was to work more with forms in
| | 01:23 |
another video.
So I've done that here.
| | 01:27 |
I do listen to that feedback so please go
ahead and let me know what you think
| | 01:29 |
about the title.
And if there's something else that you'd
| | 01:33 |
like to see with Bootstrap I'd love to
hear about it.
| | 01:35 |
Feel free to let me know.
So thanks again and I'll see you in
| | 01:39 |
another video.
| | 01:40 |
| | Collapse this transcript |
|
|
