[MUSIC]

At the talk, I will be.

Up and Running with Bootstrap.

And basically we'll just be covering the key pieces of Bootstrap.

That I believe are good to wrap your head around.

And get started with the framework fairly quickly.

All the opinions on what you might need to get up, and running are my own.

Which I think is important to other people,

most definitely have different ideas.

yeah, so again,

my name is Bess, I'm currently a JavaScript engineer at Articulate.

Though I was at a [UNKNOWN] I did really enjoy my time there, so

I'm really glad to be back, helping and showing sharing my

information [LAUGH] that I have gather on Bootstrap with you all.

So Why I think this talk might be helpful?

Cuz I think that docs can be a little bit overwhelming when you

just crack open Bootstrap online and take a look at what it offers.

So I find it personally easier to conceptualize,

what Bootstrap does by looking at examples.

And so that's what I'm going to try to

focus on with a lot of my code is to show you some examples, so

that you all can wrap your head around what's actually going on.

So the first question I had in mind When I first saw Bootstrap,

or heard about it, is why would I use it?

Makes [LAUGH] sense right?

In general it eases common, painful, and

repetitive tasks often associated with websites.

I am sure we all have those.

so, if you're looking for a quicker, easier, more uniform way to build and

set up a site then Bootstrap, might be a good way to go.

So it obviously helps with a few things, but what does it actually help with.

These are the things that I find can help me out when I'm using Bootstrap.

So this is definitely not an all inclusive list, but here are a few of the items.

It helps with responsive setup and utilities related to responsiveness.

It can help you set up grid layouts.

It normalizes styles across browsers.

It includes typography and

common HTML styling, so things look pretty good outside of the box.

It allows for

component building such as dropdowns, navigation, glyphicons and pagination.

And there is a variety of jQuery plugins for

a variety of UI interactions, such as modals, tooltips, and carousels.

A good thing to keep in mind when considering all of these is that,

all of them are in fact optional.

You can download a custom builds of the pieces you might want to use.

For example, if you don't wanna use the J the JS plugins,

no worries, you don't have to.

But those are if you want to just include them for

dropdowns you can do that as well.

So now we know what Bootstrap can actually help with,

when is a good idea to use Bootstrap?

I think this is an important question

because frameworks can often be overused as I'm sure we all know.

So here are some places where, I think it's a good idea to use or

experiment with Bootstrap.

First, when building a new site from scratch.

Second, when exploring ideas, or prototyping.

Third, when trying to achieve base line browser consistency.

And four, when you're looking for solid documentation from the framework.

And that can be a pretty big one if you're really looking for a framework.

There are like I said, a.

Because the framework can be overused, I really do think it's important to

think about where you want to apply Bootstrap and when.

When considering it for a project.

Cuz Bootstrap is not a silver bullet.

And it's also worth noting that if you have a need for older browser support.

Some of the Bootstrap features are not available in IE 8.

And below, like, of course.

I just wanted to move that and you might wanna look at the Getting Started Guide on

the website, if you have more questions about that.

So, for the purposes of this talk, what will we be covering?

The core components of Bootstrap that enable us to build faster / smarter / and

funner websites.

I recommend following along with the documentation if you want to.

It's to [LAUGH] command.

Just because that's the way I tend to like to learn.

To read along as I go so there's [UNKNOWN] there.

To take a look.

So first things first.

Now that we know, why we might wanna use it,

and what it kind of can offer how do we set up?

There are a lot of ways to integrate Bootstrap.

I would definitely look through the options, and

use the one that best suits your needs.

You can integrate it in with your current SAS or WES project.

Use [INAUDIBLE] download the library itself.

Or set, or use the CDN links for both the CSS and the JavaScript.

I think if you're just getting setup and experimenting, the CDN links are fine.

To get going and get a preview of, of what Bootstrap offers.

So I'm going to go over quickly a basic template that I

think gets the gist of what Bootstrap offers right away and

enables you to just start [LAUGH] throwing things in there as it were.

I have used this CDNs in this simple template,

which is different than the sample template on the website.

So I think if you grab the basic template on the Bootstrap website,

you still have to download the library files.

Here you can just copy and paste this into a jsFiddler code pan, or

save it a new HTML file and you should be able to run it.

One thing worth noting is that there is this HTML5 doc type.

And just a normal HTML5.

You need to give 8, and a couple other things that I'll go over in a second.

But we have the the CDN, CSS, for Bootstrap.

And then, we actually have the body of the HTML.

So really the only things here that are a bit extrapolated,

are this div class of container.

Which I will mention in a second in this hello world.

So really there's not.

Oh and then, sorry.

There's jQuery which is necessary for

the Bootstrap plugins JavaScript plugins to run.

