Object-oriented design patterns

Object-oriented design patterns solve many common software design problems, as follows, that architects come across every day: Finding appropriate objects Determining object granularity Specifying object interfaces Specifying object implementations Programming to an interface, not an implementation Putting the reuse mechanism to work We will touch upon some of the common problems and how design patterns …

Bootstrap Forms

Bootstrap’s Default Settings Form controls automatically receive some global styling with Bootstrap: All textual <input>, <textarea>, and <select> elements with class .form-control have a width of 100%. Bootstrap Form Layouts Bootstrap provides three types of form layouts: Vertical form (this is default) Horizontal form Inline form Standard rules for all three form layouts: Wrap labels …

Bootstrap Navigation Bar

Navigation Bars A navigation bar is a navigation header that is placed at the top of the page: WebSiteName Home Page 1 Page 2 Page 3 With Bootstrap, a navigation bar can extend or collapse, depending on the screen size. A standard navigation bar is created with <nav class=”navbar navbar-default”>. The following example shows how …

Bootstrap Tabs and Pills

Menus Most web pages have some kind of a menu. In HTML, a menu is often defined in an unordered list <ul> (and styled afterwards), like this: <ul> <li><a href=”#”>Home</a></li> <li><a href=”#”>Menu 1</a></li> <li><a href=”#”>Menu 2</a></li> <li><a href=”#”>Menu 3</a></li> </ul> If you want to create a horizontal menu of the list above, add the .list-inline …

Bootstrap Collapse

Basic Collapsible Collapsibles are useful when you want to hide and show large amount of content: Click Me Example <button data-toggle=”collapse” data-target=”#demo”>Collapsible</button> <div id=”demo” class=”collapse”> Lorem ipsum dolor text…. </div>   Example Explained The .collapse class indicates a collapsible element (a <div> in our example); this is the content that will be shown or hidden …

Bootstrap Collapse

Basic Collapsible Collapsibles are useful when you want to hide and show large amount of content: Click Me Example <button data-toggle=”collapse” data-target=”#demo”>Collapsible</button> <div id=”demo” class=”collapse”> Lorem ipsum dolor text…. </div>   Example Explained The .collapse class indicates a collapsible element (a <div> in our example); this is the content that will be shown or hidden …

Bootstrap Dropdowns

A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list: Dropdown Example Example <div class=”dropdown”> <button class=”btn btn-primary dropdown-toggle” type=”button” data-toggle=”dropdown”>Dropdown Example <span class=”caret”></span></button> <ul class=”dropdown-menu”> <li><a href=”#”>HTML</a></li> <li><a href=”#”>CSS</a></li> <li><a href=”#”>JavaScript</a></li> </ul> </div>   Example Explained The .dropdown class indicates a dropdown menu. To open …

Bootstrap Panels

Panels A panel in bootstrap is a bordered box with some padding around its content: A Basic Panel Panels are created with the .panel class, and content inside the panel has a .panel-body class: Example <div class=”panel panel-default”> <div class=”panel-body”>A Basic Panel</div> </div>   The .panel-default class is used to style the color of the …

Bootstrap List Groups

Basic List Groups The most basic list group is an unordered list with list items: First item Second item Third item To create a basic list group, use an <ul> element with class .list-group, and <li> elements with class .list-group-item: Example <ul class=”list-group”> <li class=”list-group-item”>First item</li> <li class=”list-group-item”>Second item</li> <li class=”list-group-item”>Third item</li> </ul>   List …

Bootstrap Pager

What is Pager? Pager is also a form of pagination (as described in the previous chapter). Pager provides previous and next buttons (links). To create previous/next buttons, add the .pager class to an <ul> element: Example <ul class=”pager”> <li><a href=”#”>Previous</a></li> <li><a href=”#”>Next</a></li> </ul> Result:   Align Buttons Use the .previous and .next classes to align …