Twitter Bootstrap Web Development How-To
Language: English
Pages: 68
ISBN: 1849518823
Format: PDF / Kindle (mobi) / ePub
A hands-on introduction to building websites with Twitter Bootstrap's powerful front-end development framework
Overview
- Conquer responsive website layout with Bootstrap’s flexible grid system
- Leverage carefully-built CSS styles for typography, buttons, tables, forms, and more.
- Deploy Bootstrap's jQuery plugins to create drop-downs, switchable tabs, and an image carousel.
In Detail
Twitter Bootstrap is by far the most popular of all front-end frameworks. It has earned its position by providing expertly-crafted, community-tested solutions for some of the thorniest problems of contemporary web design, equipping developers to accomplish difficult tasks with ease and normal tasks with greater speed.
Twitter Bootstrap Web Development How-To walks you step-by-step from Bootstrap basics to the creation of a fully-responsive, JavaScript-enhanced, multi-page website. After this quick and dirty Bootstrap bootcamp, you'll not only be building serious sites, but you’ll be equipped to dive into the rest of what Twitter Bootstrap has to offer. The content of the book is up to date with version 2.1 of Twitter Bootstrap.
Bringing you from zero to pro in record time, this book will start you off with Twitter Bootstrap's excellent responsive grid system. From the basics, you'll move on to more complex layouts with media grids and tables. You'll learn to control Bootstrap's navbar, adding drop-down menu items and configuring it to adapt beautifully to small screens. You'll utilize Bootstrap's jQuery plugins to add dynamic tabs and a beautiful homepage slideshow. You'll also walk through the steps of uploading your files, testing your site across desktop and mobile browsers, and optimizing your site files for improved performance before final launch.
What you will learn from this book
- Conquer responsive website layout with Bootstrap’s flexible grid system
- Create a complex media grid of images and captions
- Leverage carefully built CSS styles for typography, buttons, tables, forms, and more
- Exert control over Bootstrap's dynamic and responsive navbar
- Learn the ways of Bootstrap's excellent jQuery plugins
- Create drop-down items and dynamic switchable tabs
- Create a beautiful image carousel slideshow with captions
- Test your results across browsers and devices
Approach
An easy-to-follow step-by-step presentation which will get you started with Twitter Bootstrap. Practical examples will help you to get set up quickly and easily.
Who this book is written for
This guide is for new, novice, and intermediate developers alike. Basic knowledge of HTML and CSS is required although this book will help beginners find their feet with both more easily. Those experienced with HTML and CSS will quickly learn the beautiful and efficient ways of Bootstrap..
Exploring C++: The Programmer’s Introduction to C++
the first pane to appear by default. We need to add a class of "active" to the first pane.
classes on key elements. Be bold. Try out some creative variations. Have some fun. Grow your palette of design possibilities in the process! Creating a homepage carousel (Should know) Bootstrap abounds with well-built JavaScript plugins. We can't possibly introduce them all here. But let's choose another of the more popular ones—the carousel plugin—to enhance our homepage with a sliding carousel of content and images. Such carousels are very effective at giving users a visually
equal dimensions—1200 px wide by 480 px high. These dimensions will provide a pleasing ratio while allowing the images to stretch to the full width of our site on a widescreen monitor. We'll be replacing hero-unit in index.html with our new carousel. Before we do that, let's make a backup copy, so that we'll have a template file that contains hero-unit with its large welcome message. Make a copy of the index.html file and name it hero.html. With the images ready and the backup copy preserved,
a try. Optimizing and customizing (Should know) It's almost time to take this website online. Let's get things ready by optimizing our files for better performance. While we're at it, we'll customize a few key design elements to begin making the design our own. An optimized website loads faster. It reduces unnecessary load on your web server. And it helps improve your ranking in major search engines. We can't cover all aspects of site optimization in this brief book, but we can take
Bootstrap resources, contains a list of resources to help you continue growing as a Bootstrap-equipped developer. What you need for this book The requirements are pretty simple: a computer, an Internet connection, a text editor, and a desire to learn! Who this book is for I've written with the novice to intermediate developer in mind. If you're new to HTML, CSS, and JavaScript—don't worry! I'll help you along. If you've been designing sites for a while, the book is an ideal