And then the Bootstrap JavaScript itself.

So, if I was to run this demo.

You don't see a whole lot,

but you do see that the container is at least centered to the page.

It's not leading to the left edge.

And the header looks pretty good for just being normal inch one.

And if you see this locally, then your own file is good.

Instruct should be ready to go.

All right, so before I delve into features.

I think it's a good idea to review the core basics of what the framework sets up,

and the point of view it comes from.

The first thing to know about Bootstrap is it's ulti-mobile first.

We don't need to add helpful classes to override,

that would be considered desktop.

Quote unquote styles.

Mobile first means just that.

If you're not familiar with the term it's just the default framework, is built for

mobile without needing further tweaks from the beginning.

There is one thing you probably do wanna add though,

which was in the previous template.

You will want to add this meta tag in your HTML.

To ensure that proper mobile and

good rendering is available, and does indeed happen so,

and that is in the docs, again because I find the docs a little bit overwhelming,

I wanted to point out some of the sort of essential setup

details If you forget this part [LAUGH] and your mobile experience isn't working.

You could really end up racking your brain around,

why it might not be rendering correctly.

So let's continue.

More on what you get out of the box.

The essentials are basically handled when it comes to CSS styling.

When you include Bootstrap.

So this means that all the common styles for

the HTML are normalized across the browsers.

And Bootstrap just sets up a few small base styles.

Which is fairly minimal one is that the background color is set to white.

And the base font size is set to 14 pixels with a line-height of 1.428.

And this might not seem super important to you,

but I, I do think it's a good idea know what has been set, before you override.

If you're using less, there are variables for all of these.

There's a font family base, a font size base, and line-height base.

That you can override and use within your code.

And I believe in terms of basic style setup,

the only other style that gets set up is underlines only cover.

These sort of common setup styles can be found within scaffolding.less.

So.

On to the more fun things.

Bootstrap is responsive by default.

Which means it will respond to various, browsers and viewports.

The only thing we want to add to ensure that the styles cooperate as you expect,

is this container class, which we had seen in our previous template.

And the container class sets a width that is going to

be based on your current viewport at various different sizes, and

if you want your container to be full width the classes container-fluid.

But this is almost always the first element that you put a style on.

And then you continue downward with your other Bootstrap, classes, and

your normal HTML.

So, now we are onto grids, and that's where the fun really starts.

It's also where the complications [LAUGH], the complicated code or

classes usually start as well.

There are a couple.

Things to keep in mind when setting up grids.

I'm just gonna restate myself a little.

Obviously you want the class of container.

But the first actual rules of the columns and grids themselves is you want.

A div class, it could actually be I guess any element.

But typically it would be a dev, [COUGH] excuse me, with the class of row.

And that just defines row that the columns are going to live in.

And that they will span full width of the container.

And then within that row, you want to set your column.

And the main probably rule, and the one to keep in mind is that all

columns must equal 12, if they want to span the whole width of the row.

So in the case of this column, it is set to, to fill the full width of the mural.

You might be wondering what that prefix is for, that 12.

And those are different column sizes you can specify.

Or, sorry, different viewport sizes, you can specify based on the size.

So, there are four, I believe.

There's column extra small, column small, column medium and column large.

So, all of these are different column sizes that get applied

at those various, at various viewports which are set in the documentation.

You can see why this is kind of tricky.

But if you look at the documentation for grids I have The link here below,

it outlines the sizes that these could be set at.

So if we run this code, we can see,

as I mentioned I have this row and it's taking up the full.

The columns are taking up the full width of the row, so

it's wrapping in this space.

And then we have all below that, another row with another column.

And this column is set to 8.

So it's gonna span 8.

And then another one which spans 4.

So therefore, it takes up the whole role which equals 12.

And That is why it plays itself out so nicely when we run the demo.

Yes so you might be wondering what's the benefit of using various sizes

and how do they actually get figured out and what are the breakpoint sizes.

This side is just to give you a little more information on.

We start get a size correspond to in terms of the column prefix.

Basically on those extra small sizes since this is

a mobile first framework there's no media query and this is the default layout.

In this case the width is just going to be auto.

It's going to try to fit however much it can into the column.

For small devices that'll be so you use the sm prefix.

That's for 768, medium 992, and large 1200.

The first break point in which the columns start can stack horizontally

And vertically are in the median style so if you want your columns to

be all in line next to each other but then, you know, stack horizontally at

smaller screen sizes then you wanna just target the median size.

So if I run this in the demo, since the viewpoint is less than [UNKNOWN] 992 and

I run this, you can see that these columns are now stacked and this is the same code

as our original before, but instead of the small prefix, I have a medium prefix.

So really you have a lot of options for the ways that your columns get set up and

