Learning Bootstrap
By Ulrich Sossou and Aravind Shenoy
1/5
()
About this ebook
This book will help you harness the powerful facets of the Bootstrap toolkit and streamline your web designing experience. You'll get started with the initial download and customization and a brief introduction to LESS, then move on to learn about the Grid system and Base CSS, which is tailor-made for quicker and more robust web design. Learn about components, jQuery plugins, and other unique features that make Bootstrap an amazing utility to create remarkable web pages. Get to grips with the Bootstrap technical hub, which hosts the third-party resources, themes, and templates that enhance Bootstrap. By the end of the book, you will learn how to build a powerful and trendy e-commerce website that will help you with the practical implementation of Bootstrap.
Related to Learning Bootstrap
Related ebooks
Responsive Media in HTML5 Rating: 0 out of 5 stars0 ratingsBuilding a Web Application with PHP and MariaDB: A Reference Guide Rating: 0 out of 5 stars0 ratingsJavaScript Projects for Kids Rating: 0 out of 5 stars0 ratingsLearning Behavior-driven Development with JavaScript Rating: 5 out of 5 stars5/5Node.js High Performance Rating: 0 out of 5 stars0 ratingsOpenCart Theme and Module Development Rating: 0 out of 5 stars0 ratingsBootstrap By Example Rating: 0 out of 5 stars0 ratingsLearning Bootstrap 4 - Second Edition Rating: 5 out of 5 stars5/5Responsive Design High Performance Rating: 0 out of 5 stars0 ratingsBootstrap 4 Cookbook Rating: 0 out of 5 stars0 ratingsInstant SASS CSS How-to Rating: 5 out of 5 stars5/5Bootstrap 4 Quick Start: A Beginner's Guide to Building Responsive Layouts with Bootstrap 4 Rating: 0 out of 5 stars0 ratingsphpMyAdmin Starter Rating: 0 out of 5 stars0 ratingsLaravel 5 Essentials Rating: 0 out of 5 stars0 ratingsMastering Sass Rating: 0 out of 5 stars0 ratingsJavaScript for Modern Web Development: Building a Web Application Using HTML, CSS, and JavaScript Rating: 0 out of 5 stars0 ratingsWeb Design Playground: HTML & CSS The Interactive Way Rating: 5 out of 5 stars5/5Responsive Web Design with HTML5 and CSS3 Essentials Rating: 5 out of 5 stars5/5Hello! HTML5 & CSS3: A User Friendly Reference Guide Rating: 0 out of 5 stars0 ratingsBootstrap 4 Site Blueprints Rating: 5 out of 5 stars5/5JavaScript JSON Cookbook Rating: 0 out of 5 stars0 ratings50 Recipes for Programming CSS3 Rating: 0 out of 5 stars0 ratingsResponsive Web Design with HTML5 and CSS3 - Second Edition Rating: 4 out of 5 stars4/5Learning jQuery Rating: 4 out of 5 stars4/5Learning PHP 7 Rating: 4 out of 5 stars4/5jQuery for Designers Beginner's Guide Second Edition Rating: 5 out of 5 stars5/5JavaScript Unlocked Rating: 5 out of 5 stars5/5Wordpress Web Application Development - Third Edition Rating: 0 out of 5 stars0 ratingsA Pocket Guide to CSS Animations Rating: 5 out of 5 stars5/5
Programming For You
Coding All-in-One For Dummies Rating: 4 out of 5 stars4/5SQL QuickStart Guide: The Simplified Beginner's Guide to Managing, Analyzing, and Manipulating Data With SQL Rating: 4 out of 5 stars4/5Excel 101: A Beginner's & Intermediate's Guide for Mastering the Quintessence of Microsoft Excel (2010-2019 & 365) in no time! Rating: 0 out of 5 stars0 ratingsLearn to Code. Get a Job. The Ultimate Guide to Learning and Getting Hired as a Developer. Rating: 5 out of 5 stars5/5Python Programming : How to Code Python Fast In Just 24 Hours With 7 Simple Steps Rating: 4 out of 5 stars4/5Excel : The Ultimate Comprehensive Step-By-Step Guide to the Basics of Excel Programming: 1 Rating: 5 out of 5 stars5/5C Programming For Beginners: The Simple Guide to Learning C Programming Language Fast! Rating: 5 out of 5 stars5/5Learn PowerShell in a Month of Lunches, Fourth Edition: Covers Windows, Linux, and macOS Rating: 5 out of 5 stars5/5HTML & CSS: Learn the Fundaments in 7 Days Rating: 4 out of 5 stars4/5HTML in 30 Pages Rating: 5 out of 5 stars5/5PYTHON: Practical Python Programming For Beginners & Experts With Hands-on Project Rating: 5 out of 5 stars5/5SQL: For Beginners: Your Guide To Easily Learn SQL Programming in 7 Days Rating: 5 out of 5 stars5/5The Most Concise Step-By-Step Guide To ChatGPT Ever Rating: 3 out of 5 stars3/5C# Programming from Zero to Proficiency (Beginner): C# from Zero to Proficiency, #2 Rating: 0 out of 5 stars0 ratingsLinux Command-Line Tips & Tricks Rating: 0 out of 5 stars0 ratingsPython Data Structures and Algorithms Rating: 5 out of 5 stars5/5Python QuickStart Guide: The Simplified Beginner's Guide to Python Programming Using Hands-On Projects and Real-World Applications Rating: 0 out of 5 stars0 ratingsLearning JavaScript Data Structures and Algorithms Rating: 5 out of 5 stars5/5
Reviews for Learning Bootstrap
1 rating0 reviews
Book preview
Learning Bootstrap - Ulrich Sossou
Table of Contents
Learning Bootstrap
Credits
About the Authors
About the Reviewers
www.PacktPub.com
Support files, eBooks, discount offers, and more
Why subscribe?
Free access for Packt account holders
Preface
What this book covers
What you need for this book
Who this book is for
Conventions
Reader feedback
Customer support
Downloading the example code
Errata
Piracy
Questions
1. Getting Started with Bootstrap
Mobile-first design
Why Bootstrap
Summary
2. Installing and Customizing Bootstrap
Including Bootstrap in your HTML file
The Bootstrap CDN
Overriding with custom CSS
Using the Bootstrap customizer
Deep customization of Bootstrap
Downloading the Bootstrap source code
Compiling LESS files
Using SimpLESS to compile LESS files
Using WinLess to compile LESS files
Using the command line to compile LESS files
Putting it all together
Summary
3. Using the Bootstrap Grid
Using the Bootstrap Grid classes
Adding rows and columns
Customizing the grid for small devices
Adding offsets to columns
Pulling and pushing columns
Nesting columns
Using the Bootstrap variables and mixins
Bootstrap Grid variables
Bootstrap Grid mixins
Creating a blog layout with the Bootstrap Grid mixins and variables
Styling the blog
Summary
4. Using the Base CSS
Implementing the Bootstrap Base CSS
Headings
Body copy
Typographic elements
Emphasis inline elements
Alignment classes
Emphasis classes
Addresses
Blockquotes
Abbreviations
Lists
Tables
Basic styling
Buttons
Forms
Inline forms
Horizontal forms
Code
Images
Font families
Sans-serif font family
Serif font family
Monospace font family
Font sizes
Font sizes variables
Font sizes for headings
Customizing the Base CSS using LESS variables
Summary
5. Adding Bootstrap Components
Components and their usage
Glyphicons
Nav tabs
Nav pills
Justified tabs and pills
Dropdowns
Navbar
Breadcrumbs
Summary
6. Doing More with Components
Components to streamline your web designing projects
Jumbotron
Page header
Wells
Badges
Labels
Progress bars
Panels
Thumbnails
Pagination
List groups
Button groups
The button toolbar
Split button dropdowns
Justifying button groups
Checkbox and radio buttons
Alerts
Media objects
Responsive scalable embed
Summary
7. Enhancing User Experience with JavaScript
Streamlining your projects with official plugins
Tooltips
Popovers
Accordion
ScrollSpy
Modals
Carousels
Summary
8. Bootstrap Technical Hub – A One-stop Shop for Powerful Bootstrap Utilities
Themes and templates
Open source themes and templates
Commercial themes and templates
Ready-made resources and plugins
Font Awesome
Social Buttons for Bootstrap
Bootstrap Magic
Jasny Bootstrap
Fuel UX
Bootsnipp
Bootdey
BootBundle
Start Bootstrap
Development tools and editors
Bootply
LayoutIt
UI Bootstrap
Kickstrap
ShoeStrap
StrapPress
Summernote
Official Bootstrap resources
Bootlint
Bootstrap with SaaS
Bootstrap Expo
Summary
Index
Learning Bootstrap
Learning Bootstrap
Copyright © 2014 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the authors, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
First published: December 2014
Production reference: 1171214
Published by Packt Publishing Ltd.
Livery Place
35 Livery Street
Birmingham B3 2PB, UK.
ISBN 978-1-78216-184-4
www.packtpub.com
Credits
Authors
Aravind Shenoy
Ulrich Sossou
Reviewers
Ravi Kumar Gupta
Harsh Raval
Fred Sarmento
Acquisition Editor
Sam Wood
Content Development Editor
Amey Varangaonkar
Technical Editors
Tanvi Bhatt
Siddhi Rane
Copy Editors
Merilyn Pereira
Stuti Srivastava
Project Coordinator
Leena Purkait
Proofreaders
Bridget Braund
Maria Gould
Amy Johnson
Indexer
Priya Sane
Production Coordinator
Shantanu N. Zagade
Cover Work
Shantanu N. Zagade
About the Authors
Aravind Shenoy is an in-house author at Packt Publishing. An engineering graduate from the Manipal Institute of Technology, his core interests lie in technical writing, web designing, and software testing. He was born, and is based, in Mumbai, India. A music buff, he loves listening to Oasis, R.E.M, The Doors, Dire Straits, and U2. Rock n' Roll and Rap rule his playlists. He is also the author of several other books such as Thinking in HTML and Hadoop Explained, both by Packt Publishing. You can find out more about him on the Amazon Author Central page at http://www.amazon.com/Aravind-Shenoy/e/B00ITSR2WE.
He can be contacted at <aravind.shenoy@hotmail.com>.
I would like to thank my uncle, Dr. Ramanath N. Kamath, for motivating me on this journey of writing the Bootstrap book. Also, a big thanks and deep gratitude to Edward Gordon and Julian Ursell from Packt Publishing, who helped me gain focus and precision in my writing abilities.
Ulrich Sossou is an experienced software engineer and entrepreneur with a passion for solving problems. He enjoys helping individuals and businesses frame difficult issues in ways that foster the emergence of the best outcomes for them and/or their businesses.
His first experience with technology came at age 8 in his uncle's computer repair shop, where he played with early versions of personal computers, such as the Macintosh Classic. Since then, he has gained valuable experience in software engineering, architecture, and design as well as marketing and sales, and he has developed the overall skill set required to run a software business.
When he's not working on open source projects or coaching less experienced software engineers or entrepreneurs, he's the CTO of Retreat Guru (http://retreatguru.com/), a Canadian company operating in the wellness tourism industry; the cofounder of Flyerco (https://www.flyerco.com/), an American company helping realtors market their properties with flyers; and the cofounder of TekXL (http://www.tekxl.com/), a west-African start-up incubator.
About the Reviewers
Ravi Kumar Gupta is an open source software evangelist and Liferay expert. He pursued the MS degree in Software System from BITS Pilani and BTech from LNMIIT, Jaipur. His technological forte is portal management and development using Liferay.
He is currently working as a senior consultant with CIGNEX Datamatics. He was a core member of the Open Source Group at TCS, where he started working on Liferay and other UI technologies. During his career, he has been involved in building enterprise solutions using latest technologies with rich user interfaces and open source tools.
He loves to spend time writing, learning, and discussing new technologies. He is an active member of the Liferay forum. He also writes technical articles for his blog at TechD of Computer World (http://techdc.blogspot.in). He has been a Liferay trainer at TCS and CIGNEX, where he has trained on Liferay 5.x and 6.x versions.
He can be reached on Skype at kravigupta and on Twitter at @kravigupta. Connect with him on LinkedIn at http://in.linkedin.com/in/kravigupta.
I would like to thank my lovely wife and my family for their support. All that I am is because of them. Their support helped me through good and bad times. I would also like to thank my friends and colleagues for their support.
Harsh Raval is a passionate self-taught software developer with many years of experience. He is a part-time blogger and blogs about various technologies and his experiences. He holds a Bachelor's degree in Computer Science.
He started his carrier as a backend engineer, working on various backend frameworks, mostly in Java. Now he also has experience and expertise in frontend technologies. He started coding frontend development as a hobby and ended up designing and implementing beautiful backend and frontend systems using the various JavaScript frameworks out there.
As this is the first book that I am a part of, I dedicate this to my family.
Fred Sarmento is a frontend developer and UI designer based in Lisbon, Portugal. He has more than 5 years of experience in this field, and has been working with some great New York and San Francisco start-ups. In 2014, he founded Cropfection (www.cropfection.com), a company that provides frontend consultancy and development.
www.PacktPub.com
Support files, eBooks, discount offers, and more
For support files and downloads related to your book, please visit www.PacktPub.com.
Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at
At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.
https://www2.packtpub.com/books/subscription/packtlib
Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can search, access, and read Packt's entire library of books.
Why subscribe?
Fully searchable across every book published by Packt
Copy and paste, print, and bookmark content
On demand and accessible via a web browser
Free access for Packt account holders
If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view nine entirely free books. Simply use your login credentials for immediate access.
Preface
Bootstrap is a powerful framework to empower and enhance frontend web designing. Version 3 comes with a plethora of features including a mobile-first responsive grid, LESS variables, tailor-made components, and plugins that help users design dynamic user interfaces. With the advent of mobile web development, owing to the fact that mobiles and tablets are increasingly becoming the de facto standard for using the Internet, it is essential that websites are developed from a mobile-first perspective and then adapted to larger screens for desktops and notebooks. Bootstrap is batteries-loaded meaning that it packs it all with expertly crafted solutions and attributes that help developers to accomplish difficult tasks with ease and greater speed. Apart from its built-in features, it gets vibrant support from the community mainly in terms of additional resources and third-party utilities that take out a great deal of guesswork when it comes to difficult layout styles resulting in enterprise-grade and aesthetic web applications. Learning Bootstrap is a comprehensive source to help you get to grips with the technical know-how enabling you to know the ins and outs of Bootstrap in an easy-to-follow format.
What this book covers
Chapter 1, Getting Started with Bootstrap, is a short introduction to the technology. This chapter explains the need for Bootstrap in addition to explaining the paradigm related to the mobile-first approach adopted by Bootstrap to streamline web designing.
Chapter 2, Installing and Customizing Bootstrap, discusses the inclusion of Bootstrap with relevant information, overriding with customized styles, the deep customization of Bootstrap, and compiling LESS files in a practical manner.
Chapter 3, Using the Bootstrap Grid, starts with usage of the Bootstrap Grid classes wherein you learn about adding rows and columns and offsets, nesting of columns, and using the different variables and mixins and summing it up with a real-time example of creating a custom blog layout.
Chapter 4, Using the Base CSS, builds up from explaining the typography and subsequently moves on to explain the various facets of CSS including tables, forms, buttons, and the various responsive utilities in a step-by-step approach also including the helper classes used extensively in Bootstrap.
Chapter 5, Adding Bootstrap Components, incorporates the learning of the popular components such as the Glyphicons and Breadcrumbs in addition to the different navigation components such as nav tabs, nav pills, and dropdowns, which help you to build interactive webpages.
Chapter 6, Doing More with Components, contains an extensive in-depth understanding of the remaining components such as wells, labels,