Transcription
Bootstrap Tutorial
BOOTSTRAP TUTORIALSimply Easy Learning by tutorialspoint.comtutorialspoint.comi
ABOUT THE TUTORIALBootstrap TutorialTwitter Bootstrap is the most popular front end frameworks currently. It is sleek, intuitive, and powerfulmobile first front-end framework for faster and easier web development. It uses HTML, CSS andJavascript.This tutorial will teach you basics of Bootstrap Framework using which you can create web projects withease. Tutorial is divided into sections such as Bootstrap Basic Structure, Bootstrap CSS, BootstrapLayout Components and Bootstrap Plugins. Each of these sections contain related topics with simple anduseful examples.AudienceThis tutorial has been prepared for anyone who has a basic knowledge of HTML and CSS and has an urgeto develop websites. After completing this tutorial you will find yourself at a moderate level of expertisein developing web projects using Twitter Bootstrap.PrerequisitesBefore you start proceeding with this tutorial, I'm making an assumption that you are already awareabout basics of HTML and CSS. If you are not well aware of these concepts then I will suggest to gothrough our short tutorial on HTML Tutorial and CSS Tutorial.Copyright & Disclaimer Notice Allthe content and graphics on this tutorial are the property of tutorialspoint.com. Any content fromtutorialspoint.com or this tutorial may not be redistributed or reproduced in any way, shape, or formwithout the written permission of tutorialspoint.com. Failure to do so is a violation of copyright laws.This tutorial may contain inaccuracies or errors and tutorialspoint provides no guarantee regarding theaccuracy of the site or its contents including this tutorial. If you discover that the tutorialspoint.com siteor this tutorial content contains some errors, please contact us at webmaster@tutorialspoint.comTUTORIALS POINTSimply Easy Learning
Table of ContentBootstrap Tutorial.2Audience .2Prerequisites .2Copyright & Disclaimer Notice .2Bootstrap Overview.10What is Twitter Bootstrap? . 10History . 10Why use Bootstrap? . 10What Bootstrap Package Includes? . 11Bootstrap Environment Setup .12Download Bootstrap . 12File structure . 13PRECOMPILED BOOTSTRAP . 13BOOTSTRAP SOURCE CODE . 13HTML Template . 13Example . 14Bootstrap Grid System .15What is a Grid? . 15What is Bootstrap Grid System? . 15MOBILE FIRST STRATEGY . 15Working of Bootstrap Grid System . 16Media Queries . 16Grid options . 17BASIC GRID STRUCTURE . 17Bootstrap Grid System Example: Stacked-to-horizontal . 17Bootstrap Grid System Example: Medium and Large Device . 18Bootstrap Grid System Example: Mobile, Tablet, Desktops . 20Responsive column resets . 21Offset columns . 21Nesting columns. 22Column ordering. 23Bootstrap CSS Overview .25HTML5 doctype . 25Mobile First . 25Responsive images . 26Typography and links . 26Normalize . 26TUTORIALS POINTSimply Easy Learning
Containers . 26Bootstrap Typography .27Headings . 27INLINE SUBHEADINGS . 27Lead Body Copy. 28Emphasis . 28Abbreviations . 29Addresses . 29Blockquotes . 30Lists. 30Bootstrap Code .33Bootstrap Tables .34Basic Table . 34Optional Table Classes . 35STRIPED TABLE . 35BORDERED TABLE . 36HOVER TABLE . 36CONDENSED TABLE . 37Contextual classes . 38Responsive tables . 39Bootstrap Forms .41Form Layout . 41VERTICAL OR BASIC FORM . 41INLINE FORM . 42HORIZONTAL FORM . 42Supported Form Controls . 43INPUTS . 43TEXTAREA . 44CHECKBOXES AND RADIOS . 44SELECTS . 45Static control . 46Form Control States . 46INPUT FOCUS . 46DISABLED INPUTS . 46DISABLED FIELDSETS . 46VALIDATION STATES . 46Form Control Sizing . 48Help Text . 49Bootstrap Buttons .50TUTORIALS POINTSimply Easy Learning
Button Size . 51Button State . 52ACTIVE STATE. 52DISABLED STATE . 53Button Tags . 54Bootstrap Images .55Bootstrap Helper Classes .56Close icon . 56Carets . 56Quick floats . 56Center content blocks . 57Clearfix . 57Showing and hiding content . 57Screen reader content. 57Bootstarp Responsive Utilities .59Print classes . 59Example . 60Bootstrap Glyphicons .61What are Glyphicons? . 61Where to find Glyphicons? . 61Usage . 61Bootstrap Dropdowns .63OPTIONS . 64ALIGNMENT . 64HEADERS . 64Bootstrap Button Groups.66Basic Button Group . 66Button Toolbar. 67Button Size . 67Nesting . 68Vertical Buttongroup. 68Bootstrap Button Dropdowns .70Split Button Dropdowns . 71Button Dropdown Size . 71Dropup variation . 72Bootstrap Input Groups .74Basic Input Group . 74Input Group Sizing . 75Checkboxes and radio addons . 75TUTORIALS POINTSimply Easy Learning
Button addons . 76Buttons with dropdowns . 77Segmented buttons . 78Bootstrap Navigation Elements .80Tabular Navigation or Tabs .
Download Bootstrap: Clicking this, you can download the precompiled and minified versions of Bootstrap CSS, JavaScript, and fonts. No documentation or original source code files are included.