the way that they're aligned.

And also you have the awesome option to have your own column party, where columns

can have combined classes that result in various column layouts at different sizes.

Since this demo is kind of constrained to a certain size at this point I set up

a CodePen which kind of easily shows what can happen when you combine these columns.

For example I'll just talk through this kind of quickly, but

we have our container and our row and within that we have our column set up.

The first column,

the extra small size it will be spanning 12 which is the full length.

At the small viewport sides we'll be spanning 6, and the medium 8.

So at each viewport these, this will take up a different amount of your row.

For the second column setup, extra small will be 6, and

since the one that's above it is 12 this will be on the next line.

But because the mediums are 84 equalling 12,

hopefully this isn't blowing your mind.

[LAUGH] this, the medium size will indeed take up the whole row.

So if we go here and take a look my screen is too big.

It actually does resize.

So that's 8 and 4.

So they're taking up the full row I had I just have a little styling here to

show you the columns and if I try to make it bigger it should.

Let's see.

Yeah.

You can see that that these change accordingly.

That well this one.

It's creeping up around this one.

But they are all shifting in various sizes for the viewports though.

You can quite easily change the order of

the layouts by at various viewpoints, just by adjusting these columns.

And like I said this might.

I think I've said this.

[LAUGH] This might be the most complicated part of Bootstrap.

In terms of, just that you add and have to sort of think about, and think through.

But once you get started I don't think,

I think you'll find it's quite easy to conceptualize how to set up your grids.

There is one thing that's new to Bootstrap I think last month,

that I thought I might mention that you do have the ability to clear rows and,

you have the ability to clear rows at certain sizes.

So, in the second, or I guess, yeah, the second row,

we have some normal columns set in extra small size 6 and 6.

So, that would be 12.

And if we wannna make sure we clear that column,

we can quite easily put this class that says visible extra small block.

We can clear fix class which is a Bootstrap class.

And this will clear the row, only when the extra small is visible.

So that's really a can do later.

Clear rows at certain sizes So in the case of the small, this row is not clear.

We have four front, and four, so these three will all be in line.

So that's a lot of fanciness for the price of some classes.

[LAUGH] You might think holy, oh my gosh, that's a lot of.

Let's divide this.

And you might be right.

But I think that grids do require a lot of CSS in terms of

getting the layout working with that JavaScript.

So that might be something you wanna consider when you're

thinking about Bootstrap.

But this makes me nervous.

[LAUGH] For me it's, it's okay.

It's a wrapper div it's setting up the layout and the vPort bleh,

the view ports are being targeted specifically as such and I, I find that

it's sort of self documenting and easier than trying to do something another way.

One more thing on grids, is you can nest grids.

This looks funcated but it's indeed very handy, so

we can have our own column in a row.

And within that it's a, or the column itself is 9, it's a span of 9.

So it's not even going the full length of the row could be 12.

But in my column we have another row, and that row is set to 12.

So if we run this code we can see that the parent row,

that's, that would be the full length has a child column but it's only set to 9.

Even though it's only set to 9, the children are set,

can be set to 12 which will take up the whole length of the parent.

So, you can nest these grids quite easily even

if their parents aren't taking up the whole space the room that they're in.

And yeah, hopefully that is helpful if you've ever run across layout issues.

All right, hopefully that grid stuff didn't wanna make your head

explode cuz now we're gonna talk about HTML.

Which hopefully is lower, so.

So Bootstrap does offer a little more than just grim loveliness,

it helps support a vast array of HTML styles that are common and

often hard to pull off across browser.

So here I have my container, I have my row.

I have my eight span column.

And then, I just have a header, a paragraph, an unordered list.

Pretty simple.

And my second column.

Again, they are totalling 12.

I'm just sorta gonna repeat myself a little bit.

And we have a header, an image, and then,

we have a class image thumbnail and image responsive.

And, these are just some helper classes Bootstrap offers that you can look into.

And this just give you a thumbnail boarder around the image to be responsive.

Made paragraph, the class of lead or led.

[LAUGH] And but it's late.

[LAUGH] And this sets the font size to make it a little bit more a lead or

intro paragraph.

And then we have a button with this btn and tbn-primary stuff.

This is another set of Bootstrap classes that kind of

sets up your HTML to look pretty fantastic.

So I run the demo.

Looks pretty good.

Keep in mind that I have not applied any CSS at this point.

This is all Bootstrap.

So our header, our paragraph, our unordered list, our other row, our

awesome cat image has this little rounded thumbnail action and it's responsive.

This image is much bigger in real life and then we have our lead indent.

So, we about just set up our first semi Bootstrap site just using

some simple rows, columns, normal HTML, and a couple of helper classes along.

Make sure you well you don't have to but if you look at the documentation you can

