Bootstrap Tutorial - Stellenbosch University

3y ago
177 Views
32 Downloads
2.94 MB
193 Pages
Last View : 1d ago
Last Download : 2m ago
Upload by : Macey Ridenour
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 . 80Pills Navigation. 80BASIC PILLS . 80VERTICLE PILLS . 81Justified Nav . 81Disabled Links . 82DROPDOWNS . 83TABS WITH DROPDOWNS . 83PILLS WITH DROPDOWNS . 84Bootstrap Navbar .85Default navbar . 85Responsive navbar . 86Forms in navbar . 87Buttons in navbar . 87Text in navbar . 88Non-nav links . 88Component alignment . 89Fixed to top . 90Fixed to bottom . 91Static top . 91Inverted navbar . 92Bootstrap Breadcrumb .94Bootstrap Pagination .95Pagination . 95DEFAULT PAGINATION. 95STATES . 96SIZING . 96Pager . 97DEFAULT PAGER . 97ALIGNED LINKS . 98STATES . 98Bootstrap Labels .99Bootstrap Badges .100Active nav states . 100Bootstrap Jumpotron.102TUTORIALS POINTSimply Easy Learning

Bootstrap Page Header .104Bootstrap Thumbnails .105Adding Custom Content . 106Bootstrap Alerts .108Dismissal Alerts. 108Links in Alerts . 109Bootstrap Progress Bars .111Default Progress Bar . 111Alternate Progress Bar . 111Striped Progress Bar . 112Animated Progress Bar . 113Stacked Progress Bar . 114Bootstrap Media Object .115Bootstrap List Group .119Adding Badges to List Group . 119Linking List Group Items . 120Add Custom Content to List Group . 121Bootstrap Panels .123Panel with heading . 123Panel with footer . 124Panel Contextual alternatives . 124Panel with tables . 125Panel with Listgroups . 126Bootstrap Wells .128Sizing . 128Bootstrap Plugins Overview .

tutorialspoint.com or this tutorial may not be redistributed or reproduced in any way, shape, or form without 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 the

Related Documents:

Bootstrap Bootstrap is an open source HTML, CSS and javascript library for developing responsive applications. Bootstrap uses CSS and javascript to build style components in a reasonably aesthetic way with very little effort. A big advantage of Bootstrap is it is designed to be responsive, so the one

The bootstrap distribution of a statistic collects its values from the many resamples. The bootstrap distribution gives information about the sampling distribution. bootstrap distribution 16.2 Bootstrap distribution of mean time to start a business. In Exam-ple 16.1, we want to estimate the population mean time to start a business, m,

know how to create bootstrap weights in Stata and R know how to choose parameters of the bootstrap. Survey bootstrap Stas Kolenikov Bootstrap for i.i.d. data Variance estimation for complex surveys Survey bootstraps Software im-plementation Conclusions References Outline

the bootstrap, although simulation is an essential feature of most implementations of bootstrap methods. 2 PREHISTORY OF THE BOOTSTRAP 2.1 INTERPRETATION OF 19TH CENTURY CONTRIBUTIONS In view of the definition above, one could fairly argue that the calculation and applica-tion of bootstrap estimators has been with us for centuries.

Chapter 1: Getting started with bootstrap-modal 2 Remarks 2 Examples 2 Installation or Setup 2 Simple Message with in Bootstrap Modal 2 Chapter 2: Examples to Show bootstrap model with different attributes and Controls 4 Introduction 4 Remarks 4 Examples 4 Bootstrap Dialog with Title and Message Only 4 Manipulating Dialog Title 4

Bootstrap adalah metode berbasis komputer yang dikembangkan untuk mengestimasi berbagai kuantitas statistik, metode bootstrap tidak memerlukan asumsi apapun. Bootstrap merupakan salah satu metode alternatif dalam SEM untuk memecahkan masalah non-normal multivariat. Metode bootstrap pertama kali dikenalkan oleh Elfron (1979 dan 1982)

Thanks to the great integratio n with Bootstrap 3, Element s and Font Awesome you can use all their powers to improve and enhance your forms. Great integration with DMXzone Bootstrap 3 and Elements - Create great-looking and fully responsive forms and add or customize any element easily with the help of DMXzone Bootstrap 3 and Bootstrap 3 Elements.

Bootstrap World (right triangle) E.g., the expectation of R(y;P) is estimated by the bootstrap expectation of R(y ;P ) The double arrow indicates the crucial step in applying the bootstrap The bootstrap 'estimates' 1) P by means of the data y 2) distribution of R(y;P) through the conditional distribution of R(y ;P ), given y 3