What are Bootstrap components?

Course contents
SECTION: 9
How to backup 4:44
SECTION: 17
Finished 1:58

Questions

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

Course info

53 lessons / 5 hours

Overview

NOTE: this course uses Bootstrap 3. Dreamweaver has recently updated to Bootstrap version 4. You can change it back to 3 using the ‘New Document > Bootstrap > Preferences'. Please do this before starting the course.

Some versions of Dreamweaver will require you to download the specific Bootstrap version you want to use and link it within the site. You can download Bootstrap 3 here: http://getbootstrap.com/docs/3.3/

Hi - my name is Dan and I’ll be leading you through this course on how to Make money building mobile friendly websites using Dreamweaver.

I built this course for the visual person, the right brained person. We won't hide from code but we'll use all the visual tools that makes Dreamweaver so amazing.

These are the skills you’ll need to become a professional web designer. You’ll learn how to make responsive websites in Dreamweaver as well as learning what to charge and how to manage a website project.

We cover everything you need to build your first website. From creating your first page through to uploading your website to the internet. During the course we’ll create a website for a mock creative agency - creating mobile and desktop versions. See our example here:

I’m a Dreamweaver Certified Instructor and an Adobe Certified Web Specialist.

With exercise files you can download and work along with me. At the end of each video I have a downloadable version of where we are in the process so you can compare your project with mine making it easy to see where you might have a problem.

I’ll be showing you how to work with Dreamweaver to easily create HTML & CSS websites. How to create mobile and tablet versions of your design and how to test your website on your phone.

I’ll be teaching you how to create navigation bars, how to work with responsive images and favicons.

We’ll work with Dreamweaver’s new Bootstrap integration to easily add carousels, tabbed menu’s and accordions. Even easier you’ll learn to impress clients by embedding videos, calendars, maps, event ticketing & social sharing options. 
 
 Know that I’ll be around to help - if you get lost you can message in the forum and together we’ll get you back on track.

Now it’s time to upgrade your skills, get that better job and impress your clients.

What are the requirements?

  • You'll need a copy of Dreamweaver CC 2015 or above. A free 30 day trial can be download from Adobe here.

  • No previous Dreamweaver or web design experience is necessary.

  • If you're not sure if this course is right for you. Email me what you’re trying to do and check if you’re on the right track.

What am I going to get from this course?

  • 60 lectures 3 hours of content!

  • Forum support from me. 

  • All the techniques used by professional website designers.

  • Ways to preview your designs straight to your mobile device.

  • Firm understanding of responsive web design.

  • Professional workflows and shortcuts. 

  • A wealth of other resources and websites to help your new career path.

What is the target audience?

  • YES: This course is for beginners. For people who prefer not to work in code. Aimed at people new to the world of web design. No previous Dreamweaver experience is necessary. People with knowledge of previous versions of Dreamweaver CC 2014 and below will also get great value from this course as the software has changed so much.

  • NO: This course is NOT suited to people experienced in using HTML & CSS. If you prefer to work in code only then this course isn’t right for you.

Course duration 5.5 hours + your own study.

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Downloads & Exercise files

Download Exercise Files

Transcript

So first up we’re going to look at the components part of bootstrap. Then we’ll look at grid afterwards. So lets look at some of the components that bootstrap have created for us and we’ll compare, just to show how bootstrap is we’re going to show how to create them using bootstrap and then manually how to make them and the difference in timing and control. Let’s look at that, lets make a really simple thing, just a button. Just a clickable button in bootstrap and then we’ll make it by ourselves. I’m going to go to file new, under bootstrap I’m going to create a new everything, click create. Alright, so not a lot happens I’ve got my plain old document but if I go to insert and I go into button, so I’m in insert, and Im going to go to button - I get this, that is a button and it’s had some styling applied to it. So I’m going to save this document now and this is going to be my bootstrap test. We’re going to throw this document away so just a quick little demo. I’m going to create a completely new file using plain old HTML without bootstrap. Essentially the same thing to start with except it doesn’t have the backing of bootstrap. I’m going to save it, this is going to be called ‘plain-old-html’. Okay so if I add a button here, the difference is the styling really to start off with, can you see this button here is what you expect to see as a button straight out of code. This button here in Bootstrap is slightly more styled, the fonts different, there’s a bit of a gradient in the background. Not a big deal in terms of the styling, where it becomes quite cool is that lets check out bootstrap, so I’m on the bootstrap website and this is really handy to go back and forward from just to see what is available, you’re not going to remember exactly or every single thing bootstrap can do but it’s good to go in and check and see what it can do every now and again.

 