see more examples of the type of HTML helper classes that are available to you.

So other than just normal HTML then what you

might expect from Bootstrap, I wanted to explicitly mention forms.

Because I think as we all know normalizing forms are pretty difficult and notorious.

And Bootstrap offers a million more of them.

A lot of different ways to style up a variety of form elements and layouts.

And that's really quite easy.

I think the first thing I wanna mention is you want to make sure you

build your form as you normally would which would be a form tag,

associating labels with inputs and all that good old semantic stuff.

And so really Bootstrap, with Bootstrap you're just putting in extra classes.

So the first thing you want to do if you want to lay it out in

a Bootstrap style is you can use this class one group which just sets up

spacing between the elements so everything's aligned well.

So we have a form group class.

We have our label and our input and this class of form control,

all it really does it set this input to be 100% width of its parent form group.

Then we have a second form groups, same thing.

A third form group, with the file input.

And this help block text, on some help text, which helps align help text.

Then we have a checkbox and a submit button with another class of button.

And this is a separate button style.

The default button style.

So if we run this, it looks pretty good, right?

Here's your form.

The labels and inputs that are associated.

Everything works pretty well.

accessibility, you can get more accessible I'm sure.

File chooser, this everything works.

Boom, button looks great.

And this is just one way to lay out the forms, right.

This is the newbie, the standard way to lay out forms.

Bootstrap also offers classes for inline forms.

Different sizes of the inputs validation states and disabled inputs.

Sort of the things you know and love about forms.

And again, even though we're adding quite a few classes,

make sure you keep your forms valid and built well.

Enough on the HTML.

Let's talk about components, or what you might consider widgets.

These are things you would build to solve commonplace hassles when

building a website.

One thing Bootstrap does really well and

one thing I've used quite a bit is glyphicons.

And they are icons built from a font that I believe are open source.

At least what, they were offered free to Bootstrap.

But they're built from a plot so that they resize gracefully.

And they can be used inline with any text elements and

HTML element that's inline and look fantastic, I might add.

So again, containing a row and a column, and then we have our header.

Let's say that we wanted to put an icon before this header.

It's quite easy.

We just want to insert span or another inline element.

Use a class of glyphicon, which is an indication to obviously use the glyphicon.

And then the second class here is the icon itself to use.

So here we're using the search icon.

The second paragraph or I guess the first paragraph is will I ever find my phone,

and I wanted to phone a nice phone icon so I did the same sorta setup with the span.

I'm using this phone icon.

And then in the second paragraph here we have our

button with a bunch of button classes.

Button, button default, button large, so here you can see like

Bootstrap just offers a ton of different ways to get things sized and set up for

the [UNKNOWN] that box.

But then within that button we have our glyphicon alternate phone.

So let's see what happens when we run this demo.

That looks pretty good.

I have to say.

Look at that glyphicon.

Here's my search glyphicon, my test,

my paragraph, my other glyphicon, and [UNKNOWN] button here another.

You can sort of think of glyphicons as

unsemantic images or something where you wouldn't actually, I

guess the main takeaway is you don't want to add anything else to this spam, right?

You don't want to give it any more classes.

it's, it's just supposed to be displaying some visual, visual text.

It's a font in this case, but it's a visual helper for the associated text.

So when you're gonna see glyphicons they should be used on their own

within an inline element, and do wanna make sure there's a little space here or

it can just bump up against the edge of the text.

But it's very helpful, it resizes, there's a lot of different icons to choose from.

And I have a lot of [UNKNOWN],

like your own personal emoticon set for building up sets.

So next we have dropdowns.

This is another common place component.

And I wanted to build this one up too,

because it does require the JavaScript plugin.

I'm sure, as you might know,

you can probably pull up dropdown to CSS, which, I think Trenton will be covering.

But in the case of Bootstrap, it does require JavaScript.

So how do you set up your dropdowns?

It's pretty easy.

I just there is a container class on this, I just turned it off.

The visualization, I turned it off.

Just so that you can, you can see that we mark the code here.

So we have our row with our column.

You want to wrap your whole dropdown in a div class of dropdown.

You want to figure out which element you wanna use for

your target, so you open the dropdown.

You can use pretty much anything you want.

In the case of this first one I'm using a button, again with my normal

awesome classes I have an additional class of the dropdown toggle

I think that the main thing to keep in mind when you're adding

the dropdown is the class doesn't matter so much as the data toggle attribute.

Since this is JavaScript, the JavaScript is what's looking for that instantiates.

It's looking for what it's going to open.

And so dropdown,

the data toggle attribute is what actually gets used to get the dropdown working.

So you'll wanna put the data toggle dropdown to

associate the button with the dropdown that should be opened.

