Create First Web Page With Bootstrap

Size: px

Start display at page:

Download "Create First Web Page With Bootstrap"

Roland Fletcher
6 years ago
Views:

1 Bootstrap : Responsive Design Create First Web Page With Bootstrap 1. Add the HTML5 doctype Bootstrap uses HTML elements and CSS properties that require the HTML5 doctype. 2. Bootstrap 3 is mobile-first To ensure proper rendering and touch zooming, add the following <meta> tag inside the<head> element: The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). The initial-scale=1 part sets the initial zoom level when the page is first loaded by the browser.

2 3. Containers here are two container classes to choose from: 1. The.container class provides a responsive fixed width container 2. The.container-fluid class provides a full width container, spanning the entire width of the viewport

3 Bootstrap Grid System Bootstrap's grid system allows up to 12 columns across the page. If you do not want to use all 12 columns individually, you can group the columns together to create wider columns:

Grid Classes The Bootstrap grid system has four classes: xs (for phones - screens less than 768px wide) sm (for tablets - screens equal to or greater than 768px wide) md (for small laptops - screens

4 Grid Classes The Bootstrap grid system has four classes: xs (for phones - screens less than 768px wide) sm (for tablets - screens equal to or greater than 768px wide) md (for small laptops - screens equal to or greater than 992px wide) lg (for laptops and desktops - screens equal to or greater than 1200px wide) The classes above can be combined to create more dynamic and flexible layouts. First; create a row (<div class="row">). Then, add the desired number of columns (tags with appropriate.col-*-* classes). Note that numbers in.col-*-* should always add up to 12 for each row. xs,sm,md,lg 1,4,6,8,12 ÖRNEK -1??? 4-8 li

5 Bootstrap Images class="*".img-rounded.img-circle.img-thumbnail

6 Responsive Images Create responsive images by adding an.img-responsive class to the <img> tag. The.img-responsive class applies display: block; and max-width: 100%; and height: auto;

7 Bootstrap Wells The.well class adds a rounded border around an element with a gray background color and some padding: Change the size of the well by adding the.well-sm class for small wells or.well-lgclass for large wells:

Alerts Bootstrap provides an easy way to create predefined alert messages: Alerts are created with the.alert class, followed by one of the four contextual classes.

8 Alerts Bootstrap provides an easy way to create predefined alert messages: Alerts are created with the.alert class, followed by one of the four contextual classes.alert-success,.alert-info,.alert-warning or.alert-danger: <div class="alert alert-success"> <strong>success!</strong> Indicates a successful or positive action. </div>

9 Closing Alerts To close the alert message, add a.alert-dismissible class to the alert container. Then add class="close" and data-dismiss="alert" to a link or a button element

Bootstrap Buttons Button Styles Bootstrap provides different styles of buttons: To achieve the button styles above, Bootstrap has the following classes:.

10 Bootstrap Buttons Button Styles Bootstrap provides different styles of buttons: To achieve the button styles above, Bootstrap has the following classes:.btn.btn-default.btn-primary.btn-success.btn-info.btn-warning.btn-danger.btn-link The button classes can be used on an <a>, <button>, or <input> element:

13 Bootstrap Button Groups Bootstrap allows you to group a series of buttons together (on a single line) in a button group:

14 Vertical Button Groups Use the class.btn-group-vertical to create a vertical button group: <div class="btn-group-vertical"> <button type="button" class="btn btn-primary">apple</button> <button type="button" class="btn btn-primary">samsung</button> <button type="button" class="btn btn-primary">sony</button> </div>

15 Justified Button Groups To span the entire width of the screen, use the.btn-group-justified class: <div class="btn-group btn-group-justified"> <a href="#" class="btn btn-primary">apple</a> <a href="#" class="btn btn-primary">samsung</a> <a href="#" class="btn btn-primary">sony</a> </div>

16 Bootstrap Dropdowns Basic Dropdown A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list: The.dropdown class indicates a dropdown menu. To open the dropdown menu, use a button or a link with a class of.dropdown-toggleand the data-toggle="dropdown" attribute. The.caret class creates a caret arrow icon (), which indicates that the button is a dropdown. Add the.dropdown-menu class to a <ul> element to actually build the dropdown menu.

17 Dropdown Divider The.divider class is used to separate links inside the dropdown menu with a thin horizontal border: Dropdown Header The.dropdown-header class is used to add headers inside the dropdown menu: Disable and Active items To disable an item in the dropdown menu, use the.disabled class

18 Bootstrap Collapse Collapsibles are useful when you want to hide and show large amount of content: Example Explained The.collapse class indicates a collapsible element (a <div> in our example); this is the content that will be shown or hidden with a click of a button. To control (show/hide) the collapsible content, add the data-toggle="collapse"attribute to an <a> or a <button> element. Then add the data-target="#id" attribute to connect the button with the collapsible content (<div id="demo">). in?? By default, the collapsible content is hidden. However, you can add the.in class to show the content by default:

19 Bootstrap Panels Panel Heading & Panel Footer Panel Group Panels with Contextual Classes To color the panel, use contextual classes (.panel-default,.panel-primary,.panelsuccess,.panel-info,.panel-warning, or.panel-danger):

20 Bootstrap List Groups

21 List Group With Badges You can also add badges to a list group. The badges will automatically be positioned on the right:

22 List Group With Linked Items The items in a list group can also be hyperlinks. This will add a grey background color on hover: You can also add Active State, Disabled Item

23 Collapsible Panel & List Group

24 Accordion

Responsive Web Design (RWD)

Responsive Web Design (RWD) Responsive Web Design: design Web pages, so that it is easy to see on a wide range of of devices phone, tablet, desktop,... Fixed vs Fluid layout Fixed: elements have fixed