Join Ray Villalobos for an in-depth discussion in this video Introduction and installation options, part of Bootstrap 3 Essential Training.
- Alright so let's start by talking about what Bootstrap is and go over some of the main features. Bootstrap is a framework that helps you create websites quickly with tons of features that would be hard or take a long time for you to create yourself. Now Bootstrap has a mobile first approach which means that a website that you create with Bootstrap is mobile friendly. Instead of having to create your own mobile styles, the framework assumes that you want to create a mobile friendly site and has the styles to support them. Bootstrap comes with a fluid twelve-column responsive system that scales and adjusts according to the size of the device.
Unlike any other framework, Bootstrap isn't for every project but it's good for a lot of things. So for example, if you need to build something quickly and need a lot of features that you don't want to build yourself, Bootstrap is an excellent choice and given you about eighty percent of the styles and features you're going to need for just about every project. If you're a developer and need to focus on building a site's functionality but don't want to worry about designing the site because that's something you may hand off to a designer, then Bootstrap is often used to scaffold, or put together a site quickly that looks great without a lot of work.
Because of it's large library of features, Bootstrap can also be great for larger projects where developers don't need to rewrite code for common features like drop downs and carousels and may want to focus just on the code that is unique to their projects. Now if you do plan to use Bootstrap for larger projects, it's a good idea to customize your installation or really work on getting only the Bootstrap features that you need. Bootstrap is built to be very modular so you can install just the pieces that you want.
Now let's talk about installation. There's two categories of installations you can do with Bootstrap: basic or advanced. You can find all of these by going to the Bootstrap website and clicking on the Download button. You can see that you can use the Bootstrap CDN or take a look at some of the other options. A CDN is a content delivery network which means a place that hosts common libraries like Bootstrap, when someone visits a site that uses a CDN link, their browser will check its cache or memory to see if the visitor has been to a similar site that is also using the same link.
In that case, the browser will load the cached version of the library. Now since it's already a memory, that makes the new site load faster since the browser won't have to request a file. Of course you can also download and install a copy of the Bootstrap framework manually. There's a couple of advantages to this. First, you can customize Bootstrap so that you use only the parts that you need, making the download smaller. Also during development, you won't need to be connected to the internet in order to preview and use Bootstrap. Regardless of the installation method you use, Bootstrap requires jQuery and it doesn't come with it so you'll need to download that separately or use a jQuery CDN.
Now for advanced users, there's a lot of different options. We won't be covering all these in this course. First, you can download the entire source code for the library. Now this means that you will end up with all the original files used to create Bootstrap including the documentation, build files, run processes, etcetera. If you're looking to build a super custom version of Bootstrap then this is the option for you. You'll need to have Node.JS, Runt, Jackal, Ruby, and lots of other pieces installed in order to take full advantage of this version.
This version of Bootstrap was created with Less so if you want to work directly with the Less files you'll need to download the source code. It has original grunt file as well as all the Less files you'll need to build and customize it to your liking. However, if you want to work with Sass instead, then you can download a version of Bootstrap that uses Sass instead of Less. Now this also has some heavy requirements, so make sure you take a look at the documentation. Bootstrap is also available through popular built tools like npm, Composer, and Bower.
One last option you have is to create a custom version of Bootstrap using the customize link in the navigation. This is a straight forward tool that will build a customized version of Bootstrap that uses only the parts that you want. In addition to that, you can modify the default here to control things like the amount of columns, the color of each of the styles, and much, much more. Bootstrap has built a reputation for a being a solid tool for building websites, it's one of the most popular projects on GitHub and is used by thousands of companies to create a lot of the websites you see on the internet.
I really believe that learning to use and manipulate Bootstrap should be a skill that every designer and developer needs to know.
- Understanding containers
- Using the 12-column grid to create a responsive webpage layout
- Creating rows and columns
- Styling content with Bootstrap CSS classes
- Adding CSS styles
- Creating and styling forms
- Creating dropdown menus and buttons
- Adding images and video