IntroductionWelcome| 00:04 | Hi, I am Jen Kramer. Welcome to
Up and Running with Bootstrap.
| | 00:09 | In this course I'll show you how to
download the Bootstrap framework and integrated CSS
| | 00:14 | and JavaScript into your website.
| | 00:16 | Then we'll cover Bootstrap's responsive 12-column
grid system, which makes web page layouts quick
| | 00:21 | to assemble but provides lots of flexibility.
| | 00:24 | We'll also look at the CSS styling that
comes with Bootstrap, including the right way to
| | 00:29 | override and tweak those
styles for your own sites.
| | 00:32 | We'll explore navigation systems that come with
Bootstrap, including tabs, pills, as well as pagination.
| | 00:39 | Finally, I'll go over some cool JavaScript
effects that come with Bootstrap, including
| | 00:44 | modal windows and a fun photo carousel.
| | 00:47 | So let's get started with
Up and Running with Bootstrap.
| | Collapse this transcript |
| Using the exercise files| 00:00 | Exercise files are available
to Premium Members of lynda.com.
| | 00:04 | Simply download the exercise files to your
computer and place them on the Desktop for ease of access.
| | 00:10 | The exercise files are
organized by chapter number.
| | 00:14 | Whenever an exercise file is available for
a video, you'll see a yellow overlay at the
| | 00:19 | bottom of the screen that indicates the
location and the name of the exercise file.
| | 00:24 | In most cases, there is a starting state HTML
file available to you in the exercise files,
| | 00:30 | as well as a completed state file.
| | 00:32 | The completed state file is located
inside the folder called Completed.
| | 00:36 | In a few videos, I've
given you some images to use.
| | 00:40 | Drag these images to the IMG folder
inside of your Bootstrap folder on the Desktop.
| | 00:46 | You'll be creating this Bootstrap folder in
the first few videos as you download Bootstrap
| | 00:51 | and start working with it.
| | 00:53 | Working with the exercise files
can add great value to the training.
| | 00:57 | However, if you don't have access to the
exercise files, you can still follow along with the
| | 01:02 | videos, often using your own files and
have a fulfilling learning experience.
| | Collapse this transcript |
|
|
1. Getting Started with BootstrapWhat is Bootstrap?| 00:00 | Bootstrap is a front-end framework created by a designer
and developer at Twitter to streamline building websites.
| | 00:06 | Front-end refers to the
client side of a website.
| | 00:10 | That's the part of a website
that's displayed in the browser window.
| | 00:13 | A framework is a bunch of code that's been
written for you already, which you can use
| | 00:17 | to build your website.
| | 00:19 | You can find Twitter Bootstrap
at getbootstrap.com.
| | 00:23 | Pre-written code, that sounds
like a terrible idea, doesn't it?
| | 00:27 | It sounds like you can't adapt it, you can't
make it match your Fireworks or your Photoshop
| | 00:32 | design, you have to
stick with what you're given.
| | 00:34 | A site built with Bootstrap must be immediately
recognizable like the default WordPress, Joomla!,
| | 00:39 | or Drupal templates and
themes are instantly recognizable.
| | 00:43 | Fortunately, that's not true.
| | 00:45 | Think of Bootstrap as a productivity tool
for building websites quickly and easily.
| | 00:50 | Bootstrap supports both adaptive layouts
and responsive design, depending on which type
| | 00:56 | of grid you choose.
| | 00:58 | You can also pull out the responsive elements
and build a standard website, if you prefer that.
| | 01:04 | If you're not a designer, you'll love how
many elements of the web page are designed
| | 01:07 | for you plainly and simply, so you can make
a reasonable looking website quickly without
| | 01:13 | worrying about all of the design details.
| | 01:17 | Designers will love how easily they're able
to override colors and styles in Bootstrap,
| | 01:21 | so you can leverage layouts and JavaScript
effects but tweak the CSS to make the page
| | 01:25 | look exactly the way you want.
| | 01:28 | Bootstrap itself comes with CSS, JavaScript,
and a few optional image files that you can
| | 01:34 | use on your website.
| | 01:36 | A 12-column grid system is available, as
well as multiple navigation systems, including
| | 01:41 | drop-downs, tabs, pills, and buttons, as well
as cool JavaScript effects, like modal windows
| | 01:49 | and image carousel and much more.
| | 01:52 | You can find examples of websites built
with Bootstrap at builtwithbootstrap.com.
| | 01:58 | Next, let's download Bootstrap
and examine its file structure.
| | Collapse this transcript |
| Downloading and unzipping Bootstrap| 00:00 | Now that you know what Bootstrap is, let's
download it and get started working with it.
| | 00:04 | So to do that, go to getbootstrap.com, and
you should see a web page that will come up,
| | 00:10 | fairly similar to this one.
| | 00:12 | Today I am working with Bootstrap 2.1.1,
which was released on September 4th in 2012.
| | 00:19 | It's possible that you'll be working with
a later version of Bootstrap, but it should
| | 00:23 | be fairly similar to this in terms of there's
a great big huge honking button on the homepage
| | 00:28 | that says Download Bootstrap,
and that's what we need right now.
| | 00:31 | So if you go ahead and click on this button
to download Bootstrap--I am going to go ahead
| | 00:35 | and save this file on down to my Computer and say OK--
it will go ahead and download Bootstrap for you.
| | 00:43 | And now if I go into my Computer and go to
my Downloads folder--Mac people you're going
| | 00:50 | to do something similar--and I'm going to
double-click on my bootstrap zipped file to
| | 00:56 | decompress it, and I'll have a
folder here called bootstrap.
| | 00:59 | What I am going to do is just drag that
right on out to my Desktop and close that window.
| | 01:06 | And if you open up the folder called bootstrap,
you should then see three folders inside of it,
| | 01:10 | one for CSS, one for images,
and one for JavaScript.
| | 01:15 | So in the next video, I will show you how to set up
a starting Bootstrap HTML document using Dreamweaver.
| | Collapse this transcript |
| Setting up a Dreamweaver site with Bootstrap files| 00:00 | Now that we've downloaded our copy of
Bootstrap, let's get started building our first HTML
| | 00:05 | web page inside of Dreamweaver.
| | 00:07 | I'm using Dreamweaver for this particular
course because I've worked with Dreamweaver
| | 00:11 | for a long time, and I'm familiar with it
as an environment for editing HTML and CSS.
| | 00:16 | You certainly don't have to use Dreamweaver
to accomplish what I'm going to show you here,
| | 00:20 | and in fact, we're going to be
working in code view most of the time.
| | 00:23 | You're welcome to use any sort of program
whatsoever that will allow you to edit HTML
| | 00:28 | and CSS files. That's what we'll be
doing for the most part in this course.
| | 00:32 | So I'm in Adobe Dreamweaver CS6, I'm in the default
designer view, as you take a look at the screen here.
| | 00:38 | So if you want to make your screen look exactly
like mine, over here at the top right there's
| | 00:44 | this item for Designer view. Make sure yours
is set to Designer view, and then here where
| | 00:49 | you see this thing called Business Catalyst,
I'm just going to go ahead and close that
| | 00:52 | whole tab group. We won't be using it in this
course, and I'd like to make a little bit
| | 00:56 | more room for my files which are down here
at the bottom, so I can see what's going on.
| | 01:01 | As always, when we start working with Dreamweaver, the
very first thing to do is to make a Dreamweaver site.
| | 01:05 | So I'm going to go ahead and do that now
by going to Site > New Site, and I'm going
| | 01:11 | to give this site a name. I'm going to call
it bootstrap, and I'm going to indicate where
| | 01:16 | my local site folder is located, and I can
do that by clicking on the folder icon here.
| | 01:21 | I'm going to go to my Desktop, and I'm
going to go to my bootstrap folder right here on
| | 01:26 | the desktop, and inside of that are those
three folders that we just downloaded from
| | 01:30 | getbootstrap.com, they're all present there.
| | 01:33 | Go ahead and say Select and then say Save,
and you should see those three folders now
| | 01:38 | show up over here on the side inside of the files,
paneled over on the right side of Dreamweaver.
| | 01:44 | The next thing, once we have the Dreamweaver site
established is to create a new HTML web page.
| | 01:50 | So to do that, go to File > New, and you get
this grid of options that you can choose from.
| | 01:58 | We're certainly going to build a blank page.
Don't be confused by the fluid grid layout.
| | 02:02 | This is a Dreamweaver-based fluid grid layout,
it has nothing to do with Bootstrap's grid
| | 02:06 | layout, which I'll be
covering in some later videos.
| | 02:09 | So we want just the blank page.
| | 02:11 | It's going to be an HTML page type, and then for
the layout, none of the layouts need to apply.
| | 02:16 | Over here for the doc type, make sure you
choose HTML 5, because that is what we will
| | 02:21 | be working with for Bootstrap, which is
designed to work with HTML 5, and then go ahead and
| | 02:26 | say Create, and you should see a
document very similar to this on your web page.
| | 02:32 | So first thing I'm going to do is change
my title from Untitled Document to
| | 02:38 | Up and Running with Bootstrap,
which is the title of the course.
| | 02:43 | The next thing you might want to take a look
at it is inside of your exercise files, I've
| | 02:48 | given you a tiny little bit here of extra code that
needs to appear inside of your Bootstrap document.
| | 02:54 | One thing is this line here, this meta tag,
this is a meta tag indicating that the viewport
| | 03:00 | starts with an initial scale of 1.0.
This is important in responsive design.
| | 03:04 | So we're going to go ahead and copy this by
doing Ctrl+C or Command+C to copy that particular
| | 03:10 | text from the document, and then just after
here, where it says meta characters set of
| | 03:17 | UTF-8, I'm going to Ctrl+V or Command+V to
paste that line of code right on into place.
| | 03:23 | The next thing I need to do is attach the
style sheets that I'll be using in this particular
| | 03:28 | document, and we can do that over here
through the Styles Palette which is located on the
| | 03:33 | right side of the screen. If you just hit
refresh, you should be able to see the Styles
| | 03:38 | Palette as it normally appears.
| | 03:40 | Down at the bottom of the Styles Palette
there is a link icon to attach a stylesheet, go
| | 03:45 | ahead and click that, and we're going to
browse for our CSS folder, and inside of that, you'll
| | 03:51 | find that there's actually four stylesheets
that are available to you, and you're probably
| | 03:56 | wondering what the
differences are between these.
| | 03:58 | So first of all, you'll see that there are two
sets of two, really bootstrap and bootstrap.min,
| | 04:05 | bootstrap-responsive and
bootstrap-responsive.min.
| | 04:08 | The differences here are the .min files are
what are called minimized they've been processed
| | 04:13 | so that all the space that is normally
present in a stylesheet file has been taken out, and
| | 04:19 | that will help the files download more
quickly, which is great when you're actually using
| | 04:24 | a production site, and you want to make sure
your file sizes are small as possible so that
| | 04:29 | mobile phone users have very,
very small files to download.
| | 04:32 | Since we're doing this in a development
environment, I'm going to link to the full version of these
| | 04:36 | stylesheet files in case we ever
want to go and take a look at them.
| | 04:39 | So we want the more human readable format.
| | 04:42 | So I'm going to link directly to just the
regular Bootstrap file here first, and I'm
| | 04:46 | going to say OK. Dreamweaver is going to
warn me that it's going to use a file path until
| | 04:51 | I've saved my document, which we'll save in just a
moment, so go ahead and say OK for that and OK again.
| | 04:58 | So this has gone ahead and attached
that bootstrap.css file to my document.
| | 05:04 | Right after that, we are going to attach the
second stylesheet, hit the browse button
| | 05:09 | here, and we want the
bootstrap-responsive stylesheet.
| | 05:12 | Make sure the bootstrap-responsive stylesheet
comes after the bootstrap stylesheet, because
| | 05:18 | in some cases, this bootstrap-responsive
stylesheet will override within the bootstrap stylesheet,
| | 05:23 | so the order does indeed matter.
| | 05:25 | Go ahead and say okay, it'll give you the
same message again about the file path, and
| | 05:30 | so now you can see that I have two lines of
code here, one calling for regular bootstrap.CSS,
| | 05:35 | one calling for the bootstrap responsive,
and to make that code a little easier, I'll go
| | 05:39 | ahead and save this now.
| | 05:40 | So go to File > Save, and I'm going to save
it right into the root of my website here.
| | 05:47 | I'm just going to call this index.html,
always a good named to call an HTML document, and
| | 05:52 | you'll see that the paths here inside of
Dreamweaver adjust accordingly and correctly to take
| | 05:57 | a look at those two stylesheets.
| | 05:59 | Before we leave the head of this document,
there's one last thing I'd like to add, and
| | 06:04 | this will come just after the CSS for the
bootstrap-responsive. I'm going to put an
| | 06:09 | extra space here inside of your exercise
files. You'll see that I have a little snippet
| | 06:14 | of code here, which is an HTML 5 shim.
| | 06:18 | This is a particular piece of JavaScript
that's available at Googlecode.com, it's designed
| | 06:24 | to help backwards compatibility
in Internet Explorer browsers.
| | 06:27 | This itself is not part of Bootstrap, but it
will help make your websites more compatible
| | 06:33 | with Internet Explorer, and you can definitely
just drop this right into your Bootstrap document
| | 06:38 | to improve backwards
compatibility, particularly with IE.
| | 06:42 | So go ahead and highlight that code, do a
Ctrl+C or Command+C to copy, and here inside
| | 06:48 | of Dreamweaver Ctrl+V or Command+V to paste
that on in, and you'll see that we have
| | 06:53 | that particular little
bit of code added as well.
| | 06:55 | This is an optional bit of code, but I'm
recommending that you add it. I think it'll save you some
| | 06:59 | hair pulling later on as
you do more with Bootstrap.
| | 07:03 | All right, so now if you scroll on down
your page a little bit you'll see that we have
| | 07:06 | a starting body tag and slash body tag, put
a few spaces in between those and just before
| | 07:12 | the slash body tag, we're going
to add some JavaScript declarations.
| | 07:17 | So the first one that we're going to include is the
script tag, and the source for that script tag will be
| | 07:27 | http://code.jquery.com/jquery-latest.js
and then a /script tag.
| | 07:41 | So this itself will load the latest
version of jQuery, which is a JavaScript framework
| | 07:47 | from the jQuery website.
| | 07:49 | So in order for this line of code to work,
make sure that you are on the Internet so
| | 07:53 | that it is able to
download this little bit of code.
| | 07:56 | If you're not on the Internet, you may want
to go to jquery.com and download the latest
| | 08:01 | version of jQuery creating that as a file
and linking that up here, but if you use this
| | 08:06 | specific line of code, even if jQuery continually
changes its version, the latest version whatever
| | 08:12 | it is will always be located here, and that's a
great way to keep your Bootstrap site up to date.
| | 08:17 | The next thing that we're going to add is a
line of code for the specific Bootstrap JavaScript,
| | 08:24 | and if you take a look over here in your
local files, really quickly you'll see once again we
| | 08:29 | have two versions of Bootstrap JavaScript.
| | 08:32 | One is bootstrap.js, and the other is bootstrap.min.js.
Once again, this is the minimized versions of the code.
| | 08:39 | You can see the difference between 55K for the bootstrap.js
and 25K for the minimized version of this.
| | 08:48 | So by using the min versions, you'll definitely
save some download time for mobile phone users
| | 08:54 | in particular, certainly,
those on dial-up as well.
| | 08:57 | So since we're not going to be taking a look
at JavaScript in great detail in this course,
| | 09:01 | I'm going to go ahead and link directly
to the min version of the JavaScript file.
| | 09:06 | So we're going to go ahead and
add that over here in Dreamweaver.
| | 09:10 | Once again, script src=, and I'm going to
hit this little Browse icon right here, go
| | 09:18 | to the JavaScript folder and pick the min
version of the JavaScript, and that will go
| | 09:23 | ahead and put that path in there
for me, close the tag, just like that.
| | 09:28 | So this basic document that I've put together here for
you is a great point for starting any Bootstrap web page.
| | 09:36 | It's got everything that you need here, it's
got the links to the stylesheets in the right
| | 09:39 | order, it has HTML5 shim for backwards
compatibility with Internet Explorer, it has a meta tag,
| | 09:46 | that's important for responsive design, and
down here, towards the bottom of the page,
| | 09:49 | we've linked to both of the JavaScript
pieces that are required to make Bootstrap work.
| | 09:54 | So once you have this in place, we're ready to
start building our first page with Bootstrap.
| | Collapse this transcript |
|
|
2. The Grid System in BootstrapUnderstanding the difference between default and fluid grids| 00:00 | Bootstrap ships with a 12-column
grid system that comes in two varieties.
| | 00:04 | I am on the Bootstrap website at getbootstrap.com,
and if you click on the Scaffolding tab here
| | 00:10 | on the top of the page, and you click on
the link on the left side for the grid system,
| | 00:15 | you'll see the Bootstrap's default grid system.
| | 00:18 | As shown here, this is
the default 940 wide grid.
| | 00:23 | It's designed to adapt somewhat via
adaptive layout to different screen widths.
| | 00:27 | The numbers indicate how
many columns wide each box is.
| | 00:31 | In the first row, there is only one column per
box, the next row is grouped into a few columns.
| | 00:37 | If you roll your mouse over each box here
in the documentation, there is a tooltip that
| | 00:42 | will come up to tell you how wide each box is.
| | 00:45 | That tooltip only works in the documentation,
it's not going to work on your live site.
| | 00:50 | Now you might be wondering, I just told you
this is a 12-column grid, but yet when you
| | 00:54 | look at this example here on the Bootstrap website,
you'll see that it's only 9 columns, why is that?
| | 01:01 | Well, the whole entire getbootstrap.com
site is built in Bootstrap itself.
| | 01:06 | The left column on this particular website
is three columns wide, leaving nine columns
| | 01:10 | left over for the main content area.
| | 01:13 | In this example, for how the grid HTML works,
it says that each row should comprise as many
| | 01:19 | columns as its parent.
| | 01:21 | So in this particular case, since the
parent is nine columns wide, the grid example is
| | 01:25 | also nine columns wide.
| | 01:27 | Now if you click on the link here for the
Fluid grid system--we'll jump down the page
| | 01:31 | to that particular example--the fluid
grid system is a true responsive grid.
| | 01:37 | Note that it is 12 columns wide, even though
this grid is embedded inside of the grid used
| | 01:42 | to layout the web page.
This responsive system is somewhat different.
| | 01:47 | Since it's built with the columns of a
percentage width instead of a fixed pixel width, you
| | 01:52 | need to keep all of the grids to 12 columns, or
100%, no matter where they occur on your page.
| | 01:58 | So this is an embedded grid of 12 columns
wide, even though it's inside of a larger
| | 02:04 | area that's 9 columns wide.
| | 02:06 | Now I just used two terms to describe these
grids, an adaptive layout, which is for the
| | 02:11 | default grid system, and responsive design,
which I'm applying to the Fluid grid system.
| | 02:17 | Responsive design was defined by Ethan Marcotte in
an article published at alistapart.com back in 2010.
| | 02:23 | Marcotte said that responsive design contains three
aspects: fluid grids, flexible images, and media queries.
| | 02:32 | A fluid grid is one that's built using a relative
unit of measure like ems or percent instead of pixels.
| | 02:39 | Flexible image means that the images resize
as part of the design, they generally display
| | 02:44 | larger on a big-screen, and they
scale down as the size reduces.
| | 02:49 | Media queries are also included in the CSS3
standard, and they allow you to define different
| | 02:54 | styles for different screen widths.
| | 02:57 | Adaptive layout is something of a precursor to
responsive design described on the alistapart.com
| | 03:02 | website in 2006, by Marc den Dobbelsteen.
This uses a fixed width grid instead.
| | 03:09 | In the particular implementation we're
looking at, the layout of the screen resizes once
| | 03:14 | specific pixel widths are reached.
| | 03:17 | This design may not fill the entire screen at
all times the way a fully-responsive layout does.
| | 03:22 | Many people, including Jeffrey Zeldman, argue
for a broader definition of responsive design,
| | 03:27 | one that will encompass
adaptive design and adaptive layouts.
| | 03:31 | However, as of this recording, these
two approaches are viewed as separate.
| | 03:35 | Bootstrap's default grid is the adaptive
layout, while Bootstrap's fluid grid lets you make
| | 03:40 | a truly responsive website.
So which grid is best?
| | 03:44 | Well, as always, it depends on
what your goals are for this website.
| | 03:48 | In general, many designers are leaning in the
truly responsive direction using percentage-based
| | 03:53 | layouts for their sites and images that resize.
| | 03:56 | However, if you're not comfortable with
that approach, you can certainly use the default
| | 04:00 | grid and its adaptive layout.
| | 04:02 | I will be working with the Fluid grid in this
course, as I feel that the advantage of working
| | 04:06 | with Bootstrap is the ability to make
responsive websites quickly and easily.
| | 04:10 | So we're going to take a look at the Fluid
grid system in a bit more detail in the next video.
| | Collapse this transcript |
| Exploring the fluid grid and creating new rows| 00:00 | Now that we are clear on the difference
between Bootstrap's two styles of grids, I'd like
| | 00:04 | to go into more detail into the fluid responsive grid
to show you how to mark up a page with some content.
| | 00:11 | So I have gone ahead and created this web
page in a previous video, and I am going to
| | 00:17 | go ahead and get started right here inside of
the body tag building out some of the grids,
| | 00:22 | so you can see how this works.
| | 00:24 | So in general, when you start a HTML web
page inside of Bootstrap, you are going to start
| | 00:29 | it with a div--actually, start this really in
pretty much any type of web page these days.
| | 00:33 | You will have some kind of wrapper that goes
around the entire web page, and inside of Bootstrap
| | 00:40 | that would be a div with a
class of container-fluid.
| | 00:47 | So I am going to start by going ahead and
putting that in place along with a closing
| | 00:52 | div down here at the bottom.
| | 00:54 | So that's going to encompass my entire
web page, that's the outside wrapper.
| | 00:58 | Then the next thing I am going to
add to this is the start of my row.
| | 01:02 | So if I have a div with a class of row-fluid,
this will indicate where this particular row
| | 01:12 | is going to start and stop.
| | 01:15 | So this is the very first part of the grid,
indicating where each row of that grid happens to be.
| | 01:20 | Inside of that, I might have another couple
of divs, so let's say I have a div with a
| | 01:27 | class of span3, in other words span3
columns and put something inside of it.
| | 01:34 | So we could say, for example, here's a
paragraph, here is a left column on this web page, and
| | 01:45 | end that particular div.
Then I can have a second div inside of this row.
| | 01:55 | So in this case, we have nine columns left over.
So we'll put in a span9.
| | 02:01 | So span1 through span12 are all the
classes that are available to you, and each one of
| | 02:06 | those classes indicate how many
columns it should expand over. All right!
| | 02:11 | So have a starting div here, we have an
ending div, and then inside of that we've got some text.
| | 02:17 | Here is the main content area of this web page.
| | 02:25 | I put just a simple paragraph inside of
each one of these divs here, but of course, you
| | 02:29 | could have quite an extensive set of markup
inside of each one of these particular divs,
| | 02:34 | the span of 3, and the span of 9. You could
have images, you could have headings, you
| | 02:38 | could have any kind of markup
that you want inside of those divs.
| | 02:41 | I am making this very
simple as the first example.
| | 02:43 | And if you're wondering where that slash div
went, it looks like it's moved off the page,
| | 02:47 | so I am going to get rid of
that little extra space there.
| | 02:50 | So now, if we go ahead and save this web page,
File > Save, I am going to go ahead and view
| | 02:56 | this inside of Firefox. I can do that here
in Dreamweaver by going to the Globe icon
| | 03:00 | on the top and saying Preview in Firefox.
| | 03:03 | You could certainly also preview this in
Chrome or Internet Explorer, whatever you like.
| | 03:08 | And you will see here that we have the
start of a grid on the website, we have our left
| | 03:12 | column, and we have a main content area.
| | 03:14 | The main content area doesn't look that
large because I only put in one sentence, but if
| | 03:19 | you put in a more extensive chunk of text, you would
see that it stretches all the way across the web page.
| | 03:23 | Now I can already hear my friend Matt Thomas
saying, okay, so you just put in a whole pile
| | 03:28 | of divs into that markup, Jen, and
that's not really semantically correct.
| | 03:33 | Can we actually use real HTML5 markup
and those HTML5 tags with Bootstrap?
| | 03:40 | And the answer to that is
yes, absolutely you can.
| | 03:43 | So let's take a look at a
way that we could do that.
| | 03:45 | I have done this with divs to start with
because pretty much everybody understand divs, and
| | 03:50 | there are number of you who are just
learning HTML5 at this point in time.
| | 03:54 | So one of the things that we might want to
have in our particular web page is we might
| | 03:59 | want to include a header
here at the top of our web page.
| | 04:02 | So inside of our div with a class of container-fluid,
I am going to go ahead and put in a header
| | 04:08 | for this particular web page, and in HTML5,
the tag that you use for this is the tag of
| | 04:14 | header, which I can use here as well.
| | 04:16 | So I can put in a tag of header, and
I can give this a class of row-fluid.
| | 04:24 | So, no extra div here in this particular
markup, we just have the start of the header, and
| | 04:29 | we have the finish of the header, and inside of
that I'm going to put in the title of my web page.
| | 04:36 | I might do that with an h1, and I am going
to set this to have a class of span12 because
| | 04:41 | I want it to go all the way across the web page.
This is my first Bootstrap page.
| | 04:50 | So there we have better
markup there for our header.
| | 04:53 | Let's go ahead and fix what we did before
with all of those divs in the second row here,
| | 04:58 | what is now the second row, we have
the div with a class of row-fluid.
| | 05:02 | This might be a section of your web page,
so we can change the div class of row-fluid
| | 05:07 | to a section with a class of row-fluid, and
then inside of that we have a left column,
| | 05:14 | and we have some main content.
There are tags that describe that as well.
| | 05:19 | It could be depending on what exactly is in
the left particular area that this might be
| | 05:24 | an aside, so an aside with a class of span3,
and it's possible and quite likely, in fact,
| | 05:33 | that whatever goes on the right
side of this page is an article.
| | 05:35 | So this might be the article tag, an
article with a class of span9/article.
| | 05:41 | So, now that I have got two rows here in
my particular web page, I have a header, and
| | 05:47 | I have a section, let's go ahead and save this
web page and see what it looks like in a browser.
| | 05:52 | Let's go ahead and say File > Save, and
let's go ahead and view this in Firefox.
| | 05:58 | So there's my heading, This is my first Bootstrap page,
we have our left column, and we have our right column.
| | 06:02 | So just because I have gone ahead and
established this web page as having a left column and
| | 06:08 | a right side with an article, doesn't mean that my
next row has to be laid out exactly the same way.
| | 06:14 | So I am going to go back to Dreamweaver here,
just to show you how that might work.
| | 06:18 | Perhaps I want to add a row that has a very large
left column and a very small right column.
| | 06:25 | So I am going to add a section, once again, to the class
of row-fluid, and inside of that, perhaps I have the article
| | 06:36 | on the right side, this time an
article with a class of span9.
| | 06:43 | I like the 9 and 3, I think that
looks good, but of course you could divide those
| | 06:48 | columns into whatever numbers you wanted to use.
Here is another article, /article and
| | 06:58 | maybe time we put the aside over on the
right side, so aside class of span3, so maybe we
| | 07:11 | have some more information about that
article over on the aside, and I can close that, and I
| | 07:19 | can close the section.
| | 07:22 | So once again, just go to File > Save, and
if I take a look at my web browser, you'll
| | 07:28 | see that now I have a second row of information.
| | 07:31 | We have our article on the left side of the
screen, and over on the right side, we have
| | 07:35 | more information about the article, that's
that aside that I put in. It's in this case
| | 07:39 | displaying in a right column.
| | 07:40 | Okay, so the very last thing that we ought
to do is add a footer to this web page.
| | 07:45 | So I hop back into Dreamweaver here, HTML5
gives us a great footer tag for doing this.
| | 07:51 | So in this case, footer will have a class,
and I am just going to give this a span of 12
| | 07:55 | so that it goes all the way across the page,
and maybe I have some text in here, Copyright,
| | 08:02 | and some bottom navigation, go here /footer,
whatever it happens to be that we want to
| | 08:11 | putting in for that particular footer.
| | 08:14 | And then you should make sure that your /div
is down here at the bottom. That /div closes
| | 08:19 | the container-fluid from all the way at the
top of the page, and we'll go ahead and save
| | 08:25 | this one more time, File > Save, preview
this in Firefox, and you'll see that we have a
| | 08:32 | footer that's in place at
the bottom of the web page.
| | 08:34 | Finally, you might be wondering about the
HTML5 markup that I just put into place, and
| | 08:39 | that is currently being used in
the web page that you just built.
| | 08:43 | Bootstrap as a system and a framework
indicates that it's mostly backwards compatible to IE7,
| | 08:49 | however, sometimes you are going to find
backwards compatibility issues with older browsers,
| | 08:55 | particularly if you're working with these new
HTML5 semantic tags that I just demonstrated,
| | 08:59 | like header, footer, aside, article, and others.
| | 09:03 | Modernizr is a JavaScript solution that can help
make HTML5 backwards compatible with older browsers.
| | 09:10 | It's not perfect, nor is it the only solution
to make this work, but it is a solution that's
| | 09:15 | widely used, and when you might want to try
if you find your Bootstrap work is producing
| | 09:19 | bugs in older browsers that
you wind up having to support.
| | 09:23 | You can find this by going to modernizr.com, and
this particular website will explain everything
| | 09:30 | that you need to know about Modernizr.
| | 09:32 | Modernizr itself is beyond the scope of this
course, but you can find it covered in other
| | 09:36 | titles at lynda.com. Modernizr is
indeed compatible with Bootstrap.
| | Collapse this transcript |
| Understanding fluid offsetting| 00:00 | So here's the web page that we
built in the previous video.
| | 00:03 | What I really wanted to have happen is I
wanted to have a left column of this page, and I
| | 00:07 | wanted to have a few articles
listed on the right side of the page.
| | 00:11 | Although this third row looks like I have
an article on the left side of the page and
| | 00:15 | more information about it over on the right,
| | 00:18 | it would obviously look a lot better if I had
the articles all lined up one after the other.
| | 00:23 | But for the second article, I don't really want
anything to appear over in the left-hand column.
| | 00:28 | So what can I do?
| | 00:29 | In Bootstrap, this is called offsetting,
and it's very easy to set up.
| | 00:33 | So I can set this up such that I can have
the two articles appear underneath of each
| | 00:37 | other and not have a left
column in the second row.
| | 00:41 | Remember that every row has to add up to 12.
| | 00:45 | There has to be 12 columns,
no matter what you do.
| | 00:48 | So offsetting is a way of allowing you
to have those 12 columns represented, even if
| | 00:53 | they're not all containing content.
| | 00:55 | So, I'm going to go back to Dreamweaver
here at the bottom of my screen, and I am going
| | 01:01 | to make a couple of quick changes to this page.
| | 01:03 | So just to make my articles stand out a little
bit more here in the second row, I am on line
| | 01:08 | 25, I'm going to add an h2, and I'm going
to call this Article title, and then down here
| | 01:18 | in the second row, I'm going to get rid of
this aside with class of span3 on lines 35 through 37.
| | 01:24 | I'm just going to make that go away.
I really don't want it.
| | 01:28 | And I'm going to clean up the markup here
in this particular article a little bit as
| | 01:32 | well, so it has an heading, another article, and
of course, underneath that would be a paragraph
| | 01:41 | with whatever text happens to
be contained in that article.
| | 01:44 | So, now what I need to do is inside of this
third row that you see here, we have a span9,
| | 01:50 | but we don't have the other
three columns accounted for just yet.
| | 01:54 | So, the way to do this is to use the offset.
| | 01:57 | So, I'm going to say
span9 offset3, all one word.
| | 02:03 | These offset classes, again, range from 1 to
12, and what they'll do is they'll add blank
| | 02:09 | columns on the left side of your particular row.
| | 02:13 | So, with an offset of 3, it's going to add
3 columns on the left side of the screen
| | 02:18 | that will be blank followed by the article, which
will occupy there 9 columns on the right side.
| | 02:24 | So I am going to go ahead and save this
page, File > Save, and I put this into Firefox.
| | 02:31 | Now you can see that I have a left column on
this web page, and I have the two articles
| | 02:35 | that are appearing underneath.
| | 02:37 | So all those line up a whole lot better on the
page, or it looks a whole bunch better than it did before.
| | 02:41 | I may also want to do
something with this copyright.
| | 02:45 | Right now the copyright is located
down in the bottom of this web page.
| | 02:50 | It's got a span of 12 on it, so it
goes all the way across the bottom.
| | 02:53 | Perhaps what I really want to do is shorten that up
and have it appear just on the right side of the page.
| | 02:58 | I can do that also with offsets.
So I go back to Dreamweaver.
| | 03:03 | Down here on the bottom rather than a class
of span12, what if I did a class of Span2,
| | 03:07 | and I did an offset of 10 and then
down here on the bottom, I could put in a
| | 03:15 | copyright symbol under Insert > HTML > Special >
Characters > Copyright, and then I could put
| | 03:25 | in some actual text here, 2012 lynda.com?
Go ahead and save that. So File > Save.
| | 03:36 | And now when I go back to my Firefox, and
I Refresh my web page, you'll see that I've
| | 03:40 | got the copyright statement is now
appearing over towards the right side of the screen,
| | 03:45 | exactly the way that I want it to.
| | 03:47 | So in this particular video, we have taken a
look at the offset property inside of the grid.
| | 03:51 | This allows you to have a row with all
12 columns accounted for even if not all
| | 03:57 | 12 of those columns are going to
contain some kind of content.
| | Collapse this transcript |
| Nesting with fluid grids| 00:00 | On occasion, you may want to segment a portion of
the grid that you're working with into smaller pieces.
| | 00:05 | For example, here's the web page that we built
so far in this particular chapter, and inside
| | 00:11 | of the Content area, maybe we'd like to
have two information boxes appear side by side,
| | 00:16 | underneath the two articles that are present.
| | 00:19 | Unfortunately, since that particular part
of the web page has a span of nine, in other
| | 00:24 | words nine columns, I can't make two evenly-sized
boxes, because one will be four columns
| | 00:30 | wide and one would be five columns wide.
| | 00:33 | However, there is another
approach that we can take to this.
| | 00:36 | We could nest another row inside of the row
so that we would have 12 columns to work with
| | 00:42 | and then divide those 12 columns
into 2 pieces of 6 columns each.
| | 00:47 | This is called a nested
row inside of Bootstrap.
| | 00:50 | So I'm going to go ahead and
implement one of these now.
| | 00:53 | If you go back into Dreamweaver and open up
your HTML web page, and I'm going to scroll
| | 00:59 | on down past that second article here,
and I'm going to add some more code.
| | 01:03 | So I'm going to add this as a section with
a class of row fluid, and I'm going to put
| | 01:14 | in a div with a class of span9 offset3,
and let me just close those before I
| | 01:24 | lose track of those two particular tags.
| | 01:28 | So if I went ahead and put it in my boxes
here, at this point we could have one that
| | 01:33 | was four columns wide and
one that was five-sized columns.
| | 01:35 | But I want are two evenly-sized boxes.
| | 01:38 | So to do that, I'm just going inside div
with a class of span9, offset3, I'm going to
| | 01:44 | go ahead and add another row.
| | 01:47 | So inside of this div, I'm going to go ahead
and add another div with a class of row-fluid,
| | 01:54 | just exactly the way we've done before, and then inside of
that particular div I'll put in my two information boxes.
| | 02:06 | So I could put in here a div with a class
of span6, and inside of that I can put an h3,
| | 02:20 | and we'll call that Info Box 1, and
perhaps I want an image to appear here.
| | 02:28 | So I gave some images with the exercise files, you
should have copied those into your images folder.
| | 02:34 | So I can go ahead and add those here,
image source, and I can browse for those files.
| | 02:43 | So inside of my images folder, I have art1,
and I could put in a paragraph of information.
| | 02:52 | Here is some text about the picture, and I'm
just going to copy this one little chunk of
| | 02:59 | code here, this div with a class of span6,
I'm just going to do a Ctrl+C to copy it, and
| | 03:05 | right after that /div, I'm
going to paste that on in place.
| | 03:11 | So we have Info Box number 2, and
it will be art2 instead of art1.
| | 03:17 | So now we've gone ahead we've added an
additional row to our grid, inside of that row we've
| | 03:23 | nested another row, and so we have to make
sure all of those divs are closed and everything
| | 03:29 | is looking good, go ahead and do a File > Save,
and now when you take a look at this inside
| | 03:35 | of Firefox there's our two images with the
text underneath, and we have our two articles
| | 03:41 | that appear on the top.
| | 03:42 | This is a great opportunity to show you the
responsiveness of the Bootstrap grid as well, at this point.
| | 03:48 | Right now my browser window is maximized so
it's occupying the full width of my particular
| | 03:53 | screen in a very typical desktop configuration.
| | 03:57 | If I resize my browser window slowly--I'm
just going to grab the corner here and drag
| | 04:04 | it on over--you'll see that my images are
in fact actively resizing. That's part of the
| | 04:09 | definition of a responsive website. You'll notice
that the grid is resizing as well, continuously.
| | 04:15 | You don't see it chunking as you move
in to move the corner here, and it
| | 04:21 | stays the same until it suddenly jumps to
the next position. That would be an adaptive
| | 04:25 | layout, that would sort of jump in between
different sizes, but a responsive design should
| | 04:30 | be continuous and smooth as you can see
that this one is. And as I continue to go here,
| | 04:37 | you'll see that the grid continues to adapt,
so what you see going on here is at the very
| | 04:42 | top of the screen, you see the left column
where we had a span3 and the article with
| | 04:47 | a span9, you see that those are actually
stacked on top of each other, then underneath we had
| | 04:53 | an offset of 3 with a span of 9 for
those articles and for these info boxes.
| | 04:58 | So you see here, that there's still some
space over on the left-hand side, that's why they
| | 05:03 | are not lined up completely, and as I start
to drag this on over a little bit further,
| | 05:08 | you'll see that we continue to resize according
to the page, until we reach some final amount here.
| | 05:14 | Notice that those images are continuing
to resize as well, and if I scroll on down the
| | 05:19 | page, you can see that--I think I've
probably gone past the maximum here a little bit--
| | 05:24 | but you can see that everything is appearing
stacked on top of each other, which is the way that
| | 05:29 | we would expect this grid to respond.
| | 05:31 | So now we've taken a look at the three critical
aspects of this grid and how they work together,
| | 05:38 | including the actual grid itself and how we
create any rows in it, and we've taken a look
| | 05:42 | at fluid offsetting--so the concept of
having some items shifted over a bit on the page--
| | 05:48 | and finally, we've seen how we can nest a row inside
of another row to achieve even finer control on that grid.
| | Collapse this transcript |
| Exploring Bootstrap media queries and device-specific styling| 00:00 | One of the last things you might want to do
working with your grids in responsive design
| | 00:04 | inside of Bootstrap is you may wish to have
some particular parts of the layout visible
| | 00:10 | only on a desktop or visible only on a tablet,
visible only on a phone, or you may want to
| | 00:15 | hide on one of those devices, and Bootstrap
includes some classes that will allow you
| | 00:20 | to do exactly that.
| | 00:21 | I am at getbootstrap.com, and I'm under the
Scaffolding tab under Responsive design, and
| | 00:28 | if you'll just scroll on down here a little
bit on this page, you'll see a very useful
| | 00:33 | chart here under Responsive utility classes.
| | 00:36 | So this explains to you exactly how these
particular classes work and what particular
| | 00:42 | devices using those classes will produce content
that's visible or invisible on certain devices.
| | 00:49 | We're going to put those to
work here in just a second.
| | 00:51 | So, what I would like to do is I'd like to set
up a row on the web page that we've been working
| | 00:56 | on so far, and I'm going to have it set up
such that I'm going to have some text that's
| | 01:02 | going to show up only on certain devices,
and the important part to remember about this
| | 01:07 | is the way that these
particular CSS classes work.
| | 01:10 | First of all, the big hint here is these
are CSS, so they are testing the width of the
| | 01:18 | window of the browser, they are not
actually testing the device, which is something very
| | 01:25 | different that actually comes over as part of the
header in the request process for getting web pages.
| | 01:31 | This is just testing the width of the screen,
so it's calling things phone, tablets, and
| | 01:35 | desktops, but just by making your screen wider
or making your screen narrower, you'll be able
| | 01:42 | to simulate phones, tablets, and
desktops, and they will work just fine.
| | 01:47 | So again, remember that phone, tablet, and
desktop actually refer to specific widths of
| | 01:53 | the screen, and those widths are detailed right
here. Phones are 767 pixels and below, tablets
| | 01:58 | are 768 pixels to 979 pixels, and desktops are
the default, something wider than 979 pixels.
| | 02:06 | So inside of Dreamweaver, if you scroll it
down to just before the footer here--let's
| | 02:12 | go ahead and add another part of this web
page. I'm going to add a section with a class
| | 02:18 | just as we've been doing all along here of
row-fluid, and inside of here I'm going to
| | 02:26 | add three divs, so I'm going to say div with the
class of span4. This is visible on the desktop.
| | 02:40 | I'm going to add a second
div with the class of span4.
| | 02:47 | This is visible on a tablet, and then finally,
a div with a class of span4, this is visible
| | 03:00 | on the phone, okay.
So we've got these all set up.
| | 03:04 | Now what I'm going to do is
I'm going to add classes here.
| | 03:08 | So in addition to this class of span4, if
you just put a space, that will allow you to
| | 03:11 | play more than one class per particular
HTML tag, and I'm going to say visible-desktop,
| | 03:20 | on the second one here we'll say visible-tablet,
and on the third one here we'll say visible-phone.
| | 03:32 | So go ahead and save that, and now when I
go to Firefox to preview this page, down here
| | 03:40 | at the bottom you'll see
this is visible on the desktop.
| | 03:43 | As I make the screen smaller, and I pull it
over a little bit, you see that text has now
| | 03:52 | changed to This is visible on the tablet, and
now as I pull the screen even further over,
| | 03:58 | and it resizes again, you'll see down here at
the bottom it says This is visible on the phone.
| | 04:03 | So that's the way this particular classes work.
| | 04:05 | The hidden classes work very much the same
way, and you can give those a try on your own.
| | Collapse this transcript |
| Adding a hero unit| 00:00 | A hero unit is a big area usually spanning the
width of a web page that intends to draw user attention.
| | 00:07 | For example, I'm looking at the lynda.com
homepage, and this site is not built with
| | 00:11 | a Bootstrap framework, but if it was, this
particular area at the top of the page where
| | 00:16 | you see the text here and the video over
on the side, this would be considered a hero
| | 00:22 | unit, and we're going to try implementing
one of these in the new document that I'm
| | 00:27 | starting for this particular video.
| | 00:29 | So if you go to the new document that I've
given you in your exercise files, open that
| | 00:35 | up, we're going to go ahead and add
a hero unit to this particular page.
| | 00:39 | So, we're starting from the very beginning
of a Bootstrap document here. So as we've
| | 00:44 | done before, we're going to start by
adding a div with a class of container-fluid
| | 00:51 | to have that big wrapping div that goes all
the way around the web page, and I'll close
| | 00:55 | that down here at the bottom.
| | 00:58 | And then just as we've been doing all along,
we have to start a row, so I'll have a div
| | 01:03 | with a class of row-fluid and a slash div
down here, and then in between that I'm going to
| | 01:14 | go ahead and put them in my hero unit.
| | 01:15 | Now, in this particular page, the hero unit is really
functioning as a big header at the top of the web page.
| | 01:21 | It's the big thing that catches your attention,
so I'm going to use the header tag from HTML5,
| | 01:28 | and I'm going to give this a class of span12,
because I want it to go all way across the
| | 01:33 | page, and I'll go ahead and close that header
down here at the bottom. I'm going to go ahead
| | 01:39 | and add some text to this.
| | 01:41 | In your exercise files on your desktop,
you'll find a text document that has the copy in
| | 01:50 | it that I'm going to use, so this will be
the Roux Academy 2012 Art Conference, so I'm
| | 01:57 | going to start by pasting that on in, and I'm
going to put that in h1 tag, and then following
| | 02:06 | that, I'm going to put in a bit more of a
description, so I am going to put in a paragraph tag, and
| | 02:13 | I'm going to follow that up with this text,
right here, which I'll go ahead and highlight,
| | 02:17 | Ctrl+C or Command+C to copy it, Ctrl+V or
Command+V to paste that into the web page,
| | 02:24 | and /p to end that paragraph.
| | 02:27 | And then I'm going to follow that up with a
paragraph and a link, href. I'm not going
| | 02:34 | to link this anywhere, because this is just
one page of the website. Obviously, you'd put
| | 02:38 | a link in there if you're doing this for real,
and I'm going to put in a learn more at the
| | 02:43 | end of all of this.
| | 02:44 | So, if I just save what I have so far--File >
Save--and I open this up in my web browser
| | 02:49 | by going to the globe here and saying
Preview in Firefox, you'll see that we have a page
| | 02:55 | with a header and some text in the Learn more
link. It's not really anything exciting yet.
| | 03:00 | It's not anything that we haven't
already done in some of the previous videos.
| | 03:03 | All right, so now that that's in place,
let's go ahead and turn this into a hero unit, and
| | 03:09 | the way that we do that is after the
span12 we can add the class of hero-unit.
| | 03:16 | So once again, if you save that--Ctrl+S or
Command+S to Save--and bring up your web browser
| | 03:21 | and view it in the browser, you'll see that
immediately this has now been formatted very nicely.
| | 03:26 | It's got a screen black box around it, the text
is nice and large, it's definitely attention grabbing.
| | 03:32 | One other thing you might want to add to
this would be a picture. You can certainly
| | 03:37 | add an image to this very easily. If I hop
back into Dreamweaver, and I go ahead and
| | 03:42 | add let's say just after this header right here,
I can put an image source, and in your exercise
| | 03:51 | files you'll find that there was an image
in place that you can go ahead and use for this.
| | 03:59 | Be sure to give it an alt tag always.
| | 04:07 | Actually, before we close it, let me put in
one more thing, a class of pull-right. And the
| | 04:16 | class of pull-right is a utility class. There's
actually a pull-left, and there is a pull-right.
| | 04:23 | basically, these classes are designed to
float an image left or right or anything else for
| | 04:28 | that matter, other elements on your web page,
and so if I go ahead and save what I've got
| | 04:33 | so far--Ctrl+S or Command+S to Save--and if
I refresh this in Firefox, and you take a
| | 04:39 | look, there's my nice big image here
to complement what I've done so far.
| | 04:44 | The last thing that I want to do here to
make this look like a real hero box is deal with
| | 04:48 | that link to learn more, and I want to cover
buttons in much more detail in a later video,
| | 04:55 | but for now in Dreamweaver, if you happen
into the href tag here, we're going to go
| | 05:03 | ahead and assign three classes.
| | 05:06 | So a class of btn or button, btn-primary,
which controls the color of the button actually,
| | 05:15 | and I'm also going to add btn-large,
which will make it a very large button.
| | 05:21 | So, once these three classes are in place,
Ctrl+S or Command+S to save, and off to Firefox,
| | 05:27 | go ahead and refresh, and you'll see that
we have a very buttony looking Learn more link,
| | 05:32 | even though that is just a
regular old href type of thing.
| | 05:36 | The styling that we've applied with
Bootstrap gives it a very nice look for the button.
| | 05:42 | So hero units are a great way to set off your
homepage to really draw the user's attention
| | 05:47 | to the website, make users aware of what's
the most important thing on the web page.
| | 05:52 | In this case, I've marked it up with a
header tag. It certainly doesn't have to be marked
| | 05:55 | up that way, it doesn't even have to occur
at the top of your web page. You could use
| | 05:59 | this hero unit anywhere you like within your
document, but I think I've suggested a nice
| | 06:03 | way of putting it to use, and you can go ahead
and give this a try on your own Bootstrap websites.
| | Collapse this transcript |
| Creating a thumbnail gallery| 00:00 | Thumbnail galleries are useful for displaying many
images on a web page where the image is the main focus.
| | 00:06 | You can usually click on these to
get a larger version of the image.
| | 00:10 | You can also use a thumbnail gallery for
displaying photos and text on a page in an organized manner.
| | 00:15 | Bootstrap does include some
markup for creating a thumbnail gallery.
| | 00:20 | And let's go ahead and take a look at that now.
| | 00:23 | So if you hop back into Dreamweaver again,
and we're going to scroll on down here, past
| | 00:27 | the div class row-fluids, in
this final/div right here.
| | 00:31 | I am going to go ahead and
add another row to my document.
| | 00:35 | So to do that, once again, I'm going to make
another div class of row-fluid, make sure
| | 00:45 | of course that you close that div
somewhere further down the page.
| | 00:49 | And inside of this particular div, the markup that
we're going to use for thumbnails is an unordered list.
| | 00:56 | So I'm going to go ahead and start that with
a UL, and I'm going to give that a class of thumbnails.
| | 01:01 | Of course, don't forget your /ul
somewhere down at the bottom.
| | 01:09 | Once that's in place, the next
thing we need to add is an li.
| | 01:14 | This li, I'm going to have three thumbnails
on my page. I want to have them all very next
| | 01:19 | to each other in three columns.
| | 01:21 | Since of course, we're working with rows and
a 12-column grid, that would indicate that
| | 01:25 | we need have a span of 4.
| | 01:27 | So we're going to have an li with a
class of span4 and of course our /li.
| | 01:36 | Now within that I'm going to have a picture, I'm
going to have a heading, and I'm going to have some text.
| | 01:41 | And all of those together
could be considered an article.
| | 01:44 | So we are going to use
the article markup for that.
| | 01:48 | So we're going to give it an article with a class of
thumbnail, and inside of that we'll put in our image.
| | 02:01 | Once again, we can browse for that.
| | 02:04 | The first one we're going
to put is Jonathan Ferrar.
| | 02:07 | So I'm going to go ahead and pick his
photo here, make sure to give it an Alt tag,
| | 02:18 | then we can go ahead and give this h3 for
markup, Jonathan Ferrar, followed by some text.
| | 02:28 | So the text is available to you in your
exercise files, here we go, the very first one.
| | 02:34 | Go ahead and copy that text--
Ctrl+C or Command+C to copy.
| | 02:38 | I'm going to put this is in as a paragraph and then
Ctrl+V or Command+V to paste that on in and /p.
| | 02:45 | So that's our first thumbnail there in our grid.
| | 02:48 | We have a single li; we have
an article inside of that.
| | 02:51 | If an article isn't appropriate to what you are
doing, you could use a div or any other tag
| | 02:56 | that is appropriate to nest inside of that li.
I've put in my image, my h3, and my p.
| | 03:02 | Now if you're doing this as a real thumbnail
gallery in which you just have pictures, you
| | 03:06 | don't have text following it the way I do
here, where I have article class of thumbnail,
| | 03:10 | you could use that as an href, that might
link to the larger version of the thumbnail.
| | 03:15 | The class for that href would still be Thumbnail,
but you wouldn't have any of the text following this.
| | 03:20 | The problem with doing that here in this type of
context is that h3 and p are block level HTML tags.
| | 03:28 | And you cannot nest the block level HTML tag
inside of an in-line element like the A tag.
| | 03:35 | So in this particular case, I'm using the article
class here for containing those block level elements.
| | 03:41 | I could certainly wrap an A tag around my image
if I wanted to do that to make my image clickable.
| | 03:45 | Okay, so now that I've got that unit in place,
so I'm going to go ahead and copy just highlight
| | 03:51 | those lines for the li and then Ctrl+C or
Command+C to copy, hit enter a couple times,
| | 03:57 | and Ctrl+V or Command+V to paste it in.
| | 04:00 | And then what I'm going to
do--get my indentation there.
| | 04:05 | Then I'm going to go ahead and make a
couple of changes for my next one of these.
| | 04:09 | Jennifer Jerome is the next one up here, so I'm
going to change the h3 here to Jennifer Jerome.
| | 04:15 | I am going to change my image source
here and go ahead and browse for Jerome,
| | 04:28 | change my Alt tag, Jennifer Jerome, and then
from the document here in your exercise files,
| | 04:37 | go ahead and copy the text here--Ctrl+C or
Command+C to copy and Ctrl or Command+V to paste--
| | 04:44 | and then finally, one more time, go ahead
and highlight that li, Ctrl+C or Command+C
| | 04:50 | to copy and then Ctrl or Command+V to paste it
in one more time, and we'll make these changes again.
| | 04:57 | So the last one that we're dealing here is
LaVonne LaRue, so go ahead and copy that text
| | 05:02 | here, paste that into my Dreamweaver
document, and put in LaVonne LaRue's right here.
| | 05:15 | And then, of course, we need to change the
image source and pick LaVonne LaRue from our
| | 05:25 | images folder and change the alt tag.
| | 05:31 | All right, so if we go
ahead and we say File > Save,
| | 05:36 | now we can go ahead and preview this in the
browser, preview in Firefox, and we have something
| | 05:42 | actually starting to look like a real web page.
| | 05:45 | There's that hero unit at the top which we
put together in the last video, underneath
| | 05:49 | you see we have three thumbnails, right there
one next to the other, some text that's placed
| | 05:54 | right underneath all of those.
| | 05:56 | If I make windows smaller, you can
see that these thumbnails do resize.
| | 06:00 | As we've discussed before, it is a responsive design
that the images resize as they're required to do.
| | 06:06 | And at some point, those images will cascade
down so that they're stacked underneath each
| | 06:11 | other as part of that grid
collapsing as the screen size gets smaller.
| | 06:16 | And as you can see, we can narrow that screen
all the way down to the 320-pixel range, which
| | 06:21 | is where a mobile phone would be.
| | 06:24 | And you can see that those are all
stacked underneath each other nicely.
| | 06:27 | So the Thumbnail Galleries are very, very useful.
You use them in a lot of different websites.
| | 06:32 | I've shown you a Thumbnail Gallery here.
| | 06:34 | We've had some descriptive
text following each of these.
| | 06:36 | You can certainly build a Thumbnail Gallery
with smaller thumbnails, with images that link,
| | 06:42 | and perhaps open a modal window or open in
some kind of pop-up window that would show
| | 06:46 | you a larger version of the picture.
All of that is possible with Bootstrap.
| | Collapse this transcript |
|
|
3. CSS OverviewExploring basic typography| 00:00 | Bootstrap comes with a number of built-in
styles which you can use in your site designs.
| | 00:05 | There's a few in particular
that you might find quite useful.
| | 00:08 | This is the latest HTML
document I'm using in this video.
| | 00:12 | This is schedule.html, and you see that
the page is kind of boring looking.
| | 00:18 | We've got a schedule. It's obviously a schedule.
It's divided very nicely into sections here.
| | 00:24 | We have a Monday schedule,
and we have a Tuesday schedule.
| | 00:27 | And it's easy to tell the hierarchy of the
information, but it's not terribly exciting to look at.
| | 00:32 | So we're going to add some styling to
this over the next chapter's videos.
| | 00:37 | There is some styling that's here by default,
| | 00:39 | just by virtue of being linked
to the Bootstrap style sheets.
| | 00:43 | So as you see, for example, the text is
displayed in Helvetica and Arial, as opposed to being
| | 00:49 | displayed in just Times New Roman, which is the default
if no styling is set for most web browsers anyway.
| | 00:55 | There's some basic styling
that's in place for the headers.
| | 00:58 | These Learn more items are links, which
you can see as you roll your mouse over them
| | 01:02 | they become underlined, and
they aren't the standard blue.
| | 01:05 | So there is some basic styling that's here.
| | 01:08 | It's just not a lot of styling,
and it is still a very boring page.
| | 01:12 | So let's see what we can do about
improving this inside of Dreamweaver.
| | 01:16 | So if you open up this document in
Dreamweaver and scroll on down to around line 20--
| | 01:23 | and line 20 is an introductory paragraph
that summarizing what's going to be happening with
| | 01:28 | this particular schedule-- it's just sort of the
big summary of everything that happens to be going on.
| | 01:34 | One of the things that we can do to make this stick out
a little bit is to assign it its own special class.
| | 01:40 | Bootstrap allows this
through something called Lead.
| | 01:44 | So this particular paragraph tag, I'm going
to give it a class of Lead, or possibly it's
| | 01:51 | Lead, because Leading is in fact added to this,
but I like to think of it as lead because
| | 01:55 | it is the leading paragraph,
but then I'm not a designer.
| | 01:58 | Anyway, if you go ahead and save this, so File >
Save, and you open this on up in Firefox,
| | 02:06 | and take a look at what you've done,
| | 02:08 | you'll see that that leading
paragraph has a little bit of a bigger text.
| | 02:12 | It does have a little bit of
more spacing between the lines.
| | 02:15 | It stands out a little bit
more than it did previously.
| | 02:18 | Something else that we can do this page--
it's a very simple thing to do--would be to add
| | 02:22 | some strong emphasis and
some emphasis to the page.
| | 02:27 | Strong of course, is the strong HTML tag
which many people think at is making things bold.
| | 02:32 | Remember, of course, it doesn't have to make things bold.
| | 02:35 | Bold is the way something looks, it doesn't
have to do with the actual markup of that
| | 02:38 | tag, which is to strongly emphasize something.
| | 02:42 | So what I'd like to do is I'd like to take
these names like Art in Full Color and Art
| | 02:47 | in Full Bloom, and I'd like to emphasize those
within the text by making them strongly emphasized.
| | 02:55 | And as for the artist names,
I'd like to emphasize those.
| | 02:59 | So for the first time in this course, I'm going
to switch over to Design View here in Dreamweaver,
| | 03:03 | because it's just faster.
| | 03:04 | I can go ahead, and I can highlight the
words here that I'd like to strongly emphasize,
| | 03:10 | and click the B button down here in the
bottom that actually adds a strong tag, as you can
| | 03:14 | see here in this little line of HTML tags.
I call it the breadcrumb, where you can see
| | 03:18 | that the strong tag has been added.
| | 03:21 | And then as we go down to little bit further
down the page, we'll see LaVonne L. LaRue.
| | 03:25 | I like to emphasize that, so I'm going to click the
I tag down here. Notice that gives it the emphasis tag.
| | 03:32 | And if we flip over to code view, you'll see that it
is has in fact put in that markup there correctly.
| | 03:37 | Both on line 22 here, it's strongly emphasized
Art in Full Color, and it's emphasized LaVonne L. LaRue.
| | 03:43 | If I just save that, and I take a look at
it again in Firefox, you'll see that those
| | 03:50 | words Art in Full Color are bold, at
least appearing bold here, and LaVonne L. LaRue
| | 03:56 | is emphasized here, and you can
see that in the form of an italic name.
| | 04:01 | I'm going to go through the rest of this document
and emphasize Art in Full Color where it appears.
| | 04:06 | I'm also going to emphasize Water in Art where
it appears in the second section of the page.
| | 04:11 | And I'm going to emphasize all of the
artist names that appear inside of this document.
| | 04:15 | And I'll see you in the next video.
| | Collapse this transcript |
| Including blockquotes| 00:00 | In the middle of the page we've been working
on between the two days of events, there is
| | 00:04 | a testimonial, it's right here on the page.
| | 00:07 | It's really, really easy to miss it,
because it's pretty much buried in all of the text
| | 00:12 | that's going on around it on the page.
| | 00:14 | Fortunately, Bootstrap has some built-in
styling that you can apply to a quote like this to
| | 00:19 | make your text pop out just a little bit more.
| | 00:22 | So if you hop on in Dreamweaver, and we're
going to scroll down the page here to line
| | 00:30 | 38, and you'll see that we have the quote,
"This is simply an amazing conference.
| | 00:36 | I'm inspired by it each year I attend."
| | 00:38 | That's a paragraph, followed by a
paragraph with a person who said it, Katie Cross, and
| | 00:44 | we're going to go ahead and
give this a little bit of styling.
| | 00:46 | It's not really marked up correctly anyway,
because since this is the quote from somebody,
| | 00:50 | it should really be
contained within a blockquote tag.
| | 00:53 | So we'll start with that, we'll give it a
blockquote tag and indent the quote, indent
| | 01:01 | the name of the person who said it,
and /blockquote will close that.
| | 01:07 | If we just do that, and we do a File > Save,
Ctrl+S or Command+S to save and then view
| | 01:13 | it in the browser, by Preview in Firefox,
scrolling down to see it, you'll see that
| | 01:19 | just by putting it in the blockquote tag and
marking it up correctly, the text is automatically bigger.
| | 01:25 | You'll see that we have a little border
over here on the side which makes it stand out
| | 01:29 | just a little bit, so that was a nice
treatment that you can add to that.
| | 01:33 | The next thing that I want to do
is deemphasize the person's name.
| | 01:37 | I want the quote to be more important, so
I'd like the text to be a bit bigger, and
| | 01:41 | the person's name to be a bit smaller.
| | 01:44 | And one of the ways that we can do that is
with a small tag. Small tag is one of these
| | 01:48 | tags that's come back in HTML5, and
we will go ahead and add that now.
| | 01:55 | So right around the name of the person here,
instead of just leaving it the way it is,
| | 01:59 | we can put in small tag and /small on the
other side of the person's name, and if we save
| | 02:05 | that, and we hop back to Firefox here and
Refresh the page, you'll see that the person's
| | 02:12 | name becomes, in fact small, and it's also a
lighter gray, scaled back in emphasis just a little bit.
| | 02:19 | You'll also notice that it puts a
character in front of that person's name, that long
| | 02:24 | em dash that's there. So the tilde that I'd
put in front of the name before when I typed
| | 02:28 | in the text really isn't necessary
anymore, so let's get rid of that.
| | 02:32 | In Dreamweaver we can just get rid of that
little character right there and then once
| | 02:37 | again Ctrl+S or Command+S to
save and refresh here in Firefox.
| | 02:42 | So the styling for that quote is a lot better.
| | 02:45 | One of the additional things that we can
add to the blockquote tag would be the ability
| | 02:49 | to float this quote left or right on the page,
and so in Dreamweaver, if in the blockquote
| | 02:55 | tag you go ahead and add a class of either pull-left
or pull-right, this will float your quote on the page.
| | 03:06 | So I'm going to go ahead and save that again.
I'm going to take a look at that in Firefox.
| | 03:12 | And so you see here that the quote is here,
and it is indeed floated left, it's caused
| | 03:18 | the heading here for Tuesday, March 6, to be
pulled up on the page, which is what happens
| | 03:22 | when you have a float that
isn't cleared afterwards.
| | 03:25 | So that could be a treatment
that will work on some pages.
| | 03:29 | It certainly doesn't work on the page that
we're looking at here, but it may be something
| | 03:33 | that you want to do.
| | 03:33 | Remember, pull-left and pull-right are two
classes that you can insert pretty much anywhere
| | 03:39 | inside of a document that will cause
that element to float left or float right.
| | 03:44 | This one obviously would need a bit
more styling if we decided to use it here.
| | 03:48 | And it is possible to do
custom styling inside of Bootstrap.
| | 03:51 | I am going to cover that in a later video
in this chapter, the correct way of doing
| | 03:55 | custom styling with Bootstrap to
keep your website maintainable.
| | 03:59 | So I don't really like the way that looks. I'm
going to go back and pull that class out in Dreamweaver.
| | 04:05 | So I'm just going to get rid of that class
of pull-left, but just know that it exists
| | 04:08 | in case you happen to want to do that.
| | 04:11 | So this is a nice built-in styling
feature here inside of Bootstrap.
| | 04:14 | We've got some start for styling the quote
and making it stand out of the page a little bit.
| | 04:19 | You can certainly enhance that with your
own styles to give it a little bit more polish
| | 04:23 | and stronger treatment if you wish.
| | Collapse this transcript |
| Including lists| 00:00 | Down here at the bottom of the page where
it talks about Exhibit Halls A & B, we have
| | 00:04 | a couple of lists--actually we have one list.
Right now, it's a single bulleted list that
| | 00:09 | talks about smart displays that will be
occurring in Exhibit Halls A & B throughout the week.
| | 00:14 | And then under that we have a sentence that
says to visit three local photographers who
| | 00:19 | will be displaying their works, and it says
something like Sam Gilmore: Ocean photography.
| | 00:23 | Currently, those are marked up as individual
paragraphs, and that is actually rather incorrect markup.
| | 00:28 | It's still a list of things, Sam Gilmore is
the photographer, Ocean photography is his topic.
| | 00:34 | They go together, but they're not individual
list items the way Area high school students
| | 00:39 | or Roux Academy students or
Conference participants are.
| | 00:42 | The best way to mark up that particular
laundry list of stuff down there at the bottom is
| | 00:47 | really a definition list.
| | 00:49 | A definition list is something that is not
typically used a whole lot inside of web pages
| | 00:54 | at this point in time,
but it's incredibly useful.
| | 00:57 | It's got a two-part list, so there's a
definition term and a definition itself, so things can
| | 01:02 | be paired together inside of a list.
| | 01:04 | So I'd like to have marked that particular
group of items up correctly, and let's take
| | 01:10 | a look at some styling that
Bootstrap offers for dealing with lists.
| | 01:14 | So inside of Dreamweaver, if you scroll on
down to you the bottom of the page. I'm at line 62.
| | 01:21 | First of all, let's take a
look at that bulleted list.
| | 01:24 | As you saw, those are displayed right now with
individual bullets, if I wished. I don't have
| | 01:30 | to display the bullets at all by taking
this ul and adding a class of unstyled, and
| | 01:38 | by adding that class of unstyled that
will get rid of the bullets in the list.
| | 01:43 | So now if I refresh my web page, you see
there is my list here under Exhibit Halls A & B,
| | 01:51 | and the bullets on that list no longer exist.
| | 01:52 | Now I don't think that works at all. I liked
it much better as a bulleted list. I thought
| | 01:56 | it was much easier to read that way; however,
I wanted to be sure to tell you about unstyled,
| | 02:01 | which is a class that you can use on both ordered
lists, the ol tag and unordered lists, which is the ul tag.
| | 02:08 | You, of course, could then layer other
styling on top of your list once you've turned the
| | 02:11 | bullets off via the unstyled tag.
| | 02:14 | Also note that it's gotten rid of the margin or
the padding that goes around that list as well.
| | 02:18 | So that's a pretty handy style to know about.
| | 02:20 | I'm not going to use it on this page,
but now you know that it exists.
| | 02:24 | Okay, so back to Dreamweaver here. I'm
going to take that class of unstyled out again.
| | 02:29 | And then down here at the bottom is that
group of photographers and their specialties.
| | 02:34 | So let's go ahead and mark this up correctly.
| | 02:37 | So any time you see something like this, you
want to make use of a definition list, you
| | 02:41 | always knew to start with the dl tag,
which stands for Definition List.
| | 02:47 | And then down underneath the end of that, we're
going to wrap that, so of course that /dl is required.
| | 02:53 | Then we're going to have our
first one here, Sam Gilmore.
| | 02:56 | We'll change this paragraph tag to a
dt, which stands for Definition Term.
| | 03:02 | And Ocean photography we'll change to
a dd which is the actual definition.
| | 03:08 | And although we're not thinking of these as
dictionary terms with definitions, these are
| | 03:13 | again related pieces of content that are tied
together, and by using dt and dd we are showing
| | 03:20 | the association between those two items.
| | 03:23 | So we are going to ahead and
change this markup here really quickly.
| | 03:26 | Okay, so now I've got this all
marked up as a definition list.
| | 03:32 | So if I save this again, File > Save, and
I put it into Firefox, you'll notice that
| | 03:38 | we have a very nice style here, where we have
the Sam Gilmore presented as a bold name and
| | 03:43 | then underneath of it Ocean
photography is slightly indented.
| | 03:47 | So it's pretty clear that Ocean
photography goes with Sam Gilmore, for example.
| | 03:51 | So that's a very nice looking list.
| | 03:54 | There is another style that Bootstrap offers
that you may want to make use of here as well.
| | 03:59 | So if you go back to Dreamweaver, add here for
the dl, simply add the class of dl-horizontal.
| | 04:11 | And what that will do, as you might predict,
will put the name over on the left and the
| | 04:16 | occupation or interest over on the right.
| | 04:20 | So if you save this page and put it into
Firefox, Refresh, you'll see down here at the bottom
| | 04:27 | of the page now that we have a list of
photographers, they're still bold in with their interests
| | 04:32 | over on the right side, which is
also a very, very nice presentation.
| | 04:36 | So Bootstrap has a few treatments for lists.
These are lists that are just your basic list,
| | 04:42 | content list that I've
showed here on the web page.
| | 04:44 | There are additional options that are available
for navigation, which is often marked up as a list.
| | 04:48 | I'll be covering those in
the next chapter on navigation.
| | Collapse this transcript |
| Styling buttons| 00:00 | You might have noticed the learn more link
next to the session names here on this program.
| | 00:04 | They aren't styled really nicely. It would be
so much better if they looked more interesting
| | 00:09 | and certainly more compelling to click on them.
| | 00:12 | Fortunately, Bootstrap comes with a number of
styles that will make those links more interesting.
| | 00:16 | In fact, we can make all of those links
look exactly like buttons if we wanted to.
| | 00:21 | So I'm going to go ahead and apply some
treatments to these learn more links to make them look
| | 00:25 | more interesting, more clickable, pop-off the
page a little bit more than they do right now.
| | 00:30 | So if you go to Dreamweaver and scroll on
down to the first instance of these learn
| | 00:35 | mores, which I think is around
line 24, Art in Unexpected Places,
| | 00:40 | you'll see that we have here the a tag
with a learn more link inside of it.
| | 00:44 | There are a number of things that
we can do to give this a treatment.
| | 00:47 | So one thing that we could do is simply use
that small tag which I covered in a previous
| | 00:53 | video, and you can wrap the small tag
around the link itself, and if I just save that,
| | 00:59 | Ctrl+S or Command+S to Save, and Refresh
this inside of Firefox, you'll see that I've now
| | 01:05 | made the text slightly smaller
next to the names, which is good.
| | 01:09 | It doesn't look like it's competing with the
name of the session anymore as it did before.
| | 01:14 | If you take a look at Art in Full Bloom, it
looks like it's Art in Full Bloom learn more
| | 01:18 | as opposed to Art in Full Bloom, learn more.
| | 01:20 | So this is pretty good, but we can make it a
lot better using Bootstrap's button classes.
| | 01:26 | So I'm going to go back into Dreamweaver,
and I'm going to pull that small tag out.
| | 01:34 | And instead, I'm going to go
ahead and apply some classes.
| | 01:38 | So at the most basic if we apply a class
inside of the href tag here, you set a class of
| | 01:46 | btn for button, and save that and take a
look at it in Firefox, Refresh one more time.
| | 01:53 | You'll see that the learn more link
here actually looks like a button.
| | 01:57 | It's squared, it has rounded corners,
it has the word learn more in it.
| | 02:00 | When I roll my mouse over it, it looks
like the button is slightly depressing.
| | 02:04 | So that I think is definitely an improvement
over what we have for the other learn more
| | 02:09 | links here on the page right now.
| | 02:10 | One of the other things you might be interested
in doing is adding some kind of color to it.
| | 02:15 | Those are available to you as well.
| | 02:17 | Back to Dreamweaver here, as an additional
class that we can add on here, there is btn-primary,
| | 02:26 | that will make this button a blue color, sort of the
primary styling for buttons on a Bootstrap web page.
| | 02:32 | So if I go ahead and Save that, and I Refresh this inside
of Firefox, you will see that the button becomes blue.
| | 02:38 | We've seen this before, we did this in the
Hero unit, and when you roll over it, you'll
| | 02:42 | see that the color does change a
little bit, but we have a few more options.
| | 02:47 | So if I scroll on down the page, the next
instance of this, and I give this a class
| | 02:52 | of btn and btn-info, this is
going to make a light blue button.
| | 03:01 | And I can keep on going down the page.
There's a number of these, so let's just go ahead
| | 03:05 | and put them all in, class for the next one,
remember to put in btn for the generic buttons
| | 03:11 | styling and then the second
class will apply a color to it.
| | 03:15 | So btn-success will give you a green button.
| | 03:23 | Here at the next link, btn btn-warning
will give you a yellow button.
| | 03:34 | Down here, btn btn-danger will give
you a red button, class= that does help.
| | 03:46 | And then one more down here, class="btn btn-inverse"
which will give you a black button.
| | 03:55 | So I'm going to go ahead and Save this,
and we can put it in Firefox and Refresh, and
| | 04:01 | we'll have multicolored buttons, so you can
see all the different color buttons that you
| | 04:05 | have here that all ship with Bootstrap.
| | 04:07 | Now notice the names of the classes that I
gave you for these button-primary, button-info,
| | 04:12 | button-success, button-warning,
button-danger, and button-inverse.
| | 04:15 | None of these are tied to a color name,
and that's done very deliberately so that you
| | 04:19 | can override these colors with your own colors.
| | 04:23 | So you can think about these buttons in
terms of their functionality, the primary button,
| | 04:27 | treatment that you're going to have, an
informational button, a button indicating success, a button
| | 04:32 | indicating a warning, and so forth.
| | 04:34 | That is why these names exist, and that's why
there are so many of them inside of Bootstrap.
| | 04:39 | One final thing we can do with our
buttons is we can change their size.
| | 04:43 | So back to Dreamweaver again here for a
moment, and I'm going to go back on up to the top
| | 04:47 | page, back to line 24
where we have our first button.
| | 04:52 | There are different sizes of
buttons that come with Bootstrap.
| | 04:56 | We've been seeing the default size here, so
there are three other sizes that are available.
| | 05:00 | So I'll go ahead and show those to you as well.
| | 05:02 | If as a third class you add to this tag,
btn-large, you'll make a large button.
| | 05:10 | We did that with the Hero
treatment in the previous video.
| | 05:14 | Or if the next one here, if you say btn-small
will make a smaller button, and we can go
| | 05:21 | even smaller down here with the success button,
btn-mini, which will make a very small button.
| | 05:30 | So once again, go ahead and save this, take
a look at it in Firefox, and you'll see we
| | 05:36 | have a large button, we have a small button.
You can compare that with this yellow button
| | 05:40 | down here at the bottom,
which is the standard size.
| | 05:43 | So we have a small button,
and we have a mini button.
| | 05:46 | So you're welcome to go ahead and try out
those particular classes and see what you
| | 05:51 | can do here in the web page.
| | 05:52 | I recommend not overriding any of these
colors just yet. I'm sure you're more than capable
| | 05:56 | of doing that in the CSS, but I have a
way that I'd like for you to do that.
| | 06:01 | And just wait a couple more videos, and I will
cover how to override the core CSS with your own.
| | Collapse this transcript |
| Incorporating images| 00:00 | So this page is looking better than when we
started, but it's still lacking in a lot of
| | 00:04 | color and a lot of interest, and one of the
things that we could do to make page more
| | 00:09 | interesting and break up the text a little
bit, of course, would be to add a few images.
| | 00:13 | But in addition to that, I'd like to tell
you about some great image treatments that
| | 00:17 | ship with Bootstrap that are really fun.
You can take a square image and apply a style to that.
| | 00:22 | We will make it appear
round on your web page.
| | 00:25 | There is a treatment that will give you rounded
corners on the images, and there is also something
| | 00:30 | called the Polaroid treatment, it will put a gray
line around your image, as well as a white border.
| | 00:35 | So, there are some images inside your
exercise files, so make sure you go ahead and copy
| | 00:39 | those into your Bootstrap site, and we're
going to hop in Dreamweaver here, we'll go
| | 00:45 | ahead and add those images.
| | 00:47 | So the first place I'm going to add an
image is right here after Art in Full Color.
| | 00:51 | In fact, right inside this paragraph here,
describing Art in Full Color, I'm going to
| | 00:56 | go ahead and add my image tag, so image source
equals, and as always we can browse for that.
| | 01:05 | I'm going to pick the flower here
from your images folder and say OK.
| | 01:11 | These are just sort of decorative pictures,
so I'm just going to give them an empty alt tag.
| | 01:15 | It's not really important that people
with disabilities are able to see these pictures,
| | 01:19 | you can certainly put in a
description for them if you wish.
| | 01:21 | Then I'm going to scroll on down the page
here, and I'm going to insert another picture.
| | 01:27 | Let's scroll on down to right here, Tuesday,
March 6, just before the strong tag here, between
| | 01:36 | the paragraph, I want to go
ahead and insert another image file.
| | 01:41 | And once again, we can browse for the image and
here I am going to put in the picture of this artist.
| | 01:51 | And once again, I'm just going to leave a blank alt
tag, we should always include that alt tag, though.
| | 01:58 | And then finally, I'm going to scroll in down
the page here to just before Exhibits A & B,
| | 02:03 | so this is around line 60.
| | 02:05 | I'm going to go ahead and add an image tag
right here inside of this paragraph, and this
| | 02:14 | particular image that I'm going to put in is the
picture of the road, and once again, a blank alt tag.
| | 02:23 | Okay, so I've just added three images to my
document, if I go ahead and say File > Save,
| | 02:29 | and I pop in to Firefox and I take a look
at my page and I Refresh, you'll see that
| | 02:33 | I have these pictures, so here's my picture of
the flower, down here is a picture my artist,
| | 02:39 | and down here at the very bottom is the
picture of the road, and it looks a little bit chunky
| | 02:42 | and blocky, so I'm going to add some additional styles
to these to give them those treatments that I discussed.
| | 02:48 | Let's switch back to Dreamweaver and scroll
back on up the page here to the flower image,
| | 02:55 | and I'm going to add some classes do this.
| | 02:57 | So the big class I'm going to add to this
is image, img-circle, which will give us a
| | 03:06 | treatment of a circular image.
| | 03:08 | So if you just do that much and save your
page and take a look at it in Firefox, you'll
| | 03:15 | see that, lo and behold, your squared-off image has
now become a circle, and it looks great.
| | 03:20 | I am now also going to float this on over
to the right side of the page. I don't think
| | 03:24 | it really works over here on the left side.
| | 03:27 | So, inside of Dreamweaver, I'm going to add a
second class, it's our old friend pull-right,
| | 03:34 | which will float the image over
to the right side of the page.
| | 03:37 | So we'll go ahead and save that again, take
a look at it in Firefox, and you'll see we
| | 03:42 | have a nice round image over here pushed to
the right side of the page, looks a lot better.
| | 03:48 | So that's one of the treatments that's
available to you in Bootstrap image, img-circle will
| | 03:54 | give you the circular images.
| | 03:56 | Now if we go back to Dreamweaver again, and
we scroll on down the page, back to our second
| | 04:01 | image here with the image of the artist, I'm
going to go ahead and add another class, and
| | 04:08 | I'm going to give this a class of img-rounded,
which will give it rounded corners, and in
| | 04:15 | addition to that I'm also going to do the
same thing again, I'm going to do a pull-right
| | 04:19 | to make it float to the right side of the page.
| | 04:23 | Save this again, and if you refresh it here
inside of Firefox, you'll see that we have
| | 04:29 | our image of our artist over here floating
out to the right side of the page.
| | 04:32 | You'll see that the image corners on this are
also rounded, which is a nice treatment.
| | 04:37 | Last, we're going to give this road picture
down here a treatment, so scroll on down in
| | 04:42 | your document to the road picture, and for
this one we'll go ahead and add a class for it,
| | 04:46 | and the class is img-polaroid, and once
again, I'll add a pull-right to that particular
| | 04:57 | class and go ahead and Save that, and we'll
Refresh that inside of Firefox, and you'll
| | 05:04 | see that we now have our image of the
road over here on the right side of the page.
| | 05:08 | You see that we have a nice gray border
going around that with some white in between.
| | 05:12 | If I had a different color background, that
white in between the light gray line and the
| | 05:17 | picture would stay white,
which explains the name Polaroid.
| | 05:21 | So there we go, three image
treatments here inside of Bootstrap.
| | 05:25 | You can make use of these very, very simply
with a single class, the Polaroid treatment,
| | 05:29 | the Rounded corner treatment, and of course,
the Circle treatment up here on the top.
| | Collapse this transcript |
| Incorporating icons| 00:00 | Bootstrap also comes with a full set of
icons that have been contributed by glyph icons.
| | 00:05 | To get a full listing of these icons, if
you go to getbootstrap.com, click on the link
| | 00:10 | on the top for Base CSS and then click on the
link on the left side for icons by Glyphicons,
| | 00:16 | you'll see that you have a whole list of these,
140 choices of all different shapes and sizes
| | 00:23 | and indications of things.
| | 00:24 | I'm going to grab this calendar icon right
here, I'm just going to highlight the words
| | 00:28 | icon-calendar and Ctrl+C
or Command+C to copy that.
| | 00:32 | I'm going to incorporate that into my web page
by putting this little icon in front of the date.
| | 00:38 | So, what I'm going to do now is I'm going
to hop into Dreamweaver, and I'm going to
| | 00:44 | scroll on down here to the first instance
of where this happens, which is here, at 9:30
| | 00:50 | to 10:30am: Elizabeth Hall, and that's where
I'd like to go ahead and put this particular icon.
| | 00:57 | The way you go about doing this is you're
just going to put in a span tag with a class
| | 01:02 | of whatever class is associated with that
particular icon, and those are all displayed
| | 01:08 | there on the web page.
| | 01:10 | And then you're going to follow that
immediately by a slash span, so you see here the span
| | 01:14 | class icon-calendar is the name of the class
which we saw right here on the web pages.
| | 01:21 | Those are all of the names of the classes to
get those particular icons to display.
| | 01:26 | Then go ahead and save--Ctrl+S or Command+S to
Save--and if you put this page into Firefox,
| | 01:34 | you'll see here that our icon shows up
right here on the page in front of the time.
| | 01:38 | So that's a nice little feature that Bootstrap
ships with. But what if you don't want black?
| | 01:42 | What if you want white instead?
| | 01:45 | That is possible to do as well, as you'll
see here inside the documentation down here
| | 01:50 | at the bottom of the page, it will indicate
that you can go ahead and use icon-white,
| | 01:57 | which will give you the icon as well, but in
the white format instead of in the dark format.
| | 02:03 | So, now if I scroll on down to the next
instance here, I'm going to go ahead and put in that
| | 02:08 | span tag again of icon-calendar icon-white
which will give me a white version of the
| | 02:19 | icon followed by a slash span.
| | 02:21 | Once again, go ahead and Save this and go
ahead and refresh Firefox, and you'll see
| | 02:28 | the icon is there. It's very hard to see, of
course, a white icon on a white background,
| | 02:32 | but you can kind of see it a little bit,
because the edges of the icon have been treated to
| | 02:37 | blend into a dark background.
| | 02:38 | So, that's the way that you would go about
incorporating icons into your document.
| | 02:43 | You can go ahead and repeat this process for
the rest of the page to continue incorporating
| | 02:47 | icons as many as you like.
| | 02:50 | Where these icons are being pulled from is
inside of your file structure within Dreamweaver.
| | 02:56 | Inside of your image folder, you'll notice
that there are a couple of these images here,
| | 03:00 | glyphicons-halflings and
a white version of those.
| | 03:05 | In fact, what you have here is an image sprite,
so there are 140 tiny little pictures that
| | 03:10 | occur in one PNG, which is a really great way
of handling these tiny images for mobile phones.
| | 03:16 | Rather than having to pull down 140
individual images, in this particular case, we've only
| | 03:21 | pulled down a single image and then using CSS,
we target the picture that we want directly
| | 03:28 | on that image, so that is
where those are located.
| | 03:32 | The drawback to doing it this way is that
since these are image sprites and they're rasterized
| | 03:37 | small images, you're not able to blow these up and
use them as large-format pictures within your document.
| | 03:43 | You certainly could download those kind of
graphics elsewhere on the Internet and incorporate
| | 03:47 | those into your Bootstrap site, but these
glyph icons that ship with Bootstrap, they
| | 03:52 | are image sprites, and
that's the way that they work.
| | Collapse this transcript |
| Overriding Bootstrap core CSS| 00:00 | Finally, the video you all have been waiting for:
how do you override the core CSS in Bootstrap?
| | 00:05 | Well, there are two
possible ways that you can do this.
| | 00:08 | I am on the getbootstrap.com website, and
I've clicked on the Customize link, and this
| | 00:15 | is the page where you can customize Bootstrap to
do exactly what you need it to do and nothing more.
| | 00:20 | So, you can choose exactly which components
you want to include. We talked a little bit
| | 00:25 | about the Scaffolding, much of the rest of
this we haven't talked about yet, but these
| | 00:30 | are JavaScript-driven widgets that I'm going
to cover in a couple of videos, some of the
| | 00:34 | styling that's in CSS you can choose to
include it or not, you can choose to include specific
| | 00:40 | plug-ins that we rely on jQuery,
you can customize these variables.
| | 00:45 | Bootstrap makes use of the less framework,
and you can type in different values for these things.
| | 00:49 | So the easiest one to
understand is here under Colors.
| | 00:52 | So what exact shade of blue would you like to
have where blue occurs inside of your document,
| | 00:58 | what exact shade of green and so forth?
| | 01:00 | So you can customize all these variables
and type in your own values and then customize
| | 01:05 | here and download by clicking on the big
honking button at the bottom of the page that will
| | 01:10 | download exactly what it is that
you want to have for your website.
| | 01:15 | However, there are some major downsides to
customizing your Bootstrap Installation this
| | 01:21 | way, particularly where the CSS is concerned.
| | 01:24 | First of all, in the course of preparing for
this video, Bootstrap released two new versions.
| | 01:29 | I started working with Bootstrap 2.0.4, and
just yesterday 2.1.1 was released, so
| | 01:36 | obviously these new releases
are happening all the time.
| | 01:39 | If you want to update your website to the
latest version of Bootstrap, right now what
| | 01:43 | you would do is simply download the latest
version, replace the existing CSS and JavaScript
| | 01:49 | files with the new versions that you would
download from the Bootstrap site, which is
| | 01:54 | great until you realize that any customization that
you've done to bootstrap.css or bootstrap-responsive.css
| | 02:03 | will instantly be lost, because you'll overwrite
those files with the new ones that you've downloaded.
| | 02:08 | So you'll either need to now as part of that
process keep track of where all those customizations
| | 02:13 | are and retype them in here on the screen,
or you'll have to keep track of what they
| | 02:17 | are and re-enter them when you upgrade your
version of Bootstrap, and that's just too
| | 02:23 | much work for me. I can't remember what
I've changed and what I haven't changed.
| | 02:27 | So, I think a far better approach is to
create a custom stylesheet and put any changes that
| | 02:33 | you're going to include there.
| | 02:35 | Anything you're going to override or any
additional styling that you're going to include, put
| | 02:39 | it all in that stylesheet, and that will make
your website so much more maintainable.
| | 02:46 | It'll be so easy to upgrade the latest version of
Bootstrap, because then you'll just copy those
| | 02:50 | new files in over the old files and
your customizations are all still intact.
| | 02:55 | So, let me show you how to do that process now.
| | 02:58 | Back here in Dreamweaver, I'm going to go
ahead and I'm going to create a new document,
| | 03:02 | so File > New, and this time
it's going to be a stylesheet.
| | 03:06 | So I'm going to pick Stylesheet from my Page
Types over here and say Create, and it's going
| | 03:11 | to create a blank stylesheet document for me.
| | 03:14 | Because this is just a proof of concept thing,
I'm going to make a really quick change here.
| | 03:19 | I am going to go ahead and change the body
background color to a lovely shade of green,
| | 03:26 | so I'm going to say background-color is bada66,
and I'm going to go ahead and save that, File > Save.
| | 03:37 | So I'm going to go to Desktop, to my
Bootstrap folder, to my CSS folder, and I'm going to
| | 03:44 | save this as custom.css, so
that is my custom stylesheet.
| | 03:50 | Now the next thing I have to do is attach
it to the document I have been working on,
| | 03:54 | so here's my schedule.html, which is the
document I've been working on in this chapter.
| | 03:59 | I'm going to click here just after the style
sheet for bootstrap-responsive, and I'm going
| | 04:05 | to insert my stylesheet here.
| | 04:08 | So, over here on the right side of the screen,
if you click on the Link icon here inside
| | 04:13 | of the CSS Styles palette and you choose
the Custom Style Sheet here from the list,
| | 04:20 | go ahead and say OK. It'll go ahead and write
in the code to include your custom style sheet
| | 04:25 | right here inside of your document.
| | 04:27 | Again, you want it to occur last in the
string of style sheets, because remember, anything
| | 04:32 | that you put in your custom style sheet
you're going to want to override what comes before
| | 04:36 | it, and so if you put this custom.css
stylesheet somewhere further up the line, closer to the
| | 04:41 | title tag in the code that I'm working
with here, it may not necessarily override the
| | 04:46 | default styling from Bootstrap.
| | 04:48 | Okay, once you've got that in place, File >
Save, we can go ahead and take a look at
| | 04:53 | this in Firefox, and if I Refresh the page
that I'm working on, you can now see that
| | 04:58 | we have a lovely shade of green behind our
text here, and the icons that we put it in,
| | 05:04 | in the previous lesson you can see that we
have a nice dark icon, we also have a white
| | 05:09 | icon, we have some white here associated with
our block quote, and if we scroll on down the
| | 05:14 | page a little farther, this image here that
had that class applied to it, image-polaroid,
| | 05:20 | you can see that it has a nice white stripe
around in addition to that thin light gray
| | 05:23 | stripe that goes around it as well.
| | 05:26 | So that is how you add
custom styles to your document.
| | 05:30 | Make sure you put them in a separate style
sheet, call it whatever you like, I usually
| | 05:34 | call mine custom.css because it's pretty
clear what that is, and then make sure you
| | 05:39 | link it to your document after any other
style declarations that are on your page so that
| | 05:43 | it'll override things correctly.
| | Collapse this transcript |
|
|
4. Navigation SystemsAdding breadcrumbs| 00:00 | The next aspect of the Bootstrap framework
that I will examine includes the various methods
| | 00:05 | of creating navigation systems.
| | 00:07 | Bootstrap offers many different widgets for
doing this, including tabs, pills, buttons,
| | 00:13 | dropdowns, lists, and full navigation bars, as well
as helper systems like Breadcrumbs and Pagination.
| | 00:20 | As you'll see in the next chapter, these
systems can be combined with JavaScript to include
| | 00:25 | dropdowns in many cases.
| | 00:27 | But for now, I'd like to start
with taking a look at Breadcrumbs.
| | 00:31 | A breadcrumb is a trail of links that you
might see at the top of a web page that indicates
| | 00:36 | where you are in the website's hierarchy.
| | 00:38 | For example, if you're at lynda.com and
you're taking a look at my author page, you'll see
| | 00:44 | that the breadcrumb is located up here at the very
top of the web page just under the Navigation Bar.
| | 00:50 | This indicates that you're on the page
talking about Jen Kramer, and to get there you had
| | 00:55 | gone through the author's page, which
would list all of the authors on the website.
| | 01:00 | And before that you were at, in
this case, lynda.com's homepage.
| | 01:04 | We can create this exact same
navigation system inside of Bootstrap.
| | 01:09 | Bootstrap comes with a system for styling
breadcrumbs, and I'd like to take a look at that now.
| | 01:15 | So if we go back to Dreamweaver, and you open
up the document that's inside of your exercise
| | 01:20 | files, you will see that this is actually
the breadcrumb we just saw in lynda.com but
| | 01:25 | without any styling applied to it.
| | 01:27 | If I view this in my web browser right now,
you'll see that it's just a bulleted list
| | 01:32 | with some links included and some of the LIs, as well
as a separator which is that little double-angle bracket.
| | 01:41 | So now we need to add a little bit of
styling to this and a little bit of extra markup
| | 01:45 | to make this a breadcrumb.
| | 01:47 | So, first of all, since we have this
displayed on a web page, we can certainly incorporate
| | 01:52 | the grid system into laying this out.
| | 01:55 | If you choose to do that anywhere along the
way in these examples, what you would do is,
| | 02:00 | of course, you'd start with a div with a
class of container-fluid as we've done before.
| | 02:09 | And don't forget to close that div.
| | 02:12 | And you can follow that with
the call to your row-fluid.
| | 02:17 | So we're going incorporate our div with a class
of row-fluid, and don't forget to close that div.
| | 02:29 | And then the last part of this
would be what's inside of that row.
| | 02:32 | At this point we usually incorporate some
kind of tag that would have the span class
| | 02:37 | inside of it, that would indicate how many
rows this particular aspect of the website
| | 02:41 | will span, and I'd like
this to span to all 12 columns.
| | 02:45 | The question is what kind of
markups should we use to do that?
| | 02:48 | And I've done a little bit of research
about this in the community online, and there is
| | 02:53 | a little bit of debate about what the
best kind of markup is for breadcrumb.
| | 02:58 | So my feeling on it is that the best tag to
use is the nav tag, because breadcrumbs are
| | 03:03 | a form of navigation.
| | 03:05 | Some people disagree with this and say that
the nav tag should be used only in cases of
| | 03:09 | major navigation elements, like
the main navigation on a web page.
| | 03:13 | So, what my argument would be is I am
going to use the nav tag to mark up elements on
| | 03:18 | my web page that are related to navigation.
| | 03:20 | So I am going to go ahead and use the nav tag here to
indicate this is where my breadcrumb is going to be.
| | 03:26 | So, I'm going to put in a nav with a class of
span12 because I'd like this to go stretch
| | 03:33 | all the way across the page.
| | 03:35 | And of course, I am going
to close that down here.
| | 03:40 | And let me put in a couple of tabs here just
so that this code is a little bit easier to
| | 03:45 | read, and one, two, three over for the ul,
and four over for each of the LIs. Okay.
| | 04:00 | So now that we've got that setup, actually we've done very
little with what we've incorporated here at this point.
| | 04:06 | All we've done is incorporate some
additional markup with a bulleted list, and this is not
| | 04:12 | any particular special bulleted list at
this point in time. It's just a bulleted list.
| | 04:16 | So, if we just save this page right now and
we take a look at it again inside of Firefox,
| | 04:20 | you will see that actually
nothing has really changed too much.
| | 04:24 | You might have seen it twitched a little
bit over from the left column, that has to do
| | 04:27 | with the grid system and its spacing
and margins and so forth. All right!
| | 04:31 | So now let's add the actual markup that
makes this a breadcrumb inside of Bootstrap.
| | 04:36 | So the fastest and simplest way to do
that is right here inside of the ul tag.
| | 04:41 | We're going to add a class, and this will be
a class of breadcrumb, breadcrumb singular,
| | 04:48 | that would be the part that I would
miss and call it breadcrumbs, plural.
| | 04:51 | But it is breadcrumb,
singular, inside of the code.
| | 04:54 | The second thing that we're going to add to
make this a breadcrumb is we're going to indicate
| | 04:59 | which item is active.
| | 05:00 | So on the lynda.com example, we
were on the Jen Kramer Author page.
| | 05:05 | So Jen Kramer would be the active aspect
of the breadcrumb indicating where you are.
| | 05:10 | Active is a class that is used all
over Bootstrap to indicate where you are.
| | 05:15 | You will see it used many
times in this navigation chapter.
| | 05:19 | So, I am going to add a class right here
on this li of active, and that will indicate
| | 05:26 | where we are in the hierarchy.
| | 05:28 | And the last thing that I'm going to do is
specify these particular little spacers, and
| | 05:34 | we can do that right here in front
of these little double-arrow guys.
| | 05:39 | We'll add a span with a class of divider,
and close that with a /span, and we'll apply
| | 05:50 | that to the second divider
as well, along with the /span.
| | 05:57 | And so that indicates that the little character
that I am using here, which is this double arrow,
| | 06:03 | would be what's going to separate my breadcrumb.
You, of course, could use any character that
| | 06:07 | you like in that process.
| | 06:09 | So I am going to go ahead and save this,
Ctrl or Command+S to Save, and let's take a look
| | 06:13 | at it again in Firefox.
| | 06:13 | You will notice that this
looks pretty radically different.
| | 06:16 | Now, we have a nice-looking breadcrumb, it's shaded black
just slightly, and it has very nice spacing to it.
| | 06:22 | You can see that the character in between
is nicely styled as well, screen blacked just
| | 06:27 | a little bit so that you can see that there's
a separator, but it's not dominating the look
| | 06:31 | of this particular breadcrumb.
| | 06:33 | There is another treatment that
we could give to this if we wished.
| | 06:36 | In one of the previous videos, I talked about
the glyphicons that come with Bootstrap, and
| | 06:43 | we could incorporate one of
those as our divider if we wished.
| | 06:46 | So, what we would do if we chose to change
out these little characters instead for an
| | 06:53 | icon is right here inside of the class where it says
divider, go ahead and just add icon-arrow-right, for example.
| | 07:05 | And that will give as a little arrow icon
instead of the HTML character that I am using here.
| | 07:10 | Of course, you will need to get rid of
the HTML character, if you choose to do that.
| | 07:13 | So I am going to leave the other one the way we had
it set up so that you have an example of each treatment.
| | 07:20 | And I'm going to go ahead and save that again, and we'll
take a look at it inside of Firefox, Refresh the page.
| | 07:26 | So you see here I have my icon now
that's separating the items in my breadcrumb.
| | 07:32 | And remember, of course, this is a dark icon.
If you prefer to use the white, remember just
| | 07:38 | like we saw in the glyphicon video, you can say
icon-white and that will load the inverse image.
| | 07:47 | So just to see that in action,
we'll go ahead and Refresh the page.
| | 07:51 | So you can see that, that is the
inverse, the lighter color icon.
| | 07:55 | Of course, it actually looks better dark.
It's pretty hard to see that white arrow there.
| | 07:59 | But if you had played around with styling
here and you changed some of the colors,
| | 08:03 | white might be a better choice.
| | 08:04 | So I am going to go hop back into Dreamweaver
and take out that icon-white aspect and save this.
| | 08:12 | So, now you've seen how to
incorporate a breadcrumb into your web page.
| | 08:17 | It's very simple. We just add a few
classes to style up our breadcrumb.
| | 08:21 | You can use all kinds of different HTML
characters as separators in between the navigational
| | 08:26 | elements inside of your breadcrumb, or of
course, you could use one of the glyphicons
| | 08:31 | that ships with Bootstrap.
| | Collapse this transcript |
| Adding pagination for paging through content| 00:00 | Occasionally at the bottom of
the page, there are many blogposts.
| | 00:03 | A page with Search Results or a page of
many products, you'll see a list of additional
| | 00:08 | pages listed at the bottom. Think about
the bottom of the Google Search Results page.
| | 00:13 | Here I am on Google, if I do a Search for
lynda.com, you'll see that I get a list of
| | 00:20 | all kinds of stuff here that pertains to lynda.com,
and then down here at the bottom, I have this
| | 00:26 | long Goooooogle at the bottom which has
a series of numbers plus the Next button.
| | 00:31 | If I go to the Next page of results and I
scroll down to the bottom, again, I have a
| | 00:36 | Previous and Next button down
here, as well as the numbers.
| | 00:39 | This is Pagination, specifically the numbers that are
there in the middle as far as Bootstrap is concerned.
| | 00:45 | The Next and Previous buttons are treated
slightly differently, they're called Pager,
| | 00:50 | and I am going to cover
those in the next video.
| | 00:52 | So let's take a look at how we might style
something like those numbers down at the bottom
| | 00:56 | of the screen in our Google Search Results.
| | 00:59 | So here inside of Dreamweaver, I have a
bulleted list, it's wrapped inside a <nav> because
| | 01:06 | of course, this is navigation
that's there on the web page.
| | 01:11 | And if we just take a look at this right now
inside of Firefox, you would not see a whole
| | 01:16 | lot that was terribly interesting. It's a
bulleted list with some numbers and some characters
| | 01:21 | that point you in either direction.
| | 01:23 | So how we can make this look
a little bit more interesting?
| | 01:25 | Well, of course, Bootstrap has some
styles for dealing with something like this.
| | 01:30 | So if we go to <nav> and we add here a class of
pagination, that would be a great way to start by making
| | 01:38 | our numbers go horizontally on the page.
| | 01:41 | I'll just go ahead and Save that and preview
that inside of Firefox. You'll see that I have
| | 01:47 | a series of numbers that are now in
boxes stretched out here on the page.
| | 01:52 | Now if you noticed on the Google Results Page,
we landed on one of the pages, and there was
| | 01:57 | an indication of which page we are on.
| | 01:59 | If we were on Page 1, for example, there would
be nothing before that, so the number 1 might
| | 02:04 | be grayed out and so might the double caret on
the left side of this Pagination, and Bootstrap
| | 02:10 | has a way of doing that as well.
| | 02:12 | So in Dreamweaver, if I add to this first <li
here a class of disabled, in other words,
| | 02:21 | gray this out, because there is nothing
that comes before the Search Results, and here
| | 02:27 | for the number 1, if I add a class of active,
in another words, this is the current page
| | 02:33 | of results, there will be an indication that I
am on page 1, and there's nothing before this.
| | 02:38 | So once again, if I Save this and I
Refresh this in Firefox, you'll see that it looks
| | 02:44 | like my double caret here is grayed out, and
when I run my mouse over it, looks like it's
| | 02:50 | no longer clickable,
likewise here for the number 1.
| | 02:54 | Now having just said that, it is true that
it looks like the double caret and the number 1
| | 02:59 | are not clickable, and the ui would
indicate that they're not clickable.
| | 03:04 | CSS has been used to change the cursor here to
make sure that it doesn't look like a finger,
| | 03:10 | the way it does if I roll over number 2.
| | 03:12 | However, most assuredly the number 1 and the
double caret are still very much clickable items.
| | 03:18 | If you want to make sure that they're truly
disabled, you are going to have to do that
| | 03:22 | with some kind of JavaScript magic or maybe
you've hooked this up to a content management
| | 03:27 | system or some kind of programming language,
which will spit this back so the links aren't
| | 03:32 | actually there at all.
| | 03:34 | So be careful about that. Just because you
use class of disabled doesn't necessarily
| | 03:39 | mean that there's no link that exists on a
item anymore, because if you take a look at
| | 03:43 | the HTML, there is most certainly a link
that appears there, and it is still clickable,
| | 03:48 | even though it doesn't look like it.
| | 03:50 | So one final thing I want to show you. You
designers are probably wondering how you can
| | 03:55 | make your pagination centered on the page.
You are probably thinking about doing that
| | 03:58 | with a custom style. There's no need to do that.
Bootstrap does ship with the ability
| | 04:02 | to center the pagination on the page.
| | 04:05 | What you need to do here is inside of the nav class
of pagination, add the class of pagination-centered,
| | 04:14 | and if you Save that and Refresh that inside
of Firefox, you'll see that now your pagination
| | 04:19 | centered on the page.
| | 04:21 | The option also exists for right-aligned pagination.
If you change this to pagination-right, you
| | 04:29 | can make right-aligned pagination as well.
| | 04:32 | So that's the story behind pagination and
treatments for it. Remember, pagination usually
| | 04:37 | comes out of a content management system or
some kind of database-driven application at
| | 04:42 | the bottom of a web page
for tapping through things.
| | 04:45 | I am showing you examples here inside of Dreamweaver,
so if you were to use this kind of pagination
| | 04:50 | in your websites, you would of course need
to hand code all of these links to separate
| | 04:55 | HTML documents. It takes a lot of time.
| | 04:58 | Pagination is really a widget that's best
linked to something that has a database behind
| | 05:03 | it where the pagination is
generated out of the database.
| | 05:08 | So it's not likely it's something that you
would use on just a static HTML website.
| | 05:12 | You're most likely going to see it used more
often in something with the database behind
| | 05:16 | it, like a content management system.
| | Collapse this transcript |
| Adding a page for next and previous links| 00:00 | I'm here on the lynda.com blog
at blog.lynda.com.
| | 00:05 | And one of the navigation elements that the
lynda.com blog uses is down here at the very
| | 00:10 | bottom of the web page.
| | 00:11 | So if you scroll all the way down to the
bottom of the blog, you'll notice down here in the
| | 00:16 | bottom there is this little
link that says Older Entries.
| | 00:19 | This is a very common type of navigation
that you see in blogs, so if I click this link
| | 00:23 | that says Older Entries, and I go all the
way down to the bottom of the page, again,
| | 00:29 | you'll notice that it now it says
Older Entries and Newer Entries.
| | 00:33 | This type of navigation lets you page
basically back and forth between parts of this blog
| | 00:39 | just by clicking these links.
| | 00:41 | We can go back a page in time
or go forward a page in time.
| | 00:44 | This is called Pager inside of Bootstrap,
so a Pager allows you to style these links
| | 00:49 | for next and previous or older and newer
that you see at the bottom of these pages.
| | 00:55 | So if you hop on into Dreamweaver, you'll
notice that I've given you some really simple
| | 01:01 | markup, this is just a two-bullet list.
| | 01:04 | Just a ul with the two bullets that say
Previous and Next. Styling this is just as
| | 01:09 | easy, so we're going to start by adding up here
on the top a class of pager inside of the ul tag.
| | 01:19 | And that will take care of the styling for our
Previous and Next buttons with Bootstraps defaults.
| | 01:25 | If you just go ahead and save that document,
and we preview it inside of Firefox, you'll
| | 01:31 | see now that we have two links, Previous and
Next, I can roll over them, you can see that
| | 01:35 | they have a very nice hover
state as well. So that's great!
| | 01:39 | You may be wondering, what if I want to
space these out so that they're at the edges of
| | 01:44 | whatever area I've included
these particular buttons in?
| | 01:47 | So, for example, at the bottom of the lynda.com
blog we've pushed Older and Newer Entries
| | 01:53 | to the very edges of the blog here.
| | 01:55 | What if I want to push
these two buttons apart as well?
| | 01:58 | Well, that's completely possible.
| | 02:00 | If you hop back into Dreamweaver
again, we're going to add two classes.
| | 02:04 | The first li for Previous, we're
going to add a class of previous.
| | 02:10 | And for the next button labeled Next, I'm sure
it'll be shock to learn we add a class of Next.
| | 02:19 | So just by doing that, this will push
these two buttons to the edges of the web page,
| | 02:24 | and Previous would indicate the side where
you want it to say older or further back
| | 02:27 | in time, the left side of the page, and the
one where it says Next, you want to push to
| | 02:31 | the right side of the page,
or going into the future.
| | 02:35 | So if we Refresh our web page, here we go.
| | 02:39 | Now you see that I've pushed these
all the way to the edges of the page.
| | 02:42 | Because I don't have any of the Scaffolding
included inside of this HTML document, these
| | 02:47 | are pushed all the way to
the edges of the window.
| | 02:50 | Of course, these will be pushed to the edges of its
containing element if you had some additional markup here.
| | 02:56 | So if you have these in the bottom of some
kind of div, let's say with a span of four,
| | 03:00 | it will be pushed to the edges of that.
| | 03:02 | In other words, about a third of the screen width,
instead of the entire screen width, as you see here.
| | 03:07 | So that's great, but what if
there are no previous entries?
| | 03:12 | What if I would like to have that
Previous button sort of grayed out?
| | 03:15 | Just as we've seen before in the last
video, you can add a class of disabled, disabled
| | 03:21 | will gray this button out.
| | 03:22 | So if you go ahead and Save that one more
time, Refresh your web page, you'll see now
| | 03:27 | that the previous button is grayed out,
there's no hover state, and the arrow stays when I
| | 03:32 | roll my mouse over it, implying
that this is not a clickable button.
| | 03:36 | But just as I pointed out in the previous
video, it most assuredly is a clickable button.
| | 03:41 | We've used CSS here to
make it look like it's not.
| | 03:45 | So if you really truly don't want this button
to be clickable, you're going to have to find
| | 03:48 | some way of getting rid of that link or
using more JavaScript tricks or using some kind
| | 03:52 | of programming language to make
this truly a not clickable button.
| | 03:56 | The next button, of course,
still remains clickable.
| | 03:59 | All right, so this is some very simple markup
here for including Next and Previous or Older
| | 04:05 | and Newer buttons inside of your web pages.
| | 04:08 | If you want to flip forward a page or back in time,
they're very commonly used at the bottom of blog entries.
| | 04:13 | And you can combine this with a couple of classes to
give this some nice styling and some great functionality.
| | Collapse this transcript |
| Using tabs and pills navigation| 00:00 | Over the next few videos, we're going to take a
look at the simple bulleted list here and a number
| | 00:05 | of different ways that we can change the classes to make
this list look very, very different inside of Bootstrap.
| | 00:11 | So, right now I'm taking a look at pills here.
We're going to take a look at pills and tabs.
| | 00:15 | Tabs you're probably familiar with,
and pills are sort of round, oval sort of shapes.
| | 00:21 | They have curved edges that you can also
use to make very interesting looking navigation bars.
| | 00:28 | What we have right now is our default
markup, though, isn't terribly interesting.
| | 00:32 | If I very quickly look at this inside of
Firefox, you'll see that what you got is your basic
| | 00:38 | bulleted list, very
functional, not terribly pretty.
| | 00:42 | So let's start adding some classes to see
how we can make this look a little bit more
| | 00:46 | attractive or a little bit different.
| | 00:48 | So inside of Dreamweaver, the very first step is to
add a class of nav. This is the most basic markup.
| | 00:55 | Just by adding this nav you've indicated
that this is navigation and some
| | 01:01 | basic things are going to happen here.
| | 01:03 | So when I refresh you'll see that the margin
and padding associated with ul has gone away,
| | 01:09 | you'll see that the bullets have gone away, and
we're now crammed into the side of the web page.
| | 01:13 | The reason we're crammed into the side of
the web page is because I'm not making use
| | 01:16 | of the Bootstrap's Scaffolding system at this
point. I've kept my markup very, very simple,
| | 01:21 | the nav tag is located inside of the body
tag, it's being pushed all the way out to
| | 01:26 | the very edges of the web page.
| | 01:28 | If I had this nav tag located somewhere
else inside of the Bootstrap Scaffolding, this
| | 01:34 | navigation would not look like
it's a crammed into the edge.
| | 01:37 | So as you roll your mouse over these, you
can see that there's a nice hover state that
| | 01:41 | goes down these quite lovely.
| | 01:44 | The reason that that hover state goes all
the way across the page is because that's
| | 01:47 | how wide the containing element
for these particular links is.
| | 01:51 | If you use the Scaffolding system, of course,
this could be potentially quite narrower,
| | 01:56 | depending on which of the span classes
you choose to put your navigation list in.
| | 02:01 | All right, so that's it, very,
very basic, the first step of styling.
| | 02:05 | Now let's add something to make
it a little bit more interesting.
| | 02:08 | If I add nav-tabs, this will of course
create more of a very tabbed type of look.
| | 02:16 | It'll make our links go horizontal
instead of vertical as well.
| | 02:20 | So if I Refresh my page in Firefox, you'll
see that that has in fact happened.
| | 02:26 | We have a series of links here with a line underneath,
and everything is looking great, but it doesn't
| | 02:30 | really look like tabs yet.
| | 02:32 | And the reason it doesn't look like tabs is
because I haven't indicated what page I'm on.
| | 02:37 | What page is the active page?
| | 02:38 | There is that active class again, so let's
say I'm on The Art page, so if I put in a
| | 02:45 | class of active right here inside of my li
and save that one more time and put that in
| | 02:53 | Firefox, you'll see that we have a very nice
looking tab right here. Of course, I can put
| | 02:59 | some content underneath of this, and
then it would be really obvious where I was.
| | 03:04 | So, that is tabs, and they're most simple structure.
Make sure that you have an active state so
| | 03:10 | that the tab meme is a little
bit more obvious on the page.
| | 03:14 | Now you might be wondering what else
could you do with this type of tab styling?
| | 03:18 | There is another class
that makes things go vertical.
| | 03:22 | So what would happen if we took this tab
styling, and we actually made it go vertical?
| | 03:25 | Well, it's a little bit surprising.
| | 03:29 | So after nav tabs, if you add nav-stacked and
save that page one more time, Refresh in Firefox,
| | 03:39 | you'll see that we have a very nice stack
of links. Instead, it's a definite step
| | 03:45 | up from what we had with
just the nav class on that ul.
| | 03:48 | We have a bit more margin, a bit more padding,
we have some nice borders going on between
| | 03:52 | these, we have a great hover state, we still
have our active state right here, it looks
| | 03:57 | like it's grayed out, it looks like you
can't click on it, even though you can.
| | 04:00 | Remember, that's just a trick
that the CSS is playing on you.
| | 04:03 | I've discussed that in the previous two videos,
and of course, these links continue to look
| | 04:07 | like they go all the way across the page
because there's no Scaffolding in place.
| | 04:11 | Hide scaffolding, then you would
see these look a bit narrower.
| | 04:14 | So, what about that pill
thing that I mentioned before?
| | 04:17 | Well, if I go back here into Dreamweaver,
I'm going to take out nav-stacked, and I'm
| | 04:23 | going to change nav-tabs to nav-pills, and
if you Save that and Refresh your Firefox
| | 04:31 | web page, you'll see that the navigation
has again gone horizontal and the active page
| | 04:38 | that we were on has this
lovely blue pill surrounding it,
| | 04:41 | in this case, a blue box with rounded corners, and of
course, there is a very nice hover state here as well.
| | 04:47 | As I hover over these links, you'll see that they
have a lovely grayed box also with rounded corners.
| | 04:53 | You could use custom CSS to change these
colors or tweak the way that these are styled.
| | 04:58 | Just like we saw with the tabs, you can make
this pilled structure also go vertical, and
| | 05:04 | if we hop back in the Dreamweaver again
| | 05:06 | and add nav-stacked just the same way we
did with the tabs and save and look at this in
| | 05:14 | Firefox again, you'll see that now our navigation
has gone horizontal. We still have our current
| | 05:20 | page clearly marked here with these big blue
rounded cornerbacks, and we still have our
| | 05:25 | hover state in place as well.
| | 05:27 | This is an introduction to tabs and pills
and how we can work with them to give us at
| | 05:33 | least three or four different unique looks
for how our navigation could look on a web page
| | 05:37 | just with a handful of styles
using the Bootstrap framework.
| | Collapse this transcript |
| Adding the basic navigation bar| 00:00 | Bootstrap ships with a nav bar
that you can use in your web pages.
| | 00:04 | This nav bar comes with many, many
options for customization and styling.
| | 00:08 | I'm at getbootstrap.com, and if you take a
look here at that black navigation bar that
| | 00:13 | is at the top of the web page, this is the
navigation bar that we're going to work on coding next.
| | 00:19 | So if you take a look at your Dreamweaver
document, you'll notice the code looks very
| | 00:24 | familiar compared to what we
just had out in the previous video.
| | 00:29 | It's a simple navigation bar. You can
see that we have a nice bulleted list here.
| | 00:34 | So this is our starting point, and we're
going to go ahead and start adding a few classes
| | 00:39 | here to make his navigation bar.
| | 00:41 | With any navigation bar that we make in
Bootstrap, the very first step is to set our ul to have
| | 00:47 | a class of nav, and then second, we're going
to need to pick an active link here in our
| | 00:54 | list, so li will have a class of active,
and I'm going to set that on the home link,
| | 01:01 | so that's step number one.
| | 01:03 | Step number two is we're going to take this
nav tag that I have on the outside of this,
| | 01:08 | and I'm going to add
another class to that as well.
| | 01:10 | So, I'm going to add the class here of navbar,
and we need to add a div that goes around
| | 01:17 | this as well, which seems to
be important to the styling.
| | 01:21 | So I'm going to add a div with a class of
navbar-inner, and of course, don't forget
| | 01:30 | to close that div down near the bottom.
| | 01:32 | If we take a look at what we've got so far,
just go ahead and save--so Ctrl+S or Command+S
| | 01:38 | to save--and then let's preview this page in
Firefox, you'll see that we have a navigation
| | 01:43 | bar that will appear across the top of our page,
very nice hover states on the links that are here.
| | 01:48 | The currently occupied page is indicated here
with this nice gray box around the word Home,
| | 01:54 | so everything is looking particularly lovely.
| | 01:57 | One thing that we are missing is some kind
of indication for what website that we are
| | 02:02 | on, and that is also included in the
specification for the navigation bar, so we can add that.
| | 02:09 | Inside of Dreamweaver just after the div
with the class of navbar-inner, we're going to
| | 02:13 | add a class of brand. You, of course, can
make this link anywhere that you like, probably
| | 02:23 | back to your homepage, and you're going to
put in the text that you want to appear as
| | 02:28 | the identification for the website, so in this
case, this will be the Roux Academy Conference /a,
| | 02:35 | and if we save that again and we take
a look at our web page here in Firefox,
| | 02:42 | you'll see that we have some nice identification,
which is clickable, will take me back to the
| | 02:46 | homepage, would probably be the way that I would
code it, and we have a navigation bar that appears here.
| | 02:52 | Now if I minimize my Firefox browser and
I start to pull this in, you'll notice that
| | 02:57 | the styling here kind of falls apart a little
bit. You'll notice that the navigation wraps
| | 03:02 | onto the next line, apart
from the brand, which is nice.
| | 03:06 | It's degrading somewhat gracefully here, but
as I get particularly small, say mobile phone
| | 03:11 | small, you can see that this is
not as pretty as perhaps it could be.
| | 03:15 | That's because we haven't added responsive
aspect to this particular navigation bar
| | 03:19 | just yet, but I've given you some basic
styling for the navigation bar so far.
| | 03:25 | One last thing that you probably have noticed
is that when we took a look at the navigation
| | 03:29 | bar inside of Bootstrap, it was black, but
here inside of my example it's white, and
| | 03:35 | it's actually perhaps a little bit difficult
to see here on the screen with this big white
| | 03:40 | background next to it, but you can
actually make this navigation bar black as well.
| | 03:44 | So inside of Dreamweaver, up here where we
have the nav with the class of navbar, go
| | 03:49 | ahead and add navbar-inverse, and
this will give you the inverted color.
| | 03:58 | If you Refresh the page again, we now have a black
navbar closer to what you saw on that Bootstrap page.
| | 04:04 | So this is the most basic markup for the
navigation bar that ships with Bootstrap.
| | 04:10 | We've gone through some simple things like
setting up the general structure of it, we've
| | 04:14 | added some branding to it so that we know
what website we're on, and we also changed
| | 04:19 | the color of this to black, so we have a white version
and a black version of this particular navigation bar.
| | 04:24 | Of course, you're more than welcome to
override any of these colors or styles with your own,
| | 04:29 | using a custom style sheet.
| | Collapse this transcript |
|
|
5. JavaScript EffectsUnderstanding how JavaScript works in Bootstrap| 00:00 | Bootstrap ships with a
number of jQuery based plug-ins.
| | 00:03 | jQuery is a JavaScript framework, and Bootstrap
has written some effects using this framework.
| | 00:09 | They include Modal Windows, Dropdowns, Tabs, tool Tips,
Alert, Popovers, and Image Carousel, and so much more.
| | 00:18 | If you're familiar with JavaScript and jQuery,
you can modify anything in Bootstrap using the API.
| | 00:24 | If you're not familiar with JavaScript or
jQuery, don't worry, there are many effects
| | 00:29 | that are created for you which you can put
to use immediately. You'll need to carefully
| | 00:34 | copy some code from the
documentation pages into your work.
| | 00:37 | I'm at getbootstrap.com, and I've clicked
on the JavaScript link here at the top of
| | 00:43 | the page, and on this page, you'll see 13 effects
here that use jQuery and have been coded to
| | 00:49 | work within Bootstrap.
| | 00:51 | They're all listed over here
on the left side of the page.
| | 00:54 | There are also some items under the
components part of the documentation that also require
| | 00:59 | the use of JavaScript or
jQuery in order for them to work.
| | 01:04 | Be very sure that you're linked to the bootstrap.min.js
file, as well as the latest version of jQuery.
| | 01:11 | The exercise files that I've given you
contain links for that at the bottom of the pages
| | 01:15 | just before the slash body tag.
| | 01:17 | If you're creating these files on your own,
make sure you link to both of these files,
| | 01:22 | otherwise these JavaScript
effects are not going to work.
| | 01:25 | Remember that the .min files contain the same
information as the regular JavaScript files,
| | 01:31 | but the min files have the spaces
removed to make the file sizes smaller.
| | 01:35 | There's a few custom HTML5 attributes you
should be familiar with that are going to
| | 01:39 | be used in Bootstrap, and you'll see that
in many places over the next few videos.
| | 01:44 | If you click on the link here for Navbar under
Components, and we're going to scroll on down
| | 01:49 | here to the section that
talks about the Responsive navbar.
| | 01:54 | Right here on line 6 you'll see
these two items working together.
| | 01:58 | The data-toggle is applied to a button or
a link, basically anything that has to be
| | 02:03 | clicked or rolled over to trigger
an event or to make something happen.
| | 02:07 | The data-target is something that takes
the action from the controlling element.
| | 02:12 | So, in the case of tabs that change content
when they're clicked, the data-toggle is the
| | 02:17 | link on the tabs, while the data-target is a
div containing the text that should display
| | 02:22 | when a tab is clicked.
| | 02:23 | So, I'm going to go through a number of these
things in detail now with Bootstrap and JavaScript
| | 02:30 | so that you can see how these data-toggles
and data-targets work, and you can get familiar
| | 02:36 | with some of the basic
JavaScript inside of Bootstrap.
| | Collapse this transcript |
| Making the nav bar responsive with JavaScript| 00:00 | In the last chapter of this course, we
created this navigation bar for our website.
| | 00:05 | And it looks great while it's
running here on a Desktop and my browser is
| | 00:10 | maximized, but as I reduce the size of
my web browser, this navigation bar wraps
| | 00:17 | on to another line, which is fine for a
little while, but when we get down to a
| | 00:22 | browser size that would simulate a
mobile phone size, you'll see here that the
| | 00:25 | navigation bar can get quite long and
fat, and that's probably not really an
| | 00:30 | effect that you'd like to have.
| | 00:32 | It's possible to add some JavaScript
to this to make the navigation bar a
| | 00:36 | bit more responsive.
| | 00:38 | It's not the only approach to making a
navigation bar more responsive, many would argue.
| | 00:43 | It isn't even the best
approach using a JavaScript solution.
| | 00:46 | But this is a great effect that comes
with Bootstrap that will give you the
| | 00:51 | option of having your navigation bar
shortened as the screen sizes get a bit smaller.
| | 00:56 | And I'm going to show you how that works now.
| | 01:00 | So if you open up the Dreamweaver
document inside your exercise files, this is
| | 01:04 | the finish point for the last
video from the last chapter.
| | 01:08 | We're going to add some additional code to this.
| | 01:10 | Also inside your exercise files
is a little text document here that
| | 01:15 | contains some code.
| | 01:17 | So this is the first little bit of
code that we're going to add to our
| | 01:21 | Dreamweaver page here.
| | 01:22 | I'm just going to go ahead and highlight
this bit of code here and say Edit > Copy.
| | 01:28 | And then inside of my Dreamweaver page,
just after the navigation tag but before
| | 01:34 | the brand, so after this div right here
but before that Roux Academy Conference
| | 01:40 | line, I'm going to Ctrl+V or
Command+V to Paste that in place.
| | 01:45 | And I'm going to give this just a
little bit of formatting here, just so we can
| | 01:51 | make it a little bit
easier to read. There we go.
| | 01:55 | So what is this little chunk of
code that we just copied in here do?
| | 01:59 | Well, first of all, you'll see these
three lines, lines 20 through 22, these are
| | 02:04 | calling the glyphicons.
| | 02:06 | So there's an icon that's called the icon bar.
| | 02:09 | It's just a little line, and we have three
of them here stacked on top of each other.
| | 02:12 | So, that's all that part is.
| | 02:14 | The interesting part with a part that
makes this interactive is what's inside of
| | 02:18 | the a tag, the clickable link here.
| | 02:21 | So you'll notice that this has been
assigned a few classes, both the button and
| | 02:27 | btn-navbar, and then you see this
JavaScript calls for toggle collapse and
| | 02:30 | data-target of .nav collapse.
| | 02:32 | So what these are doing is they're
integrating the JavaScript into this web page
| | 02:38 | to make this little icon expand
when it's clicked inside of the bar.
| | 02:44 | So if you copy in this code just like this,
this is going to make your navbar responsive.
| | 02:49 | You can certainly swap out these three
lines here where you have the three icon bars.
| | 02:54 | You can take those out.
| | 02:55 | You can put in a word like menu, for
example, or you could put in a different
| | 02:59 | icon if you wished so that there's
something different that's clickable, and you
| | 03:03 | would not change the
functionality of what's happening here.
| | 03:06 | The second part to what we have to do
is show what's going to be hidden as the
| | 03:11 | navigation bar collapses in size.
| | 03:14 | And so we probably don't want to hide
the brand, but we do want to hide all of
| | 03:19 | this navigation right here.
| | 03:21 | So what we're going to do is we're
going to add another div tag here, and we're
| | 03:27 | going to give it a class of nav-collapse.
| | 03:34 | We'll close immediately after the bulleted list.
| | 03:37 | If you're working with a later version
of Bootstrap than version 2.1 that I'm
| | 03:41 | using here in this video, you may
also need to add a class of collapse.
| | 03:46 | So, line 26 will read div
class = "nav-collapse collapse."
| | 03:55 | So, this particular div is indicating
this chunk of code will be hidden as the
| | 04:02 | navigation bar gets smaller.
| | 04:04 | And the media query is going to trigger
to display this navigation bar with just
| | 04:09 | the brand, and this little button,
because the rest of this which is inside this
| | 04:13 | div of nav-collapse will be
hidden when that transition happens.
| | 04:18 | So go ahead and Save this page
-- Ctrl+S or Command+S to Save.
| | 04:22 | And if we put this into Firefox and I
Refresh the page, immediately we don't see
| | 04:26 | anything here with my browser
maximized here on my Desktop computer.
| | 04:30 | But if I make the page smaller, you
can see that long around, actually quite
| | 04:37 | wide, this icon now appears.
| | 04:40 | Remember, that's the glyphicon.
| | 04:41 | We have the three bars that
are stacked on top of each other.
| | 04:45 | And as I make the page progressively
smaller, then the navigation bar is
| | 04:51 | resizing very nicely.
| | 04:52 | When you click this button, you'll
notice that we get the full menu comes on up
| | 04:56 | here with things oriented in a vertical manner.
| | 05:00 | Any content that you have on the page will
be pushed down underneath this black box.
| | 05:06 | So this is how you can go about making
your site navigation bar responsive just
| | 05:12 | by adding these two bits of code.
| | 05:13 | So we had a bit of code that triggered
the JavaScript to cause the effect of
| | 05:18 | this open and close right here on the web
page as I click to open and click to close.
| | 05:23 | And we added some markup that
indicates what's supposed to show and hide when
| | 05:28 | that button is clicked.
| | Collapse this transcript |
| Adding a dropdown menu to the navigation bar| 00:00 | So over the course of the last few videos
we've built this fully responsive navigation bar.
| | 00:04 | We know that it will respond to smaller screen
sizes by hiding this navigation where required.
| | 00:10 | You can access it through JavaScript, which
will make a nice easily clicked on navigation
| | 00:16 | bar work great on a mobile phone.
| | 00:18 | But you might be wondering about one
aspect of this bar that we haven't explored yet.
| | 00:22 | And that is there's only one level of
navigation here, just the primary navigation is present.
| | 00:28 | What about secondary
navigation or tertiary navigation?
| | 00:31 | How do we show that on this web page?
| | 00:33 | Well, certainly you could always take the
approach of plugging in, in left column or
| | 00:38 | right on this web page or even another horizontal bar
that might contain those secondary or tertiary links.
| | 00:46 | But a popular approach these days is to
include dropdowns, and I get requested to teach how
| | 00:52 | to make dropdowns all the time.
| | 00:53 | Well, finally, I'm going
to show you how to do it.
| | 00:56 | Dropdowns are very easy to add here within
Bootstrap, and I'm going to walk you through
| | 01:02 | how we might go about doing that now.
| | 01:04 | So down here in Dreamweaver, I've added
a bit of code to this particular page.
| | 01:11 | So here is the link for schedule.
| | 01:14 | Notice that starts with an li
then we have our a tag with the /a.
| | 01:18 | But the closing li
doesn't occur until down here.
| | 01:21 | Remember that these lists are
actually nested within the li.
| | 01:25 | That is the correct way to mark them up.
| | 01:28 | So we have our ul here inside of that li with a /ul
down here, and I have three bullets inside of that.
| | 01:36 | What I'd like to do is have
this become a dropdown menu.
| | 01:39 | So let's take a look at where
we are at this particular point.
| | 01:43 | If you just open that document and then take
a look at it inside of Firefox, you'll notice
| | 01:49 | that we have indeed a bulleted list that
appears right under the word schedule, which is great.
| | 01:54 | But it's not really a dropdown, because of
course, it's showing right there on the page right now.
| | 01:59 | So we need to add some additional
styles in order to make this a dropdown.
| | 02:04 | The first thing I'm going to do inside of
Dreamweaver is for this specific li, the li
| | 02:10 | belonging to that word schedule, I'm going
to add a class of dropdown, which of course
| | 02:17 | indicates that a dropdown
will follow within this li.
| | 02:21 | Then in the href side of this I'm going
to add a class of dropdown-toggle, and then
| | 02:29 | I'm going to use that data-toggle which is
what is helping to integrate the JavaScript
| | 02:36 | data-toggle="dropdown" just like that.
| | 02:43 | So we've added a class of dropdown-toggle
and a data-toggle of dropdown to that a tag
| | 02:48 | that's associated with the word schedule.
| | 02:50 | Finally, what I want to do is add to the ul
a class of dropdown-menu which is going to
| | 03:00 | give me some styling here for the dropdown menu.
| | 03:04 | So if you go ahead and save that--Ctrl+S or
Command+S to save--Refresh the page inside of Firefox.
| | 03:11 | Now you see that we have a navigation bar.
| | 03:13 | When I move my mouse over schedule and I
click, you'll notice that I get a dropdown menu.
| | 03:18 | So there's Day One, Day Two, and Day Three,
and all these are clickable and will take
| | 03:23 | you to those particular pages.
| | 03:25 | How did I know that schedule was
the one that had the dropdown menu?
| | 03:28 | Well, I knew because I coded it.
| | 03:30 | But how is a visitor of my web page going
to know that schedule is the dropdown menu?
| | 03:35 | An excellent question.
| | 03:36 | It's likely that a visitor isn't
going to know that that's a dropdown menu.
| | 03:40 | So we should probably indicate somehow that
schedule has got more behind it than just a single link.
| | 03:46 | So here back within Dreamweaver, we can add
some additional code which will give us a
| | 03:53 | little triangle that will appear right
next to that word schedule that would indicate
| | 03:57 | that a dropdown menu is located there.
| | 04:00 | So right here after the word schedule, before
the /a, go ahead and put in a span class of caret
| | 04:11 | immediately followed by a /span.
| | 04:14 | This little bit of code is going to put in
that tiny little triangle arrow that would
| | 04:18 | indicate that the dropdown lives right there.
| | 04:21 | Save your page, Ctrl+S or Command+S, refresh
the page inside of Firefox, and now the word
| | 04:27 | schedule has the little triangle right next
to it, which would indicate that if you click
| | 04:31 | on that you now have some
additional options to explore.
| | 04:35 | So dropdowns are pretty straightforward
to add to our navigation toolbar.
| | 04:40 | Actually, they're pretty easy to
add to tabs and pills as well.
| | 04:43 | I'll show you how to do that in the next video.
| | Collapse this transcript |
| Adding a dropdown menu to the tabs and pill navigation| 00:00 | Back in the last chapter we built a pill-based menu,
and we're taking a look at a format of that right now.
| | 00:07 | The pill-based menu had this rounded
cornered blue rectangle indicating where you were on
| | 00:13 | the page, and when you rolled over the navigation
you had this light gray one that goes across the tab.
| | 00:18 | I've added to this a secondary navigation right
under schedule, which is where it appears right now.
| | 00:25 | And I'd like this to be a dropdown menu, but at the
moment it's displaying on this page in a static manner.
| | 00:31 | So let's take a look at the code and see what
we need to do to make this truly a dropdown menu.
| | 00:37 | So if you take a look here inside of
Dreamweaver, you can see that I have added this bulleted
| | 00:41 | list right here, lines 23 to 27.
| | 00:44 | They are located inside of the li for schedule.
That is the correct way to mark this up.
| | 00:49 | Note that you start with the opening tag
here on line 22 and the closing tag on line 28.
| | 00:54 | In between you have the bullet
list, each with its own bullet.
| | 00:58 | So to make this a dropdown menu, there are
several things we need to do to make that happen.
| | 01:03 | First of all, the li which contains the word
schedule, we're going to need to add a class of dropdown.
| | 01:11 | We'll also need to add a class to
the ul located inside of that li.
| | 01:17 | We're going to give that
a class of dropdown-menu.
| | 01:23 | So just adding those classes
isn't going to do much for us.
| | 01:26 | What we need to do now is make sure that the
JavaScript is integrated into this, and where
| | 01:30 | that will be applied is inside of the
href, which goes around the word schedule.
| | 01:35 | So here we will add a class of dropdown-toggle,
and then we're going to add that data-toggle
| | 01:44 | which as I told you has to do
with the JavaScript of dropdown.
| | 01:51 | And those two particular items the class of
dropdown toggle and the data-toggle of dropdown
| | 01:56 | will give us the functionality
that is required to make this work.
| | 02:00 | So go ahead and Ctrl+S or Command+S to save
the page and refresh this in Firefox, and
| | 02:07 | you'll see here that we have the menu.
| | 02:10 | It doesn't look like there's a secondary
navigation, but when I roll over the word schedule and
| | 02:14 | click, you'll see that I
get a dropdown that results.
| | 02:17 | So that's pretty cool.
| | 02:19 | But how did I know that I
can click on the word schedule?
| | 02:22 | Only because I coded it.
| | 02:24 | We need to have some sort of indicator
that the dropdown lives there under schedule.
| | 02:28 | So to do that, we could add a little
triangle that points downwards, and that would be a
| | 02:34 | great indicator of that schedule is
interactive and has a dropdown associated with it.
| | 02:38 | So to do that, right here we have the word
schedule. Just after that I'm going to put
| | 02:43 | a space followed by a span
class of caret and a /span.
| | 02:49 | It's exactly what we just did in
the navigation bar dropdown video.
| | 02:56 | So go ahead and save that, and if you refresh
in Firefox, you'll see that the word schedule
| | 03:02 | now has a triangle by it.
| | 03:05 | That triangle's clickable and our
dropdown menu appears underneath.
| | 03:09 | So based on the code that I've given you
here, you can add as many dropdown menus as you
| | 03:13 | wish to your web pages.
| | 03:16 | You can continue to add those through
every navigation item that's on this page.
| | 03:21 | You could even apply them to some of these
secondary navigation items. You could give
| | 03:26 | them a nested list as well and have
another dropdown appear from there as well.
| | Collapse this transcript |
| Tabbing within the same page| 00:00 | On occasion, you may wish to tab between
blocks of content within the same web page,
| | 00:05 | usually through a tab like interface where
you can click on various tabs within the page,
| | 00:11 | see different kinds of information without
the page having to reload or make another
| | 00:15 | call to the server to switch between pages.
| | 00:18 | Bootstrap has a great interface
for making this kind of effect.
| | 00:23 | So our starting web page looks like this
right now. I have a bulleted list at the top with
| | 00:28 | some names, and underneath I have some text,
it's just marked up with h3 for a title and
| | 00:34 | a paragraph of text that appears underneath.
And we can see that here inside of Dreamweaver.
| | 00:41 | So there's my bulleted list, and then
underneath here's just a bunch of h3s and paragraphs.
| | 00:47 | And what I'd like to do is turn this into
a bunch of tabs that I can click on and see
| | 00:52 | each of these artists' bios displayed individually
rather than altogether on a page like a laundry list.
| | 00:58 | So to make that happen, there's a
couple of things that we need to do.
| | 01:02 | First of all, we are going to need
to do some markup here on the tabs.
| | 01:05 | So we are going to start by taking this ul, and
we are going to add a class of nav and nav-tabs.
| | 01:16 | Then I need to indicate which one of these
tabs is going to start off being the active one.
| | 01:20 | So I guess I might make the first the active one,
so I'll go ahead and give that a class of active.
| | 01:26 | Obviously, I could have started with any of
the other tabs as the active one, if I wished.
| | 01:31 | Then I am going to add a data-toggle to the
a href tag for all of these, and the data-toggle
| | 01:37 | as we know is what's going to help pull in the JavaScript
to make this page more interactive, data-toggle="tab".
| | 01:46 | And we need to apply that to all three of
these links, so I am just going to highlight
| | 01:50 | that, Ctrl+C or Command+C to copy, Ctrl+V
or Command+V to paste, so that it now appears
| | 01:57 | in all three of these links.
| | 01:58 | And finally, what I need to do is connect
the specific link for Constance Smith, for
| | 02:04 | example, with the chunk of
text that's going to be below.
| | 02:07 | The links that I have up there right now are just
sort of dummy links. They don't actually go anywhere.
| | 02:12 | So somehow I need to
differentiate between these.
| | 02:15 | So I'm going to give these names, so right
here with the first one I am going to call
| | 02:19 | this rewington, leave the Pound sign there
in the front, the second one I'll call #smith,
| | 02:26 | and the third one I'd call #ta.
| | 02:28 | This is exactly what we would do if we were using
anchors further down on the page with links on the top.
| | 02:35 | The links the way these were coded would skip
on down to a link say, a name ta, for example.
| | 02:42 | It would jump on down the page
wherever that happened to be placed.
| | 02:44 | We are going to do something similar here,
although JavaScript driven. All right!
| | 02:48 | So that's the markup that we
need for the list at the top.
| | 02:51 | Then underneath we're going to
need to add some markup here as well.
| | 02:56 | First of all, I'm going to add a section to go
around all of this with a class of tab-content.
| | 03:07 | That section class is important because it's
defining that this is the actual content for
| | 03:11 | the web page here, and that's
why I am using the section tag.
| | 03:15 | So I'm going to go down
and close that at the bottom.
| | 03:19 | Then after the section tag, I'm going to add an
article tag here, article with a class of tab-pane.
| | 03:31 | So this article tag is going to get wrapped
around what effectively is an article,
| | 03:36 | the h3, and the paragraph.
| | 03:38 | So I am going to go ahead and end that article
down here, and I can indent this h3 and the p
| | 03:45 | because now they are
inside of the article tag.
| | 03:47 | So what I did is just highlighted all
those lines and just hit the Tab key.
| | 03:52 | So I am going to go ahead and add the same
article class of tab pane to the top of
| | 03:58 | each one of these little mini articles, and
always of course, make sure you close your
| | 04:05 | tags, and I will Tab over the content
here to show that it's inside of the article.
| | 04:13 | One more time, paste again the article class of tab-pane",
and we'll put in our /article down here in
| | 04:20 | the bottom, and we'll tab
over this chunk of code. Okay.
| | 04:25 | So we have three articles
with a class of tab-pane.
| | 04:28 | We also need to add to the same article tag a
couple of other pieces of information, one is an id.
| | 04:34 | The ID in this particular case for
this first one will be Rewington.
| | 04:39 | Those of you who think about IDs in terms of
CSS almost exclusively, if you're a front-end
| | 04:46 | developer who just works with HTML
and CSS, IDs are also used in JavaScript.
| | 04:51 | And so what we're doing here is we are
connecting the link at the top with #rewington to an
| | 04:57 | ID down here underneath, the ID of rewington.
We're connecting these two together.
| | 05:01 | So whatever you called your links up here
on the top, you're going to need to take that
| | 05:06 | and identify them as IDs
beneath inside of these articles.
| | 05:09 | So I'll go ahead and add an ID of
smith and further down an ID of ta.
| | 05:22 | And one final thing that we're going to need
to do, since Riley Rewington is the tab that
| | 05:28 | I want to have come up by default when the
page loads, I have already specified that
| | 05:32 | up here on line 18 as having
an li with a class of active.
| | 05:36 | I'm also going to need to identify which
piece of content is going to come up by default
| | 05:42 | underneath, and that of course is
the article here about Riley Rewington.
| | 05:47 | So I'm going to indicate that that should
come up when the page loads by adding a class
| | 05:53 | of active to this article.
| | 05:57 | So we have tab-pane and active here for the article class,
while the other article classes are just tab-pane. All right!
| | 06:03 | Now that we've got all this markup in place,
go ahead and save your page, Ctrl+S or Command+S
| | 06:08 | to save, and Refresh the page in Firefox, and
you'll see that we have tabs now going across
| | 06:15 | the top of the page.
| | 06:16 | When I click on Constance Smith, you can see
that her information loads here inside of the tab.
| | 06:22 | The little dotted box I have up there
because I have selected it at the moment.
| | 06:26 | If I click away from that tab, that box goes
away, and here's Xhou Ta, and you'll see that
| | 06:32 | the bio for him is listed here as well.
So we can click around in these tabs.
| | 06:38 | Notice that the URL for the page never changes.
We are just displaying different sections
| | 06:42 | of the page here inside of these tabs.
| | 06:45 | So this is a really handy effect. I see it
in use on a number of websites these days.
| | 06:49 | It's a little bit more interesting than
those long laundry lists or skipping things down
| | 06:54 | the page we used to do back about 10 years ago.
| | 06:57 | This is a lot more fun, a lot more
interactive, and certainly more attractive.
| | 07:01 | Some of you might be wondering about Search
Engine Optimization now that I've separated
| | 07:05 | these out between the tabs, and the answer
to that is Search Engine Optimization should
| | 07:11 | not be impacted at all. Why is that?
| | 07:14 | Well, if you take a look at
the raw HTML for this web page,
| | 07:18 | the raw HTML is all spelled
out right there in the web page.
| | 07:22 | So Google would be able to see that
when it comes to visit your website.
| | 07:25 | It can read all of the content there.
| | 07:28 | It won't see the JavaScript, it won't see
the JavaScript effects, it will see the links
| | 07:32 | at the top of the page, they will see that
those link down to further into the page where
| | 07:37 | the IDs are, but the page is very readable
to Search Engines, and all of the tabs can
| | 07:42 | be indexed very easily
by Search Engine Spiders.
| | Collapse this transcript |
| Creating modal windows| 00:00 | A Modal window is a div that's actually
embedded within your web page that appears on top of
| | 00:07 | your page on a grayed background, and
it looks kind of like a pop-up window.
| | 00:12 | It's not a true pop-up in that it
doesn't appear in a separate browser window.
| | 00:16 | You may have seen this on
many different websites.
| | 00:19 | I'm here on the Bootstrap
website, getbootstrap.com.
| | 00:24 | I am on the JavaScript Tab, and
I am on Modal over on the side.
| | 00:28 | If you scroll down a little bit here, you'll
see down here we have a link to a live demo.
| | 00:33 | If you click this big button here that says
Launch demo modal, you'll see how the screen
| | 00:38 | grays back a bit, and this
window seems to scroll in to place.
| | 00:43 | The window is comprised of three parts, we
have a heading up here on the top with a little
| | 00:46 | Close button over here
on the side, the little X.
| | 00:49 | There is some main text here to keep the Modal
window that's very long from scrolling off the web page.
| | 00:56 | You see there's a scrollbar here on the side.
| | 01:00 | Then down at the bottom, we have a button to
close the window or a button to save changes.
| | 01:05 | The Save Changes button may be a little bit
distracting to you because you're wondering
| | 01:08 | what can you possibly change within this window?
And you'd be correct, there's nothing in that
| | 01:12 | window you can actually change.
| | 01:14 | However, if this window was hooked up to a
database, you might be able to make some changes
| | 01:19 | within a Modal window and save those changes.
| | 01:22 | Many content management systems
use a feature like this. All right!
| | 01:25 | I am going to close that.
I am going to close my tab.
| | 01:29 | And this other tab is our modal.html
file, which is in your exercise files.
| | 01:34 | This is our starting point here
for how this is going to be laid out.
| | 01:37 | Up at the top of the page
here is the text, click me!
| | 01:41 | That is going to be our big
button that we'll see on the web page.
| | 01:44 | The rest of this will wind
up being the Modal window.
| | 01:47 | And you see here the button with the X on it will
wind up being that little X that appears in the corner.
| | 01:52 | We have some text that we'll be talking about
what's going on in the window, and then down
| | 01:56 | at the bottom, there's a
button to close the window.
| | 01:59 | So we need to get to styled-up, and we need to apply
some JavaScript to make the window appear and disappear.
| | 02:05 | So, if we hop on into Dreamweaver, here's
all of the code here that I just described,
| | 02:12 | here is the link at the top, and we'll
apply quite a bit of styling, and JavaScript to
| | 02:18 | that in a little bit.
| | 02:19 | Then I have a section here for the web page.
The section is comprised of three parts.
| | 02:24 | There's a header which contains that
little X button as well as the heading.
| | 02:29 | We have some text that describes the event.
| | 02:32 | This is just the blah-blah that's there
inside of the window, and then down at the bottom,
| | 02:36 | we have the footer with the Close button.
| | 02:38 | So, I am going to walk you through how
we're going to set up the styling for this.
| | 02:42 | First of all, starting up here at the top
with the header, we are going to give this
| | 02:46 | a class of modal-header.
| | 02:48 | I am going to wrap a div around
the text here that's in the middle.
| | 02:54 | I am going to give that div
with a class of modal-body.
| | 03:03 | We'll tab these over a little bit.
Make the code a little easier to read.
| | 03:08 | And I'll close the div down here.
| | 03:13 | Then of course, for the footer, we'll give
it a class of modal-footer. So, there we go!
| | 03:20 | We've identified the three sections of our
Modal window, a header, a body, and a footer.
| | 03:25 | So that's all in place.
Now, let's apply some styling to the buttons.
| | 03:29 | So, the button down here at the bottom, the
Close button, I need to give this a class,
| | 03:35 | and I am going to give it a class of button,
btn, and styling of these buttons I covered
| | 03:39 | in an earlier video in the CSS chapter.
I want to make this button blue.
| | 03:44 | So, I'm going to give it another class of
btn-primary, which will give it a lovely blue color.
| | 03:50 | For the button that's further up on the page here,
the little X, we'll do something slightly different.
| | 03:56 | We're just going to give this a class of close.
| | 03:59 | Now, for both of these buttons, the functionality
behind them is exactly the same, and what
| | 04:05 | that is is when they're clicked,
the Modal window should go away.
| | 04:09 | And there is an attribute that we can add
that will make that magic happen and talk
| | 04:12 | to the JavaScript, that is data-dismiss,
and that is modal is the value.
| | 04:20 | So, I need to add that to both of those buttons,
data-dismiss="modal". There we go! All right!
| | 04:30 | Now that that's all in place, let's style
this link that's up here at the top of the
| | 04:34 | page, the one that says click me!
| | 04:36 | We'll go ahead and give that a style,
we'll give it a class of btn for button because
| | 04:41 | we want it to look like a button.
| | 04:43 | Just to be different, let's give it a
class of btn-warning, which is going to make it
| | 04:47 | a lovely shade of orange.
| | 04:50 | And I also want it really big, so
let's give it a class of button-large.
| | 04:54 | So, that starts off with the styling there.
| | 04:57 | The next thing I need it to do is make sure
that when the button is clicked that something
| | 05:02 | happens to this whole section that
contains the Modal window information.
| | 05:07 | And the way to do that is to change the href here
from just the pound sign to something like launch.
| | 05:15 | And up here in the section, I'm going
to give this a matching ID of launch.
| | 05:21 | Remember, that the ID here for section, whatever
it is that you call that, should then be called
| | 05:26 | via pound that ID name within the href.
| | 05:30 | Then last of all in the href area, I am
going to add a data toggle, data-toggle="modal".
| | 05:43 | And that will mean that it will call up
the Modal window when this button is clicked,
| | 05:48 | and that data-toggle will be talking to
the JavaScript that makes that happen.
| | 05:51 | Finally, let's add a little bit
of styling here to the section.
| | 05:55 | So, we're going to give this a class of modal.
| | 05:58 | That's going to control the
appearance and disappearance of the window.
| | 06:01 | We'll also give it hide and fade.
| | 06:06 | Hide and fade will help drive that nice slide as
it comes in and as it goes away again. All right!
| | 06:12 | Now that we've got all of that in place, go
ahead and say Ctrl or Command+S to save, and
| | 06:17 | off to Firefox, just hit your Refresh button.
| | 06:20 | And you'll see that we have a big orange
button that says click me! on this page.
| | 06:24 | Go ahead and click it.
| | 06:25 | Lo and behold, here comes your Modal window
exactly as you would expect it to appear.
| | 06:31 | Notice that when I click the Close button
at the bottom, it goes away, and the screen
| | 06:35 | comes back to full brightness.
| | 06:37 | If I click this again, I can click the little X
in the upper right-hand corner, and it behaves
| | 06:42 | exactly the same way as the Close button.
So Modal windows maybe very helpful to you.
| | 06:48 | They're nice for search engine optimization
because all of the text that's within that
| | 06:51 | Modal window is available to search engines
to read as opposed to a pop-up window which
| | 06:56 | is a separate HTML document.
| | 06:58 | So, this is something even though we're
using JavaScript, it shouldn't detract from your
| | 07:02 | search engine optimization results, and
you now have everything you need to put Modal
| | 07:08 | windows to work inside
of your Bootstrap website.
| | Collapse this transcript |
| Creating a photo carousel| 00:00 | The last JavaScript effect I am going to show you
is the Image Carousel, and this is so cool.
| | 00:05 | People love these carousel kind of effects.
| | 00:09 | You see it in action
right here on this web page.
| | 00:11 | Here we've got a series of photos that are
scrolling on by with some text underneath.
| | 00:17 | We have little buttons here so that I can click
to the next image as fast or as slow as I want.
| | 00:21 | I can go backwards.
| | 00:23 | These carousels are pretty much everywhere
on the web these days, and there's a thousand
| | 00:28 | different ways to code them. Well, we're
going to learn the Bootstrap way of doing it.
| | 00:32 | So if you take a look at your starting Carousel
document, you will notice that we have some photos here.
| | 00:37 | They have a little bit of text
that go underneath of all of these.
| | 00:41 | There is down here at the bottom some tiny
little left and right arrows, and if we take
| | 00:46 | a look at this in Dreamweaver, you'll
see that that code is exactly the same.
| | 00:50 | We have some images, we have some headings
with little bit of text underneath, and then
| | 00:56 | down here at the bottom we
have little left and right arrows.
| | 01:00 | Now what we need do is mark this up
to make it all work for the carousel.
| | 01:05 | So first of all, the easiest thing to add
are some divs here which will designate where
| | 01:10 | the captions for this carousel are going to be.
| | 01:13 | So just after the image, before the h4, we are
going to add a div with a class of carousel-caption.
| | 01:24 | And then of course, after the last
closing paragraph, make sure you close the div.
| | 01:31 | And I am going to do that three times here,
div with a class of carousel-caption, and one
| | 01:43 | more time, div class
carousel-caption, /div. Okay.
| | 01:57 | So we have marked off where those carousel
captions are going to appear, now we have
| | 02:02 | basically a unit that occurs here, the image plus
the carousel caption, that is all a grouping itself.
| | 02:08 | So I am going to add another div for that,
this is a div with a class of item, and I
| | 02:20 | am putting a little bit of spacing between
each one of these groupings just to make things
| | 02:23 | a little bit easier to read, div class
item, one more up here on the top.
| | 02:40 | You will notice that once again, as I have
done with many of the other videos in this
| | 02:48 | title, I am not using the grid
system here for displaying this carousel.
| | 02:53 | Of course, you could take the code that I am
going to put here in between the body tags,
| | 02:57 | you could copy that into one of the columns
inside of your grid to display on your website.
| | 03:04 | That's a very simple thing to do.
| | 03:06 | The other thing I want to add here for the
very first item is I want to designate this
| | 03:10 | as an active item. In other words, I want
the carousel to start with the first one.
| | 03:15 | So I am going to designate it as such.
Now I need to add just two more divs.
| | 03:20 | I am going to wrap everything that you see here
in another div with a class of carousel-inner,
| | 03:33 | scroll all the way down to the bottom, and
we are going to close that tag just before
| | 03:38 | the href down here in
the bottom of the screen.
| | 03:42 | Then just above that div with a class of carousel-inner,
as you might expect since it was called inner,
| | 03:47 | we have to have an outer one, right?
| | 03:49 | So I am going to add one
final div here to the mix.
| | 03:53 | This will be div with a class of carousel.
| | 03:59 | And then I am going to close that all the
way down here just after the hrefs down
| | 04:06 | here in the bottom, which will
be that little arrow either way.
| | 04:10 | Okay, in that div with a class of carousel,
also give it a class of slide. This will cause
| | 04:16 | the images to have that wonderful
sliding effect from one to the next.
| | 04:21 | Without the class of slide, what will happen
is they will simply appear one after the other.
| | 04:24 | And I am also going to give
this an ID of artists. All right!
| | 04:30 | So that's all the markup that we need
for the actual content of the carousel.
| | 04:35 | Now we are going to scroll on down to the
bottom of the page where we have these links
| | 04:39 | with the left and right arrows, and we are going to
apply some additional classes and information down here.
| | 04:46 | So for our left quote, let's go
ahead and apply some styling to this.
| | 04:52 | We give it a class of left
as well as carousel-control.
| | 04:59 | As you would expect, that's going to apply
to the left arrow, make it go to the left
| | 05:02 | side of the images, and likewise for the next
arrow, let's go ahead and give that a class
| | 05:11 | of right carousel-control.
| | 05:16 | Instead of the href of just Pound here, we
are going to give this an href of #artists.
| | 05:22 | Just as we have seen before, the ID above needs to
match the href so that the JavaScript can work correctly.
| | 05:30 | And last of all is the action here that we
have to have on this href, and in this case
| | 05:35 | it's data-slide, and that will be previous, P-R-E-V ,for
the first one and data-slide="next" for the last one.
| | 05:50 | All right! So now that we have got all that
information packed into these a tags down here at the
| | 05:56 | bottom of the screen, we are
ready to save our document.
| | 05:59 | So Ctrl+S or Command+S to save the document.
| | 06:02 | Go on down here to Firefox and refresh your page,
and you should see a fully formatted carousel.
| | 06:10 | It does stretch all the way across the page,
that's because, of course, the containing element
| | 06:16 | for this particular page is the body tag.
| | 06:18 | I don't have the scaffolding in place
to make this carousel smaller or larger.
| | 06:23 | If I click my arrows here, you can see that the
images jump in between just fine. Isn't that great?
| | 06:31 | And of course, we have the text
underneath, describing each one of our images.
| | 06:35 | So the image carousel is a great way to show
off photos on your website, add a little bit
| | 06:39 | of sizzle and interactivity, and
they are very fun and interactive.
| | Collapse this transcript |
|
|
ConclusionOther resources| 00:00 | Thanks so much for taking the time to
watch Up and Running with Bootstrap.
| | 00:03 | I'm excited to share Bootstrap with you,
because this great framework will be incorporated
| | 00:08 | into Joomla! 3.0, due to be
released in late September 2012.
| | 00:13 | Be sure to check out my other videos at lynda.com,
including Website Strategy and Planning, which
| | 00:18 | will help you plan your website before you
start building. And if you love Bootstrap
| | 00:23 | and want to try it out as part of a Content
Management System, well, you will need to know
| | 00:27 | a Content Management System first.
| | 00:29 | My Joomla! 2.5 Essential Training course is a
great way to come up to speed with Joomla! quickly.
| | 00:35 | Thanks again, and I will
see you in another video.
| | Collapse this transcript |
|
|