And in the case of,

this, the dropdown we are opening is this dropdown, menu, excuse me.

This attribute is for accessibility.

And so it's quite easy,

all you really need is a dropdown class wrapping your dropdown.

An element will trigger the dropdown with the data toggle dropdown.

And then the associated dropdown text, element I mean.

And the second column we have another div class of dropdown, but

instead of a button toggle we have an anchor toggle.

Pretty fun.

And so we open this up, we run it, and we have, boom,

this dropdown triggered by a button and another dropdown triggered by an anchor.

Pretty easy peasy.

I wanted to note too I but in this caret which is another Boostrap helper,

it's not a glyphicon it's an actual caret.

Obviously it can associate as part of Bootstrap as well.

So that's how you'd setup your dropdowns.

So we got your glyphicons, you got your dropdowns, and

then you realize you need a nav.

So when a simple unordered list just won't do.

Bootstrap offers a ton of different navigation styling options.

And luckily for everyone it's just using, you know,

you can use your typical UL, it just styles that up nice and neat.

So I just have some text in a row.

And then in my second row I have a column with Nav [UNKNOWN].

And, only thing you need to indicate to Bootstrap that you want it to

be a Nav [UNKNOWN] class and then the Nav styling you might wanna use.

In this case of this first one we're using pill style, which is shaped like a pill.

[LAUGH] And the second one we're using down here in the second column,

it's a tab style navigation.

Again, there's an attribute for for Aria here.

If you're unfamiliar with Aria, Bootstrap documentations does go,

do go over some of this in a little bit of depth, in a [INAUDIBLE] accessibility.

So we run this.

We have some awesome looking tabs or navs, nav tabs.

Here's our pill ones and here are out panelly tab ones.

You might be thinking, oh that's awesome I want to show my panel.

Seem like you might be thinking ahead.

And that is another JavaScript component, but for the case you just wanted

a styling that looked like this and you wanted to write your own JavaScript, or

you want to triple [UNKNOWN] open in CSS, you could easily do that too.

This is just for the styling.

So navs, pretty rad.

Here's another component that I find handy that's a relatively simple one, panels.

Panels you can just think of it as boxes with borders around them and

some little stylistic help along the way.

I find panels really helpful for prototyping a website.

So if you're using Bootstrap, you just wanna get an idea out there.

You want to try things out, you want to move things around a panel can be a really

good idea to delineate some of your content especially into the column.

So here we have a container and a row, a column to 12 and a panel, so.

The panel is the first class you wanna use.

And then a styling class.

In this case, it's just the default panel.

I believe this might be optional, as well.

So this probably doesn't have to be here,

but I like to include it cuz it's a pretty common thing to add.

And then a panel body, which is just the, the content of the body.

In the second row, I have another column.

And in that I have a panel, with also a panel heading it's a separate div.

And a panel title, and

this just goes some extra styling love for the panel title obviously.

And then another panel body in the last one it's just another sort of panel.

So when I run this it doesn't look all that exciting, but

you have some delineated content set up.

Everything's in the columns correctly.

You have your title.

You could also have a footer, which I'm gonna put here.

But again, this is just really a nice component you can use.

And then you could override with your own styles later if you want to.

So obviously, I've covered only a few of these components.

And that's just beginning.

There are all type, different types of components you can use.

The other components include pa, paginations, that's not really a word.

pagination, wells, thumbnails, and common header styles such as jumbotron.

You may have seen that one.

It's like a giant, jumbo header which I show in a later slide.

You might want to take some time and read through those components if

you're wondering what might be helpful for you and your project.

Okay.

So now that we've talked through responsive, setting up grids,

what the basic HTML looks like, and

some of the components that you can use, I just wanted to chat about JavaScript.

Again, these are jQuery plugins, and that bears repeating just because

if you don't include jQuery, you might be unpleasantly surprised.

And most of these JavaScript components are to [UNKNOWN] to

help you ease the UI pain.

So let's talk about some UI pain.

Modals.

I'm sure you've all walled through modals at some point launching [UNKNOWN] from

divs, trying to mask the background, getting everything working cross browser.

These can be quite a pain.

And Bootstrap does give us quite a lot with the modal.js plugin.

In Bootstrap's words, modals are streamlined but

flexible dialogue prompts with the minimum required functionality and smart defaults.

And I would definitely agree with that.

I'm doing a semi-complicated modal demo, just to get your head wrapped around

what's actually what, what the modal plugin can pull off.

Don't be too intimidated, though.

[LAUGH] I mean.

Maybe you weren't, but

it'll be okay because [LAUGH] it's mostly just a couple classes here and there.

So in the case of the modal that I wanna demonstrate I want to

trigger a modal when a button is clicked.

