Thursday, July 11, 2013

A Formal Introduction to Twitter Bootstrap - full article

Ad. These ads support our blog! It's not free for us to research and write about big topics, but we gladly share this information with all the beginners! Please support us. Or just ignore hehe :)

Great gift for geeks : )

Sold at Our Shopify Store Last one

If you’re a developer, no doubt you’ve heard of Twitter Bootstrap. For those not familiar, Bootstrap is a front-end development framework that allows you to design and build a website in a fraction of the time it would take to create a site from scratch. It’s pretty much Silicon Valley’s prototyping tool of choice these days, making it an omnipresent and integral part to the tech industry, even if it isn’t exactly “popular.” Designers may look down their noses at Bootstrap because of its “cookie cutter” design, but more and more companies want developers who have an “Experience with Bootstrap” bullet point on their resumes.

On top of that, Bootstrap is the first truly successful framework for design and CSS. In addition to providing the tools for designing on a  960 grid system, responsive design, and JavaScript plugins, Bootstrap was also developed to look great on any platform or machine, which has contributed to making it one of the most popular frameworks for building modern websites.

Originally developed by two guys from Twitter, Bootstrap is the saving grace of developers everywhere. Most often used for prototyping, pushing projects to the finish line faster, and even for hackathons, Bootstrap is a great tool for showing the world your ideas and products without needing to spend weeks (or months) perfecting the front-end.

At the same time, that doesn’t necessarily mean that using Bootstrap is as easy as downloading a few files and installing some scripts. The framework assumes some prior knowledge of HTML and CSS, relying heavily on the use of CSS classes. Although there’s tons of documentation to help you overcome most hurdles, trying to sift through it all can be a little overwhelming, especially when you’re first starting out.

To lend a hand, we’ve put together a few tips and tricks--sort of a hands-on approach--for beginning front-end developers who want to use Bootstrap. These tips should help you become better acquainted with how to get started and apply Bootstrap to your next project.

How To Know If a Site Uses Bootstrap

If you’re not familiar with it already, you may want to learn how to use Chrome Developer Tools. You might’ve also heard it referred to as “Chrome DevTools” or “Web Inspector.” If you’re a Firefox user, then you have to install a separate plugin called Firebug. This in-browser tool is your best friend when working in the front-end. Not sure why this or that element isn’t where you thought it should be? Inspect it through DevTools and tinker/debug from there.

Where Bootstrap is concerned, you can use DevTools to find out whether a site you like is using Bootstrap or not. Just open the Inspector by right clicking (control+click on a Mac) anywhere on the page and selecting “Inspect Element.” DevTools will open up at the bottom of your screen, and you’ll be able to see the HTML for that page. Here’s where you should see the links to Bootstrap:

This method isn’t completely foolproof since many websites will host their files on their own servers, rather than pull it directly from Bootstrap. However, developers who are just trying to get their stuff out there will opt to link straight from Bootstrap in order to save time.

Another way to recognize whether a site is using Bootstrap is to compare it against the examples from here. If you’ve spent any time checking out the websites of software startups, then most of those examples probably seem very familiar.

Figure Out What You Like

Bootstrap’s been around for a long time, so there’s no sense in trying to reinvent the wheel when there are literally thousands of sites out there using it right now in a huge variety of designs and implementations. Most developers will just throw a Bootstrap site up to serve as a placeholder, but there are also plenty of others who take the “outline” and flesh it out to make it their own.

That’s not to say you should go around stealing other website designs. Rather, figure out what elements you like from other Bootstrap sites, and then reverse engineer that to suit your own purposes. Instead of trying to figure something out from scratch, you’re starting with a finished product, then teaching yourself how it was done.

Using the Source Code

When you come across a Bootstrap site that you like, but you’re not sure how it works, you can take a look at the source code to get a better idea. Right click anywhere on the page and choose “View Page Source,” which will bring up a page that looks like this:

Just like in DevTools, you can see the HTML working behind the scenes, but it’s a more complete view of the code that’s easier to scan through. When trying to figure out how the various Bootstrap components work, looking through the source code on a site is a great way to get a better idea of how the classes are working together, where various elements come in, and also helps you become more accustomed to reading other programmers’ code.

It’s perfectly alright to copy part of someone else’s source code when trying to build your own site, but also keep in mind that if it looks like something they created themselves, you need to give credit where credit is due in a comment. If it’s just a design element such as the proper way to format a navigation menu, then there’s no shame in just copying and pasting the same HTML from another site.

Don’t Be Afraid to Ask Questions

There’s a huge community of developers and designers out there who are ready and willing to help you if you just ask. If you’re not sure where to start, check out Quora or StackOverflow. Both sites have communities of users who are there for the sole purpose of sharing information with each other, and they both have categories of questions specific to Bootstrap. Odds are that the question you have has already been asked and answered by someone else, so it’s a good place to check out for specific questions you might have.

If you have any questions or comments about Bootstrap that you’d like to share with us, feel free to start the conversation below.

Conclusive note and call to action

Ideally all front-end developers and designers of modern web development should be familiar with Twitter Bootstrap basics. It's high in demand and popularity in the Silicon Valley, and the library works with practically anything HTML, CSS and JavaScript... that's practically everything, and of course Rails! It is useful in time pressed prototyping environments : pitches, accelerator demos and hackathons.

The Twitter Boostrap project was designed to be a toolset, originally for the use of the internal front end team, then designed to be an open source framework. Its growth history,setup and enormous success as a CSS framework ( rare ) are all worth examining in details. Maybe that's the academic side of me talking: it has all the traits of the growth progression and success curve of prominent modern web technologies. 

One reader asked for more structured practice and projects with Twitter Bootstrap. try treehouse with our referral or our free YouTube channel theoptips. Videos also available in structured formats on and my website (paid video instruction as a subscription package)

No comments:

Post a Comment

React UI, UI UX, Reactstrap React Bootstrap

React UI MATERIAL  Install yarn add @material-ui/icons Reactstrap FORMS. Controlled Forms. Uncontrolled Forms.  Columns, grid