If we go to components, there is button groups, there’s all sorts of things to do with buttons. These are the components, you can see that there are dropdown, input groups as well as buttons. There are navigation in here, breadcrumbs, how to put in a jumbotron, thumbnails. This is all the pre-made components, we’re looking at just the buttons at the moment. So we’ve got out button, go all the way back to the top again and we’re going to look at the CSS that styles these now components. So there’s a whole bunch of pre-made CSS styles as well. We’re going to go down to buttons and you can see there’s my default buttons. There are options for the buttons, different colours you can use, different sizes, block level ones, so you can do lots with buttons without having to do all the styling yourself. So let’s give that a test.

 

I’ve got my button selected, I’m going to add a class. A class starts with a full-stop and this will bring up all the different button options from bootstrap. Now one of the ones on that last page is .btn-danger, and you can see by adding that class called button danger it’s gone red, it’s got white text so that the kind of things that bootstrap can do. It’s got some pre-made classes. Now to do the same thing here in out HTML document. I’m going to CSS Designer, I guess I’m just trying to prove the validity of Bootstrap or at least show you why people love it so much. So I’m going to ‘add new CSS sheet’, I’m going to name this one ‘plain-old’. I’m going to make a selector called ‘.btn-dan’ and I’m going to try and style it in the same way, so I’m going to apply that button now even though it has no attributes. So I’ve applied it great, it’s not doing anything so I’m going to give it a background colour of red. Oops, what am I styling? I’ve applied my class to this body tag which is the underlying one, not the actual button itself. You can see how easy it is, button or the body. So I’m going to remove it from the body, click on my button and reply that very same class. I should go through and create that sort of stuff but it’s the kind of problems you are going to run into so I leave them in there, I like to pretend it’s part of my training to show you what could happen, but really it’s just me getting lost. But we’re back! So this button here has got a classname ‘ban-dan’ linked to it. I’ve mad it red, I’ve gone to my type here and I’m going to make it white, it needs a bit of padding so I’m going to go up to this top one here called layout and I’m going to make it have some padding around the outside. So it’s going to have padding of maybe 5 at the top, 10 on the sides maybe 15 on the sides, 5 on the bottom, 10 there. Okay the font needs to be centred in here, now can you start to see the time saving by using bootstrap? I’m nearly there as in I’m almost getting this thing to do the same as this, it’s not the same but it’s kind of saved a bit of time. Now this is one little tiny part, buttons are really small. You can imagine where it becomes a whole lot quicker using bootstrap when you start looking at like an image carousel where theres lots of bits and pieces to it, start building it yourself? Could be a 2 day project whereas I’ll show you how it’s just a drag and drop using bootstrap.

 

So lets have a look at back to the bootstrap version, there are lots of different CSS classes that you can apply. Can you see here there’s the options, so we picked danger but theres some other ones. We can go through and theres sizes and all you need to know though is these names here, you won’t remember them all off by heart, don’t worry, but say I want to apply this btn-lg. All I need to do is type this in, the full-stop to make it a class, then ‘btn-lg’. So if I come in here, and I go full-stop btn-lg, it’s a large button! Some of the bits in the other side was there’s something called button block, so dot btn-block and that just makes it go full screen. So it’s a giant button that kind of spread out to the edges of it’s container. So then to go off and start building this in plain old HTML, I could definitely do it, no problem at all but I’m going to be playing around for a long time to try and get up to speed with bootstrap so it’s just a time saver.

 

Now let’s have a look at the magical bits of these components. Button- pretty boring Dan. So lets go and delete him, so I’m going to click on my button, hit delete, what I really want to do is to look at some of the really cool things. And we’re going to look at them properly later on but at the moment I guess it’s just a little fly through where I can say form, bootstrap components and these are the things that are kind of pre-made if you look a the bootstrap site, right at the top here, these are the components. So Dreamweaver has incorporated a lot of them in itself to make it easier to apply rather than copy and pasting code across, you just have to click some of these things so lets look at one of the more exciting ones. Lets look at carousel, and if I wanted to design my own carousel, A: You wouldn’t, but B: Even if you found someone else carousel to implement in your site, it will take a lot of working around to try and get going. Then will it work on all browsers? Probably, maybe? But I know Bootstrap is pretty good at working on all sorts of browsers and sizes and devices. Lets click carousel. Voila! One button and a carousel has been added. I’m going to preview this in a browser, I’m going to save my document, down to preview in a browser. And I’ve now got a responsive carousel. It adjusts, works with different sizes, click the button and it moves across. And all I need to do now as a designer is go through, okay there’s lots of things that I don’t like about it like I don’t need potentially this text or this second text but I can turn that off quite easily. The image in the background with the ugly white stripe around the outside, I can go through and adjust that and change it with my own images. It’s pretty damn amazing. and that’s why people love bootstrap, it’s quick, its easy, it installs a pretty plain-jane version of what you need, but it’s all done, all the bugs are worked out of it mostly and you can go through and add your own style to it very quickly and easily.

  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2024