You could have the modal if you wanted to just show up on page load,

but I wanna trigger it.

So we can set up a button, I've hidden the container and the rows and

stuff for this demo.

Set up a button that has some styles on it.

And the key thing I wanna make sure I add is the data toggle modal.

So this is what tells the JavaScript when this button gets toggled,

I'm gonna run the modal.

I think as Dave mentioned, this is way smarter that the JavaScript is

looking at a data attribute and trying to reach off and

doing in the jQuery it like in line that are looking at hidden classes.

So I definitely I, I won’t get into too much JavaScript, but

it's good practice that this is on the data attribute.

I think it’s clear as you read this that this is associated with JavaScript and

not just for the CSS.

So yeah, so you set up your data toggle and tell it to be in modal.

And then you have a target.

And so target is the ID of the [INAUDIBLE] watch.

This is similar to nature, and anchor.

So the second we have the modal itself which will be hidden by default.

We give that class and modal.

And the second class here it's pretty fancy cuz it's

the CSS transition that the JavaScript runs.

I believe it still runs through the transitions.js Bootstrap helper.

It's not just a stream but CSS transition but I think

the JavaScript just aids in the transition of the ending of the Chrome everything.

Then we have the idea of modal which corresponds to the button.

Rest of the attributes are for accessibility.

So those are optional, but I recommend having them.

And they are mentioned in the documentation.

Next we have some wrapper classes and this just sets up the positioning,

the modal dialog, and the modal content, which sets up the styling.

And then we have some optional modal classes in header.

And within the header we have another button that has a close.

And so we have a data-dismiss attribute similar to the tab role.

And this will automatically dismiss the modal when clicked.

This'll have some screen with your only text, which is good for

accessibility and a title and then we have modal body.

And in the modal body you can see we have a row again and columns.

And this is just to sort of point out that even though we're in the modal we can

still use Bootstrap, anything else we want to So no worries

there and kind of nice that you can pull that all off without a lot of hassle.

And then we have a modal footer that can close this.

Again, the data dismiss is setup, and we have some styles on the button.

So that's kind of a lot, I've been talking a lot, so let's see.

And maybe while we run this.

I would've if I was [UNKNOWN] but [LAUGH] So, we have a modal, or

not yet, we have this button which will launch the modal.

I click it.

Boom.

Nice, it fades in as we instructed it to.

We have our title.

We have our Close.

We have our column center in the row, and we have our additional buttons.

When this closes on data dismiss here or data dismiss here.

It's really quite handy.

You just have to sort of know and look at the docks to make sure you include

the correct data toggling or attributes rather, the data attributes for the modal.

And you'll be pretty much good to go.

We've initialized this modal through HTML just by associating these

data toggle attributes, but you can also instantiate and

set up the modals Their new job is to class themselves.

And there are a ton of options that could pass into, well,

I don't really roll into all of them obviously.

But if you are having little problems.

[LAUGH] I don't know why that sounds funny to me.

Or your just wanting to play around, definitely look that up.

So models, simple, flexible, smart [INAUDIBLE].

Okay, Affix.

Another fun thing we can do is have an affixed element that

follows your scrolling.

You probably often seen this in sites either with headers being affixed or

side bars.

In the case of this demo, I'm going to affix a sidebar now.

So we're gonna contain it about an unusual jumbotron.

Just something mentioned earlier which is sort of header areas.

So this is kind of like a stand out sort of header and then we have our row, and

in that we have a nine and a three spanned row.

We're gonna have a nav in this first one.

again, we've talked about that and

this is a nav stat as opposed to a [UNKNOWN] tab, hav nav.

And this just stacks the navs on top of each other.

Oh, here's where the affix comes in.

We have a data spy attribute.

And this initializes the affix to be spied on and

then you can set, more data attributes top,

bottom, all sorts of upsets for the affix to stick to.

In this case more of the affixed always stick up to the top,

at it's opposite tap of zero so it doesn't go beyond where the start is.

Then I just have some normal links, forward navigation here.

And then the second row I have corresponding section right, so

each anchor in this link corresponds by ID to each of these headers.

So, there's a lot of content there.

But you run it.

It's pretty sweet,

because whoo, it's affixing itself in this left hand column here.

And because I set up the target to be you know,

corresponding to the ID, if I click this it jumps down.

So, I would say this is probably the first functional fully

functional Bootstrap download when we're actually using something for a webpage.

Almost like it's totally use but Affix can be very handy and

something that I've used quite a bit.

And this is just using straight HTML.

It's a little bit of data spy fix.

And things are looking pretty good.

And again, because it's a JavaScript component,

you can instantiate this in the JavaScript documents instead of HTML.

And there are quite a lot of options for this, and

