2.2 Twitter Bootstrap

Twitter Bootstrap already comes with a very powerful set of UI components in terms of CSS and JavaScript. Because they're already built for us, we can quickly incorporate them inside our project and this means we can use it to quickly prototype something or even included in our client project. So let's first start with the Twitter Bootstrap by downloading with the big download button. Now, once we unzip the file, we'll find that there are three folders. Let's look at each of them. The first one is a CSS folder. And in CSS folder, you'll have basically two types of CSS. One is the responsive CSS, which consists of components that are basically flexible fluid. The other one is the normal Bootstrap CSS. This is used for designing non flexible UI. And of course, there is the minified version, which we will use for production. And there is the unminified version or expanded form, which is very useful if you want to read and understand the CSS. So for our case, we will just go ahead and just shift the minimized boot strap code and we will do that inside this folder. Now once this is done, we can go ahead and start playing with the UI components. So let's take a look at our very simple project. So here we have the header and the paragraph. But after this, we will integrate Bootstrap and see how fast it is to build some UI. So let's come back to the code first. As you see, that this is my index at HTML, it has some header one, header two and paragraph tag. Later, we will go ahead and add on more UI components. And also, we have the CSS folder with the bootstrap.min.css file that we just copied over from the main Bootstrap project. After this, I'll just split up the screen, so that we can see that whatever we code here will be immediately reflected here. The very first thing we will do is of course, to connect up the CSS. As we remember, it was inside the file bootstrap.min.css. And once we refresh the page after saving it, you will immediately notice a change in the styling. So that was pretty fast, even to kind of integrate Bootstrap by itself. Now the next key thing is to go back to our tutor Bootstrap documentation page. And here, we will take a look at the Base CSS styles. And over here, you will come with the documentation for typography, for tables, forms, the basic UI components. So why don't we start with some of them? For example, over here, you have a paragraph with the class called lead. Why don't we try that out? So, I'm gonna come back to the paragraph here and add a class of lead. So there you go. It kind of expanded and make the text a little bit bigger. Why don't we go ahead and try out another component, which is the small. So, I'll just come back here and maybe the final sentence, why don't we apply small here. And there you go. The last sentence is a little bit smaller. Next, let's try something interesting, which are the different emphasis classes. So, according to the class names, such as muted, warning, error, info and success. The style will be slightly different in terms of the color. So for example, if I have a paragraph with class muted. Notice what happens? It will be slightly greyish or if I have another paragraph called text-info with the same paragraph, notice that it will blue in color. Once again, since the CSS are all done for us. It is so easy to integrate it. Finally, why don't we try the tag, which is blockquote. So, there you go, that is a blockquote. Next, let's try out something more interesting, which is in terms of components. Now Twitter Bootstrap comes with a lot of UI components. For example, drop-down, navigation bar, breadcrumbs, pagination, you name it. Twitter Bootstrap will probably have a style for that. Why don't we try out with the, Labels and badges? All right. So that looks interesting. All you need to do is have a span and there you have the different classes that we can integrate. So let's try with the very first one, which is the default label. And there you go, that's the default label. Let's try another warning, so that'll be label-warning. And there you go, that is the label for the warning class. As you can see, Bootstrap comes with a lot of components and is very well documented for us to use the different classes. So do go ahead and try out the various UI components. Next, let's go ahead and try out some layouts component and this is found under Scaffolding. So why don't we go ahead and try a very simple one, which is under layouts. As you notice from our project, the content is very near the edge of the browser, this is not good for readability. So why don't we try to find something that is pleasant to our eyes? How about this one? This inte, integrates a fluid layout with our project and it has a class of container-fluid. So .container-fluid and inside here, I will cut all this content. And inside the diff class container-fluid, I have basically shifted all the content. And now when I save, guess what? It is a nicely layout in the browser and whether I resize my browser the content is flowing very nicely. Now the last bit of the Twitter Bootstrap, let's explore something with the JavaScript. So basically with JavaScript, it will also provide us with 13 custom jQuery plugins. And over here, why don't we try out something really simple, how about the Tooltip. So what the Tooltip will do is if you hover over it, it will give us this little text over it. So, as you notice, this is a jQuery plugin. So the very first thing I will do is kind of fire up from cdnjs.com, the latest jQuery file. Now since this is a JavaScript component, we also need to include the Twitter Bootstrap component of it and this code is found inside the JavaScript folder. So, all we need to do is use this file. So, I'm just gonna move it to my project folder, maybe the entire folder will do and paste it here. Now, as with the CSS, the bootstrap.js contains the unminified file for readability and our understanding, whereas bootstrap.min.js consists of the production file. So for simplicity, I'll just use the production file. And finally, I'll come back to index.html and include this file in the script tag. Great. So after this, we can continue to integrate our Tooltip. So, if you continue scrolling, it will tell us that the Tooltip can be invoked with a little JavaScript snippet. So why don't we include that first. Notice here it is calling the ID example. And when we scroll down here, the documentation will also tell us the relevant markup. We're just gonna copy this over and paste it right here. So over here, the whole vertex is here already. But of course, we need to connect it up as id example. So why don't we go ahead and try that. So id is example. And of course, nothing will happen, because we will need to include the options. And some of the options include show, hide, toggle, destroy. But for us, we will just include the show option. So now when we go back to our little example and we hover over, guess what? The hover text is seen and that is the first Tooltip. If you are wondering where the text is coming from, it is from the title attribute. And if you change it to second and yep. When we hover, it will give us a second Tooltip. So that's a little bit about Bootstrap. I highly recommend you to check out the GitHub repository, which consists of the documentation. And, and simply as a developer, I just loved reading through the code itself. Because even if you're not using Bootstrap for your project, the code itself has a lot for us to learn. And of course, do go through the various components, whether it's scaffolding in terms of layouts and bigger components or it's some base like style sheet, forms or tables, components or even some JavaScript. Lastly, you might not be using all the components of Bootstrap, so for the optimization of the files, such as the bootstrap.css or the bootstrap.javascript file. You can even pick and choose the elements that you want to use on your page. Now, I have briefly gone through Twitter Bootstrap, so that it gives you an overview. You definitely should go through an in-depth tutorial and there are plenty of them in web webdesign.tutsclass.com. Or even tutsplus.com has screen cast course on it by Adi Purdila. He actually goes through each of the components in Twitter Bootstrap ending with the JavaScript ones. So, I hope you enjoy Twitter Boostrap, whether you're using it to learn how to code better for CSS JavaScript or to use it for your prototype or even customize your UI components.