Bootstrap - Department Of Computer Science, University Of Toronto
BootstrapTutorial 7Sukwon Ohsoh@cs.toronto.edu
What is Bootstrap?u Bootstrap is the most popular framework for quickly styling your website.u Bootstrap lets us skip writing CSS and focus instead on HTML.
What is Bootstrap?CSSComponentsu Grid systemu Glyphiconsu Typographyu Navbaru Formsu Paginationu Buttonsu Thumbnailsu Responsive utilitiesu .u .
What is Bootstrap?
Using Bootstrap
Using Bootstrap
Mobile Friendlyu u Bootstrap 3 is mobile friendly by default.u Responsive to screen size (assignment 1)u Touch screen zoomingAdd following to your head to enable touch zooming.u width device-width: sets width of page to screen width of the deviceu initial-scale 1: sets initial zoom level when the page is first loaded
.Containeru Responsively add margins, center, and wrap your content.
.Containeru Example
.Containeru Examplemarginmargin
Grid Systemu Bootstrap divides a page into a grid of 12 columns and multiple rows foreasier positioning of elements.u Grid system is responsive and columns will rearrange automatically dependingon the screen size.
Grid System
Grid System - Basics div class "row" /div u Place columns insideu Set each column width using class prefixes:u .col-xs-*, .col-sm-*, .col-md-*, .col-lg-*for each row.
ExampleCreate a row of columns of width 3, 4, and 5.
Grid System - Multiple Devicesu Sometimes columns are stacked vertically on smaller screensu Use col-xs-*, col-sm-*, col-md-* together to set different column widths fordifferent screen sizes
ExampleAllow 2 columns in a row for mobile, 3 for desktopOn Desktop:On Mobile:
Grid System – Column ResetsSometimes at breakpoints, columns may be aligned in wrong places.Problem:Correct Output:
Grid System – Column ResetsFixu .clearfix clears float CSS attributeu visible-xs is one of many responsive utilitiesu clearfix is applied to only mobile devices (visible-xs)
Grid System – Column ResetsFixGo to next line
Responsive utilities
Grid System - Offsettingu col-xs-offset-*u col-sm-offset-*u col-md-offset-*u col-lg-offset-*
Example
Grid System – Nested columnsNested columns add up to its parent or less
Typography - HeadingsSupports h1 to h6 , same as HTML
Typography - Alignment
Typography – Addressesappend br to preserve formatting
Typography - Description
Typography – Horizontal DescriptionNotice truncation for “Felis euismod semp ”
Glyphiconsu Bootstrap comes with 200 icons to use, named “glyphicons”
Glyphicon Syntaxu Syntaxu Examples
Resizing Glyphiconsu Glyphicons are text!!!u To resize glyphicons, simply increase its font size in CSS!u Exampleu Output
Formsu Automatically applies some global styling with Bootstrap.u Examples
Formsu u Layouts supported by Bootstrapu Vertical Formu Horizontal Formu Inline FormTips on using forms with Bootstrapu form role “form” Improves accessibilityu div class “form-group” Improves spacing of form elementsu .form-controlGive width of 100% to text form elements
Forms – Vertical Layout
Forms – Horizontal Layout
Forms – Inline Layout
Forms - ControlsSupports HTML form elementsu input u textarea u input type “checkbox” u input type “radio” u select u
Forms – Validation statesu Bootstrap allows you to give validation status to your form elements.u Bootstrap supportsu u .has-warningu .has-erroru .has-successExample
Validation States - Input
Forms – Validation states with iconsTo add feedback icons1. add has-feedback class to parent2. insert span specifying glyphicon for the control’s feedback span class "glyphicon glyphicon-ok form-control-feedback" /span
Validation states with Icons
Paginationu You can use Bootstrap to divide your website into pages.Simply add pagination class to ul element. ul class "pagination" Each page is a list of href element.e.g. li a href "#" 1 /a /li Use pagination-lg or pagination-sm to size page button sizes
Example - Pagination
PagerSimpler version with “Previous” or “Next” buttonsYou can also align buttons using .previous and .next
Navigation & Navigation Barsu Navigation (nav)u Navigation Bar (navbar)
Navigation (nav)u Use unordered list and give .nav class attribute.u ExampleMakes navigation inline
.nav ModifiersRight aligned
Navigation Bar (.navbar)u Creates a visible bar with navigation elements.u Example
.navbar Modifiersand others
There are still many more to learn!u Go over http://getbootstrap.com/getting-started/#examplesu Playground for bootstrap http://www.bootply.com/
Bootstrap Tutorial 7 Sukwon Oh soh@cs.toronto.edu. What is Bootstrap?! . Bootstrap divides a page into a grid of 12 columns and multiple rows for easier positioning of elements. ! Grid system is responsive and columns will rearrange automatically depending on the screen size.
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 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
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
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,