different offsets as I mentioned.

So I'll play with that tool tips.

Lovely, lovely tool tips.

again, this might be something you would try to pull off in CSS, but

if you have some really crazy tool tips with tons of options this is a good bat.

And this is also worth repeating or

I guess I didn't say it, but I will say it now.

[LAUGH] The tool tip as opposed to other JavaScript plugins need to be,

needs to be instantiated in JavaScript.

That is for performance reasons.

You could have like hundreds of tool tips and if that,

if all those try to get instantiated on page load well that won't be good.

So in the case of this I'm instantiating the button class with tool tip

cuz it's a jQuery plugin obviously I can run that off as a jQuery.

Dollar here, and obviously I would not run the script in the middle of the range.

But so we have a container a row.

A full spanned column, a header of the paragraph and the button.

And this is where I want the tool tip.

So I'm going to have to data toggle to the tip again with the data attribute.

You're saying when this gets clicked basically,

make sure the tool tip gets run.

You can choose your placement for the tool tip and the title.

And this is nice cuz this is also fully accessible.

So even people that don't have JavaScript enabled, or if for

some reason someone's screen reader for

accessibility didn't have [UNKNOWN] the title would still have semantic meaning.

So this tells the tooltip to place the tooltip at the top and use this text.

Pretty fancy.

So when I run this, you can see the tooltip.

Submitting is what do I want to do, I don't know.

I don't know maybe, oh yeah it's usually fun.

That tool tip was helpful.

[LAUGH] I crack my own self up.

Okay so tool tips have a ton of options as well.

So look into them, if you need to use them, they're quite easy to setup but

do remember that you need to instantiate those in your JavaScript.

Just a couple more things to cover here.

Next we have Accordions.

That's more than just for jams, you know?

Since we already talked about panels I thought it would be good to sort of

show an example where we highlighted in the next step what we might be able to do

with the panel.

So basically an accordion is just an, a panel that opens and closes.

I'm sure we've all seen those from time to time.

We have a container class, we have a closs of panel group,

which just sets up the panel.

And then the groupings of the panels, if there are multiples.

We have a div class of panel-heading.

And then a title within that panel.

The, the key here is the data toggle collapse again.

So we're telling basically JavaScript is

associating the toggling of this anchor with collapsing the accordion.

We're setting the parent here of the accordion,

which you wanna make sure you have a reference to.

And this is just so the JavaScript keeps track of what its parent is.

You could have multiple panel groups.

And part of this is performance-related I believe, but this is good to know.

So you have your toggle collapse, which is sending the target.

And the href, much like an anchor before is what

started that is what's at the target, is the collapse one.

So collapse one in this case is this first div.

And in that div we have a panel body, this might seem really complex, but

once I run the demo hopefully it will make a little more sense.

We have a collapsed item here.

A collapsed toggle and it's open by default.

And then, when we click it, it closes.

That's pretty nice, right?

And yeah.

All you really want to make sure you do is set up your panel classes.

You associate a toggle which is set to collapse.

You and then you reference which item you want to collapse and you click.

If you set the collapse class of that item to hidden it starts with that one open,

which is pretty nice.

so, hopefully, accor, this accordion makes so much sense.

I think this might not be as widely used as some of the other

JavaScript, components here.

But I do think this is a nice extension of using panels.

So if you're already using the panel, and

you're, like, man I wish that panel would just open and close.

Well, easy, all you have to do is add couple of data attributes,

make sure you have your collapse classes set up, and you're good to go.

All right, this is my last JavaScript component, the lovely Carousel.

carousels, you might have strong opinions on them.

But if you want to or

need to build one, you can quite easily do that with construct.

Much like the previous example,

there are quite a lot of classes being thrown around here.

But there's only a few really.

Since you really need to [UNKNOWN]

one is that you're wrapping div needs to have a d.

This is to associate, for

the JavaScript to be able to associate which carousel is being, so when you

click on various points of the carousel, it's in reference to the current carousel.

You could have your aerials for

the carousel outside of this div for example, and you want it to still work.

So you want to make sure you give that carousel an ID and

then give your carousel a class of carousel and

this is the transition you would want for your carousel.

And CSS transition you would want slide.

A data ride carousel is a, this is an attribute so

that it will start animating on page load, so it's optional.

So, with every Carousel comes indicators usually.

So just have a class of carousel indicators for this ordered list.

And the target that these carousel-indicators are tied to are the ID

of parent.

And then the data-slide-to, which is,

when you click on this guy, which data do you wanna slide to?

So this would be the first, cuz it's a zero base index, the first slide.

And this is set to active by default, just because.

You know, that it's gonna start with this one because of data ride carousel.

And then we set up the items themselves.

So we have a carousel inner class and an item class.

The first one is active so

that's why we have those first active classes associated.

We have an image.

I'm using the responsive image class and a carousel caption which is also optional.

And then just another item,

this is only two item carousel and then we have some controls and the controls.

Just have a carousel control class with a left or

a right which I believe are just loaders, right?

So left and right in the case of bootstrap I

think are disploding these I don't think they're associated with the carousel.

I've had to look that up because bootstrap has a lot going on.

And then we say data slide for the previous or next, so again kinda a lot.

On this guy, oh my gosh so much coffee so awesome.

You can see that these are the previous and next arrows.

And if I scroll down, these are the indicators.

So, if I click an indicator, there's my happy coffee.

Did I click these?

It's working, that looks great.

There's only two, but you can see that I.

I don't know what's going on here, I got images that are responsive.

I got these errors that go previous and that, that sorry cycles through.

See I'm playing back, it's infinite.

And we have indicators and captions.

All without a lick of JavaScript.

To write yourself, I mean JavaScript is happening.

So carousels are quite lovely.

And can be used when needed.

And again, you can instantiate this yourself with JavaScript in there,

there are a ton of options with this I just used

an example that was fairly straightforward.

I would like to show the examples using the HTML because I

think it's pretty powerful that you can get this set up

without having to crack open the JavaScript file.

All right, and of course there's more.

So I just covered a couple of the JavaScript components.

there's, for example, Scrollspy for those fixed headers while scrolling.

That's a little helper kind of for fixed and

you might think it helps an element just stick up to the top.

While you're scrolling popovers.

Those are like more like small overlays rather than tooltips, alerts and

tabs as I mentioned before.

You can check these out, play with them.

There's a lot of examples on the Bootstrap site.

And you put it all together and what have you got?

Fun.

Features.

[LAUGH] I thought this was funny this morning and now I'm laughing at myself.

Cuz it's kind of ridiculous, but it's true.

Bootstrap offers a lot of fun, and

a lot of features, hence a lot of fun features for you to play with, for

you to experiment with, I would say you know, go crazy.

and, you know, read the documentation and build things out as you go.

That's how I learn, maybe that's how you learn, maybe not.

If you have a different technique, I want to hear about it.

So there you have it, Bootstrap in a nutshell.

I hope you enjoyed the overview and while framework is never perfect,.

Then might not always split the bill.

I hope this presentation at least gave you some information to help you

make some informed decisions and some motivation to experiment.

Even if you're learning Ja, let's say you're learning JavaScript.

You might not want to pick up Bootstrap as a way to learn it, but

at least you can play with it and get to know JavaScript a little better.

And that's it.

Thank you all for listening, and I hope you enjoyed the talk.

>> Thanks Bess [COUGH] Couple, couple quick questions.

I probably only have time for one or two here.

But there's, I see a few more in the chat.

So if you don't mind staying, staying a little later, and

just answering some of those questions.

The first one, what is a regular download size bootstrap.

>> Well, I kind of mentioned this, but

I know some folks might be a little turned off by the classes.

There's quite a lot of classes which can be

a little overwhelming when you read the code,

especially if you have your own classes mixed in with the Bootstrap classes.

I find that it can be confusing to know what classes are Bootstrap and

what are yours at a glance.

So you might wanna keep that in mind when building the other things if

you already have a legacy site, like something that's been around forever.

And you try to just put Bootstrap on top of it to, to like pretty some things up.

You could end up with a pretty big headache because I'm sure as you

can imagine a framework can't fix everything right?

So that's why I mentioned Bootstrap as being helpful when you are more likely

starting out with a site or you can scrap your CSS and have a baseline setup.

So, that would kind of be my first full thoughts on that.

>> Second question.

This will be the last question, and then we'll take a quick break.

[UNKNOWN] asks on site.

He asked this question when you were on site 25,

I don't think it really matters though.

>> Oh, okay.

>> But could you quickly cover what the area-attribute do for the modal.

I think he's just looking for

an explanation of what the what area attributes actually do.

>> Oh, so area attributes are helpful for screen routers because they

designate certain parts of the HTML as having semantic meaning.

So when like a screen reader is what helps people with assistive disabilities,

usually blind folks.

And that'll read the page to them.

It'll say you are in a modal.

It is open.

And so those attributes are actually what tells us the state of the current item.

And in some cases, if you saw the role attribute,

that's just like the screen will say you are in [UNKNOWN] or this is a [UNKNOWN].

I can't remember exactly what was on the Moodle, but

it's basically just signifiers so that the screen readers can help people

figure out where they are in a page if they can't visualize where they are.

Hopefully, that's helpful.

It can often help with SEO, too.

But that's.

I'm gonna join you pretty soon on [UNKNOWN]