gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(guide): simplify directory structure

Browse Source
This commit is contained in:
Mrugesh Mohapatra
2018-10-16 21:26:13 +05:30
parent f989c28c52
commit da0df12ab7
35752 changed files with 0 additions and 317652 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
guide/english/bootstrap/buttons/index.md Normal file
View File

@@ -0,0 +1,93 @@
---
title: Buttons
---
## Buttons
The Bootstrap framework provides you with various styling options for buttons. These styles help you provide a visual representation to the user of what the button may do.
#### How To Use:
To use bootstrap buttons you follow the same steps that you would to create a button in HTML except you also apply the applicable CSS class to the button. A code example has been provided below.
**Code Example:**
`<button type="button" class="btn btn-primary">Primary</button>`
<button type="button" class="btn btn-primary">Primary</button>
You can also use bootstrap buttons with the `<a>` and `<input>` elements as shown in the examples below.
`<a class="btn btn-primary" href="#" role="button">This button is a link</a>`
<a class="btn btn-primary" href="#" role="button">This button is a link</a>
`<input class="btn btn-primary" type="submit" value="Submit">`
<input class="btn btn-primary" type="submit" value="Submit">
#### Bootstrap Button Class List:
This is a list of the CSS classes that bootstrap provides for buttons.
`.btn` This is bootstrap's basic button.
<button type="button" class="btn">Basic</button>
`.btn-default` This is bootstrap's default button.
<button type="button" class="btn btn-default">Default</button>
`.btn-primary` This is bootstrap's primary button.
<button type="button" class="btn btn-primary">Primary</button>
`.btn-success` This is bootstrap's success button.
<button type="button" class="btn btn-success">Success</button>
`.btn-info` This is bootstrap's info button.
<button type="button" class="btn btn-info">Info</button>
`.btn-warning` This is bootstrap's warning button.
<button type="button" class="btn btn-warning">Warning</button>
`.btn-danger` This is bootstrap's danger button.
<button type="button" class="btn btn-danger">Danger</button>
`.btn-link` This is bootstrap's link button.
<button type="button" class="btn btn-link">Link</button>
`.btn-light` This is bootstrap's light button.
<button type="button" class="btn btn-light">Light</button>
#### Bootstrap Button Sizes:
This is a list of the CSS classes for different size of the buttons.
`.btn-lg` This is bootstrap's large button.
<button type="button" class="btn btn-lg">Large</button>
`.btn-sm` This is bootstrap's small button.
<button type="button" class="btn btn-sm">Small</button>
`.btn-xs` This is bootstrap's extra small button.
<button type="button" class="btn btn-xs">Extra Small</button>
#### Bootstrap Outlined Buttons:
It is possible to also have outlined buttons rather than fully colored in ones. This is achieved by placing the mid fix `outline` between the button class you want. A sample usage would be as follows:
`<button type="button" class="btn btn-outline-primary">Primary</button>`
Outlined buttons are a part of Bootstrap since version 4, please be sure that you are using the right version if you are unable to get them work.
_Note: Do not include the dot in the HTML Class Attribute, referring to the classes with a dot is only used when adjusting the classes in CSS._
#### More Information:
* <a href='https://getbootstrap.com/docs/4.0/components/buttons/' target='_blank' rel='nofollow'>Bootstrap Buttons documentation</a>
* <a href='http://getbootstrap.com/docs/4.0/components/button-group/' target='_blank' rel='nofollow'>Bootstrap Button Group documentation</a>
* [Bootstrap Get Started](/articles/bootstrap/bootstrap-get-started)

87
guide/english/bootstrap/cards/index.md Normal file
View File

@@ -0,0 +1,87 @@
---
title: Cards
---
# Bootstrap 4 Cards
------
* Using Bootstrap 4 you can create cards.
* Cards are bordered boxes with a bit of padding around the content inside them, which can be used to conveniently display a specific set of information.
##### To create a basic Bootstrap 4 card, you need to create a ```<div>``` container with the class ```.card``` and inside another ```<div>``` container with the class of ```.card-body```
###### This is how it will look in an html doc
```html
<div class="card">
<!-- content of the card goes here -->
<div class="card-body">Content</div>
</div>
```
### Header and Footer
--------
The structure of the card can be enhanced by the addition of a header and a footer. To add one of these elements, you have to create a ```<div>``` container with the ```.card-header``` or ```.card-footer``` class.
###### This is how it will look in an html doc
```html
<div class="card">
<!-- content of the card goes here -->
<div class="card-header">Header content</div>
<div class="card-body">Body content</div>
<div class="card-footer">Footer content</div>
</div>
```
### Cards with Images
-----------
* You may also use specific classes for displaying images in cards.
* There are two classes for this purpose: card-img-top, which places an image on the top of the card, and card-img-bottom, which places the image on the bottom, both of them fitting them to the rounded border of the card neatly.
* These classes have to be used with the ```<img>``` tag inside a card to work properly.
* Keep in mind, that if you want an image to span the entire width, you would add the image container outside of the ```<div>``` container with the card-body class.
###### This is how it will look in an html doc
```html
<div class="card">
<!-- content of the card goes here -->
<!-- image on the top of the content -->
<img src="picture.jpg" alt="Picture" class="card-img-top">
<div class="card-body">Body content</div>
</div>
<div class="card">
<!-- content of the card goes here -->
<div class="card-body">Body content</div>
<!-- image on the bottom of the content -->
<img src="picture.jpg" alt="Picture" class="card-img-bottom">
</div>
```
### Cards Overlay
----
* For making an image into the background of the card and displaying the text on top of it you need to use the class card-img-overlay on the content, which you want to display over the image, instead of using the card-body class.
###### This is how it will look in an html doc
```html
<div class="card">
<!-- content of the card goes here -->
<img src="picture.jpg" alt="Picture" class="card-img-top">
<!-- this content is displayed over the image, which is now in the background and covers the whole element -->
<div class="card-img-overlay">Overlay content</div>
</div>
```
### Card is balanced with the image
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<!--You must set the image height on all cards -->

149
guide/english/bootstrap/carousel/index.md Normal file
View File

@@ -0,0 +1,149 @@
---
title: Carousel
---
## Carousel
Carousel is a slideshow component for cycling through elements like images or slides of text.
It provides a dynamic way of representing large amount of data (text or images) by sliding or cycling through, in a smooth fashion
Sample Code of Image Slider is below :
```html
<html>
<head>
<!-- BootStrap's minified CSS version -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>
<style>
.carousel-indicators li
{
background-color:red;
}
.carousel-indicators .active
{
background-color:blue;
}
.carousel-indicators .item
{
height:700 px;
width :800 px;
}
</style>
<body>
<!-- Declaring div for Carousel to appear inside it -->
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1" ></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://res.cloudinary.com/dneh1l9vl/image/upload/v1506241850/Hello_bootstrap_ohtphr.png" alt="Hello_Bootstrap" >
</div>
<div class="item">
<img src="http://res.cloudinary.com/dneh1l9vl/image/upload/v1506613859/devices_bootstrap_nk4zlk.jpg" alt="Device_Bootstrap" >
</div>
<div class="item">
<img src="http://res.cloudinary.com/dneh1l9vl/image/upload/v1506613966/responsive_bootstrap_nzuo9l.jpg" alt="Responsive_Bootstrap">
</div>
</div>
<!-- Left and Right Controls for sliding through the slides -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>
</html>
```
Understanding the Attributes and classes used in above example :
### 1) Attributes
a) `data-ride` :- `data-ride ="carousel"` allows on page load animation to begin.
b) `data-target` :- It points to the id of the Carousel
c) `data-slide-to` :- It specifies which slide to move on to when clicking on the indicators(specific dots).
### 2) Classes
a) `carousel` :- `class="carousel"` specifies that the div contains carousel.
b) `slide` :- This class adds CSS transitions.
c) `carousel-inner` :- This denotes the section of code which will hold the text/image to be displayed in slides.
d) `item` :- It refers to the content to be displayed in the carousel.
e) `left carousal-control` :- This adds the back button allowing sliding to the previous slide.
f) `right carousal-control` :- This adds the next button allowing sliding to the next slide.
g) `carousel-caption` :- This class let you add captions to each slide.
Note: Add `class="carousel-caption"` for each item.
### Usage
#### 1) Via data attributes
The `data-ride="carousel"` attribute is used to mark a carousel as animating starting at page load.
`data-slide` accepts the keywords `prev` or `next`, which alters the slide position relative to its current position.
#### 2) Via JavaScript
Call carousel manually with:
`$('.carousel').carousel()`
### Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-interval=""`.
Some frequently used options are:
* interval
* pause
* ride
* wrap
## Additional Details
- [Bootstrap Carousel](https://getbootstrap.com/docs/4.0/components/carousel/)

165
guide/english/bootstrap/collapse/index.md Normal file
View File

@@ -0,0 +1,165 @@
---
title: Collapse
---
## Collapse
Collapse is a plugin that helps you hide or reveal elements using a smooth animation. Developers commonly use bootstrap collapse to hide or reveal secondary details of webpage section. For example, you could have a list of items with very long descriptions. Displaying everything will consume a lot of space so bootstrap collapse can be used to hide and reveal the description.
Bootstrap collapse is provided as seperate plugin called collapse.js, which means it can be used outside the bootstrap environment. The plugin itself can be found here http://getbootstrap.com/2.0.4/javascript.html#collapse.
Bootstrap collapse can be used with a couple of elements, a button, anchor tag or panel. To use collapse you need at least two elements, one element will control the hide or reveal state of the other element.
The collapse plugin works by changing the class on the collapsible element. There are three possible classes:
* .collapse - this class hides the element
* .collapsing - this class gets attached during transition
* .collapse.in - this class shows the element
### How to use it
To use collapse you can do it in two ways:
* Using `href` on the `<a>` tag
* Using `data-target` on `<button>` tag
The value in `href` or `data-target` will be the selector of the element to collapse. Wether you decide to use the `<a>` or the `<button>` tag, the `data-toggle="collapse"` is required.
The element to collapse must contain the class `.collapse`.
### Examples with buttons
```html
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
<div class="collapse" id="collapseExample">
<div class="well">
...
</div>
</div>
```
In the example above we use a button and an anchor tag to control a div element. The button and anchor which are the controlling elements need two things, an attribute to specify that the controlling element is for collapsing and another attribute to specify which element it controls (hides or reveals).
They both have a *data-toggle* attribute with the value *collapse* which specify that they are to be used for collapsing an element. The anchor tag uses a *href* attribute to specify the element it controls, while the button uses a *data-target* attribute to specify the element it controls.
> You can view a demo of the button here https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_collapsible&stacked=h
> You can view a demo of the anchor tag here https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_collapsible2&stacked=h
## Example with accordion
```html
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
```
In the above example we use the bootstrap collapse to create an accordion. The accordion is simply a bootstrap panel in which the header is displayed and is used to control the panel's body.
The panel's head contains an anchor tag which is used to control the body's collapse state. So we attach the *data-toggle* to specify that this element is used for collapsing and *href* to specify the element it hides or reveals. We can also have a group of panels to make a panel collapsible panel group.
> You can see a demo of panel collapse here https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_collapsible_accordion&stacked=h
### Content element
A paragraph!
```html
<p>Lorem ipsum dolar, Free Code Camp rocks... </p>
```
1. Add `.collapse` class to state that the paragraph is a collapsible element.
2. Add `id` to make this collapsible element accesible for controller element.
```html
<p id="myParagraph" class="collapse">Lorem ipsum dolar, Free Code Camp rocks... </p>
```
### Controller element
A button!
```html
<button>Click Me To See Some Magic!</button>
```
1. Add `data-toggle="collapse"` attribute to control collapsible element.
2. Add `data-target="#id"` attribute to reference the collapsible element with its id.
```html
<button data-toggle="collapse" data-target="#myParagraph">Click Me To See Some Magic!</button>
```
## Example
```html
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-block">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
</div>
</div>
```
### Using it with JavaScript
This plugin allow you to use it with JavaScript where you only need to select the element you want to collapse to enable it:
```js
$('.collapsible-element').collapse();
```
The `collapse` method accepts an optional object where you can set initial state of the collapsable element. The options are:
* `toggle`: It will hide or show the element depending on its state. If it is hidden it will be shown, if it is shown it will be hidden.
* `hide`: Hides the element.
* `show`: Shows the element.
```js
$('.collapsible-element').collapse('hide');
```
Also there are some exposed methods to hook into the collapse functionality:
* `show.bs.collapse`: Fires immediately when the `show` instance method is called.
* `shown.bs.collapse`: Fired when a collapse element has been made visible to the user (will wait for CSS transitions to complete).
* `hide.bs.collapse`: Fired immediately when the `hide` method has been called.
* `hidden.bs.collapse`: Fired when a collapse element has been hidden from the user (will wait for CSS transitions to complete).
```js
$('.collapsible-element').on('show.bs.collapse', function() {
 // for example you want to make an AJAX call to get some data to put in the collapsible element.
})
```
### See it in Action
![Alt Text](https://github.com/figengungor/Gif/blob/master/freeCodeCamp/bootstrap/collapse/collapse.gif)
#### More Information:
<a href='https://v4-alpha.getbootstrap.com/components/collapse/' target='_blank' rel='nofollow'>The official Bootstrap 4 guide on Collapse</a>

38
guide/english/bootstrap/dropdowns/index.md Normal file
View File

@@ -0,0 +1,38 @@
---
title: Dropdowns
---
## Dropdowns
Bootstrap provides Dropdowns as a plugin for displaying lists of links.
The dropdown is a button which toggles displaying a list of links.
Bootstrap’s dropdowns are designed to be generic and applicable to a variety of situations. For instance, it is possible to create dropdowns that contain search fields or login forms.
## Example
```html
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown example
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
```
## Example Explained
The *.dropdown* class indicates a dropdown menu.
To open the dropdown menu, use a button or a link with a class of *.dropdown-toggle* and the *data-toggle="dropdown* attribute.
The *.caret* class creates a caret arrow icon (&#9660;), which indicates that the button is a dropdown.
Add the *.dropdown-menu* class to a unordered list element to actually build the dropdown menu.
#### More Information:
https://getbootstrap.com/docs/4.0/components/dropdowns/

44
guide/english/bootstrap/fontawesome-icons/index.md Normal file
View File

@@ -0,0 +1,44 @@
---
title: Fontawesome Icons For Bootstrap
---
## Fontawesome Icons For Bootstrap
Bootstrap (from version 4 onwards) have dropped Glyphicon icons font in their latest release.
Fontawesome Icons provide you with over 675 icons and they come in font format.
#### How To Use:
In the `<head>` of your html include a reference to Font Awesome.
```html
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
```
Using fontawesome is same as using Glyphicon.
Simply create `<i>` or `<span>` tag and apply the CSS Prefix `fa` and the icon's name. A code example has been provided below.
**Code Example:**
`<i class="fa fa-twitter" aria-hidden="true"></i>`
<i class="fa fa-twitter" aria-hidden="true"></i>
`<span class="fa fa-freecodecamp" aria-hidden="true"></span>`
<span class="fa fa-freecodecamp" aria-hidden="true"></span>
#### Fontawesome Icon List:
Complete list of icons provided by fontawesome is available [here](http://fontawesome.io/cheatsheet/)
`.fa fa-align-left` This is fontawesome align left icon.
<span class="fa fa-align-left" aria-hidden="true"></span>
`.fa fa-heart` This is fontawesome heart icon.
<span class="fa fa-heart" aria-hidden="true"></span>
_Note: Do not include the dot in the HTML Class Attribute, referring to the classes with a dot is only used when adjusting the classes in CSS._
#### More Information:
[Fontawesome Cheatsheet](http://fontawesome.io/cheatsheet/)

141
guide/english/bootstrap/form-inputs/index.md Normal file
View File

@@ -0,0 +1,141 @@
---
title: Form Inputs
---
## Form Inputs
Bootstrap supports the following form controls:
1. input
2. textarea
3. checkbox
4. radio
5. select
## Example Code Snippets
#### 1. Input
Bootstrap supports all the HTML5 input types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.
**Note: Inputs will NOT be fully styled if their type is not properly declared!**
The following example contains two input elements; one of type text and one of type password:
```html
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
```
#### 2. Textarea
The following example contains a textarea:
```html
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
```
#### 3. Checkboxes
Checkboxes are used if you want the user to select any number of options from a list of preset options.
The following example contains three checkboxes. The last option is disabled:
```html
<div class="checkbox">
<label>
<input type="checkbox" value="">Option 1</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="">Option 2</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>Option 3</label>
</div>
```
Use the **.checkbox-inline** class if you want the checkboxes to appear on the same line:
```html
<label class="checkbox-inline"><input type="checkbox" value="">Option 1</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 2</label>
<label class="checkbox-inline"><input type="checkbox" value="">Option 3</label>
```
#### 4. Radio Buttons
Radio buttons are used if you want to limit the user to just one selection from a list of preset options.
The following example contains three radio buttons. The last option is disabled:
```html
<div class="radio">
<label><input type="radio" name="optradio">Option 1</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio">Option 2</label>
</div>
<div class="radio disabled">
<label><input type="radio" name="optradio" disabled>Option 3</label>
</div>
```
Use the **.radio-inline** class if you want the checkboxes to appear on the same line:
```html
<label class="radio-inline"><input type="radio" name="optradio">Option 1</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 2</label>
<label class="radio-inline"><input type="radio" name="optradio">Option 3</label>
```
#### 5. Select (List)
Select lists are used if you want to allow the user to pick from multiple options.
The following example contains a dropdown list (select list):
```html
<div class="form-group">
<label for="sel1">Select list:</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
```
## How to make Bootstrap Inputs Accessible
Input fields should have labels or some other form of identifier such as WAI-ARIA tags to meet the Web
Content Accessibility Guidelines or [WCAG](https://www.w3.org/WAI/tutorials/forms/) for short. In order
for screen readers to accurately convey to a user what labels are associated with which inputs the labels
should reference the corresponding input.
This can be done by utlizing the `for` parameter in the HTML:
```html
<label for="email-input">Enter Email</label>
<input type="email" class="form-control" id="email-input" placeholder="Enter Email">
```
The label `for` attribute **always** references the input field by its **ID**. This tells the screen reader
that this label is definitely for this input field which will minimize confusion for any users who are using
a screen reader to visit a web site.
### More Information:
Code examples are from [W3Schools - Bootstrap Form Inputs](https://www.w3schools.com/bootstrap/bootstrap_forms_inputs.asp).

180
guide/english/bootstrap/forms/index.md Normal file
View File

@@ -0,0 +1,180 @@
---
title: Forms
---
## Forms
---
Bootstrap framework provides a form feature which a programmer can use to create beautiful html forms easily. Using the bootstrap form gives each individual form element a unified global style. Bootstrap form adds the right spacing and look to each element.
Each bootstrap form element should have a class *form-control*. This class is how bootstrao knows which elements to style. All textual elements like **input**, **textarea** and **select** that has *form-control* class will have 100% width by default. There are two types of Bootstrap forms, which are:
* Inline form - creates the form on a single line. Useful for login forms in a nav bar
* Horizontal form - creates a form with each element in a different row
## Example of a basic form
```html
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
```
## Example of an inline form
```html
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
```
## Example of horizontal form
```html
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
```
![Inline Form 2](https://github.com/TroyB12/Pictures/blob/master/Inline%20Form2.PNG)
```html
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Transfer cash</button>
</form>
```
Bootstrap forms allow the programmer to use classes to easily make HTML forms presentable and responsive.
Take the following simple form:
![](https://siamcomm.com/wp-content/uploads/2017/10/Forms-·-Bootstrap.png)
```html
<form>
<div class="form-group">
<label for="EmailField">Email address</label>
<input type="email" class="form-control" id="EmailField" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="PasswordField">Password</label>
<input type="password" class="form-control" id="PasswordField" placeholder="Password">
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">
Check me out
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
```
Individual form fields and the associated label should be wrapped in a `<div>` with a class of `form-group`. One exception to this is when using checkbox field where `form-check` should be used instead of `form-group`.
The `<input>` tag should be given a class of `form-control`.
The `<button>` tag should be given the classes of `btn btn-primary`.
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->
[The official BootStrap documentation is very helpful](http://getbootstrap.com/docs/4.0/components/forms/)
![Inline Form 3](https://github.com/TroyB12/Pictures/blob/master/Inline%20Form3.PNG)
#### Horizontal Form
In combination with Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding `.form-horizontal` to the form. Doing so changes `.form-group`s to behave as grid rows, so no need for `.row`.
```html
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
```
![Horizontal Form](https://github.com/TroyB12/Pictures/blob/master/Horizontal%20Form.PNG)

29
guide/english/bootstrap/get-started/index.md Normal file
View File

@@ -0,0 +1,29 @@
---
title: Get Started
---
## Get Started
Bootstrap is a free and open source framework developed by Twitter, it provides a variety of templates for use with frontend web development. Using Bootstrap makes it easy to design a fully responsive website and is a framework worth learning.
#### What is a responsive website
A responsive website is a website that resizes and rearranges that items on the page depending on the size of your browser. With a responsive website if you resize your browser you can see the changes occur in real time. Bootstrap makes your website responsive for you.
#### How do I add Bootstrap to my page
Adding bootstrap to your page is a fast process, just add the following to the `<head>` tags in your code.
```html
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
```
You will also need to add the following between the `body` tags in your code. With bootstrap you'll be using `<div>` tags when using many of Bootstrap's features, each tag will have it's own unique set of classes applied that allows the tag to perform it's task. Other sections of this Bootstrap guide will show more examples of how Bootstrap uses `<div>` tags. (`<div>` tags are not exclusive to Bootstrap however Bootstrap makes use of them.). Below is the code that would would add to the `body` tags in your code to finish getting started. Keep in mind that while this creates the container, the page will still remain blank until you add content to the container.
```html
<div class="alert alert-success" role="alert">
<strong>Congratulations!</strong>
<p>Bootstrap is now working on this page</p>
</div>
```
<div class="alert alert-success" role="alert">
<strong>Congratulations!</strong>
<p>Bootstrap is now working on this page</p>
</div>
#### More Information
* [Bootstrap's official website](http://getbootstrap.com/getting-started/)

26
guide/english/bootstrap/glyphicon-components/index.md Normal file
View File

@@ -0,0 +1,26 @@
---
title: Glyphicon Components
---
## Glyphicon Components
Bootstrap 3 includes 260 glyphicons. Glyphicons are normally not free of charge, but their creator has made them available for Bootstrap free of cost. As a thank you, you should include a link back to Glyphicons whenever possible.
Use glyphicons in text, navigation, buttons, forms, or toolbars.
## Examples
```html
<p>Star icon: <span class="glyphicon glyphicon-star"></span></p>
<p>Refresh icon: <span class="glyphicon glyphicon-refresh"></span></p>
<p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>
```
## Note
Bootstrap 4 dropped Glyphicons. You can use <a href='http://fontawesome.io/icons/' target='_blank' rel='nofollow'>Font Awesome Icons</a> instead.
#### More Information:
<a href='https://getbootstrap.com/docs/3.3/components/#glyphicons' target='_blank' rel='nofollow'>Official Bootstrap 3 docs on Glyphicons</a>
<a href='https://glyphicons.com/' target='_blank' rel='nofollow'>Glyphicons official website</a>

111
guide/english/bootstrap/grid-examples/index.md Normal file
View File

@@ -0,0 +1,111 @@
---
title: Grid Examples
---
## Grid Examples
#### Tree equal columns
```html
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
```
The above example creates three equal-width columns on small, medium, large, and extra large devices using our predefined grid classes. Those columns are centered in the page with the parent `.container`.
#### Three unequale columns
```html
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
```
#### Two Unequal Columns
```html
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
```
#### Two Columns With Two Nested Columns
```html
<div class="row">
<div class="col-sm-8">
.col-sm-8
<div class="row">
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-6">.col-sm-6</div>
</div>
</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
```
#### Mixed Mobile and Desktop
```html
<div class="row">
<div class="col-xs-7 col-sm-6 col-lg-8">.col-xs-7 .col-sm-6 .col-lg-8</div>
<div class="col-xs-5 col-sm-6 col-lg-4">.col-xs-5 .col-sm-6 .col-lg-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-8 col-lg-10">.col-xs-6 .col-sm-8 .col-lg-10</div>
<div class="col-xs-6 col-sm-4 col-lg-2">.col-xs-6 .col-sm-4 .col-lg-2</div>
</div>
```
#### Clear Floats
Clear floats (with the `.clearfix` class) at specific breakpoints to prevent strange wrapping with uneven content:
```html
<div class="row">
<div class="col-xs-6 col-sm-3">
Column 1
<br>
Resize the browser window to see the effect.
</div>
<div class="col-xs-6 col-sm-3">Column 2</div>
<!-- Add clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3">Column 3</div>
<div class="col-xs-6 col-sm-3">Column 4</div>
</div>
```
#### Offsetting Columns
Move columns to the right using `.col-md-offset-*` classes. These classes increase the left margin of a column by * columns:
```html
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
```
#### Push And Pull - Change Column Ordering
Change the order of the grid columns with `.col-md-push-*` and `.col-md-pull-*` classes:
```html
<div class="row">
<div class="col-sm-4 col-sm-push-8">.col-sm-4 .col-sm-push-8</div>
<div class="col-sm-8 col-sm-pull-4">.col-sm-8 .col-sm-pull-4</div>
</div>
```
#### More Information:
[Bootstrap Grid](https://getbootstrap.com/docs/4.0/layout/grid/)

167
guide/english/bootstrap/grid-system/index.md Normal file
View File

@@ -0,0 +1,167 @@
---
title: Grid System
---
## Grid System
In a nutshell Bootstrap grid system helps you create responsive layouts, it comprises of a system of rows and columns that helps you structure your content.
Rows are horizontal groups of columns, with a maximum of 12 columns per row. Within each row, the content is placed inside the columns and it can span anywhere between 1 to 12 columns.
Bootstrap has five different types of grid tiers namely Extra small, Small, Medium, Large and Extra large, there is a breakpoint defined for each of these grid tiers.
Bootstrap uses pixels to define the grid tier breakpoints, the different viewport widths that act as breakpoints for the grid tiers are:
#### How it works
###### Container
The container is the outer most element that will *contain* your grid, use `container` for a fixed width container in the middle of the screen (extra margin on larger screens) or `container-fluid` for full width.
```
<div class="container"></div>
```
###### Row
Use `row` to group your columns, this will keep everything lined up properly and help you structure your grid.
```
<div class="row"></div>
```
###### Columns
Column classes indicate the number of columns you’d like to use out of the possible 12 per row. For example `col-sm-6` would mean your column would use up half the width of the `row` on a small screen, and `col-lg-4` would use up a third on a large screen.
Here is how you would define a class prefix to use up one column width on the various screen sizes:
- **Extra Small** `col-1`
- **Small** `col-sm-1`
- **Medium** `col-md-1`
- **Large** `col-lg-1`
- **Extra Large** `col-xl-1`
```
<div class="col-sm-1"></div>
```
#### Example
A full width grid that has four columns, that each take up a full row on xs screens, half a row on sm and md screens, and a quarter of the width of the row on screens that are large and above.
```
<div class="container-fluid">
<div class="row">
<div class="col-12 col-sm-6 col-lg-4">First Column</div>
<div class="col-12 col-sm-6 col-lg-4">Second Column</div>
<div class="col-12 col-sm-6 col-lg-4">Third Column</div>
<div class="col-12 col-sm-6 col-lg-4">Forth Column</div>
</div>
</div>
```
*Note that `col-md` and `col-xl` are not defined, where a size is not defined, it will default down to the next smaller size that has been specified.*
Bootstrap provides a ready made 12 column grid system for use in layouts. Consider the following code.
```html
<div class="container">
<div class="row">
<div class="col-md-6">Content</div>
<div class="col-md-6">Content</div>
<div>
</div>
```
where:
- col = column
- md = screen size
- 6 = column width
As a 12 column grid system, all user defined grid column widths must add up to 12.
Screen size values can be assigned as follows:
- xs - < 768px Phones
- sm - < 992px Tablets
- md - < 1200px Laptops
- lg - > 1200px Desktops
Bootstrap is mobile first and responsive.
Mobile first means that the grid layout will automatically be responsive for smaller screens. The HTML then defines the grid layout for larger screens.
The following code and image shows what is possible using different column widths.
```html
<div class="container">
<div class="row">
<div class="example col-md-6">Content</div>
<div class="example col-md-6">Content</div>
<div>
</div>
<div class="container">
<div class="row">
<div class="example col-md-4">Content</div>
<div class="example col-md-4">Content</div>
<div class="example col-md-4">Content</div>
<div>
</div>
<div class="container">
<div class="row">
<div class="example col-md-3">Content</div>
<div class="example col-md-3">Content</div>
<div class="example col-md-3">Content</div>
<div class="example col-md-3">Content</div>
<div>
</div>
<div class="container">
<div class="row">
<div class="example col-md-2">Content</div>
<div class="example col-md-2">Content</div>
<div class="example col-md-2">Content</div>
<div class="example col-md-2">Content</div>
<div class="example col-md-2">Content</div>
<div class="example col-md-2">Content</div>
<div>
</div>
<div class="container">
<div class="row">
<div class="example col-md-1">Content</div>
<div class="example col-md-1">Content</div>
<div class="example col-md-1">Content</div>
<div class="example col-md-1">Content</div>
<div class="example col-md-1">Content</div>
<div class="example col-md-1">Content</div>
<div class="example col-md-1">Content</div>
<div class="example col-md-1">Content</div>
<div class="example col-md-1">Content</div>
<div class="example col-md-1">Content</div>
<div class="example col-md-1">Content</div>
<div class="example col-md-1">Content</div>
</div>
</div>
```
![12-col-grid](https://github.com/bflatt72/bflatt72.github.io/blob/master/img/bootstrapgrid1.png)
#### More Information:
<a href='https://getbootstrap.com/docs/4.0/layout/grid/' target='_blank' rel='nofollow'>Bootstrap Docs - Grid system</a>
*This guide is based on Bootstrap v4 (it will work with v3 except extra small screens are defined as `xs` and there is no `xl` size)*
* Extra large: **Viewport width >= 1200px**
* Large: **Viewport width >= 992px**
* Medium: **Viewport width >= 768px**
* Small: **Viewport width >= 576px**
* Extra small: **Viewport widths below 576px**
#### More Information:
https://getbootstrap.com/docs/4.0/layout/grid/

68
guide/english/bootstrap/icons/index.md Normal file
View File

@@ -0,0 +1,68 @@
---
title: Icons
---
## Icons
The Bootstrap framework provides you Glyphicons for icon.
Bootstrap doesn’t include an icon library by default, but it has a handful of recommendations for you to choose from. While most icon sets include multiple file formats, we prefer SVG implementations for their improved accessibility and vector support.
### How to use
To use Bootstrap icon create a span tag with base class `glyphicon` and individual icon class.
Use it only on elements that contain no text content and have no child elements.
**Code Example:**
`<span class="glyphicon glyphicon-search" aria-hidden="true"></span>`
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
`<span class="glyphicon glyphicon-cog"></span>`
<span class="glyphicon glyphicon-cog"></span>
The Bootstrap framework provides you with over 250 icons called glyphs. They come in font format from the Glyphicon Halflings set.
### How To Use
To use bootstrap icons you simply create `<span>` tag and apply the applicable CSS class for the icon. A code example has been provided below.
**Code Example:**
`<span class="glyphicon glyphicon-search" aria-hidden="true"></span>`
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
### Bootstrap Glyphicon Class List
This is an example of the CSS classes that bootstrap provides for glyphicons. More of them is avalible <a href='https://getbootstrap.com/docs/3.3/components/#glyphicons' target='_blank' rel='nofollow'>here</a>
`.glyphicon glyphicon-plus` This is bootstrap's plus/add icon.
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
`.glyphicon glyphicon-trash` This is bootstrap's trash/delete icon.
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
_Note: Do not include the dot in the HTML Class Attribute, referring to the classes with a dot is only used when adjusting the classes in CSS._
### Bootstrap Icon in Buttons
```html
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
```
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
_Note: Bootstrap's Glyphicons icon is not avalable on bootstrap V4_
### More Information:
- [Bootstrap Glyphicons Icons Doc](https://getbootstrap.com/docs/3.3/components/#glyphicons)

85
guide/english/bootstrap/index.md Normal file
View File

@@ -0,0 +1,85 @@
---
title: Bootstrap
---
## Bootstrap
Bootstrap is a popular front-end framework for web development. It contains pre-built components and design elements to style HTML content. Modern browsers such as Chrome, Firefox, Opera, Safari, and Internet Explorer support Bootstrap.
Bootstrap includes a responsive grid system for varying layouts. It is a great starting point for building a mobile friendly website. It also includes optional JavaScript functionality like collapsible content, carousels, and modals.
#### Version History
Twitter originally developed the Bootstrap framework as an internal tool. They released it as an open source project in August of 2011.
Bootstrap 2 was released in January 2012. One of the primary features was the introduction of the 12 column responsive grid system. Bootstrap 3 appeared in August of 2013, switching to a flat design and a mobile-first approach. Bootstrap 4 is available in beta as of August 2017, and now includes Sass and Flexbox.
Bootstrap 4 was in development for two years before releasing some beta versions during 2017, while the first stable release was out in January 2018. Some notable changes include:
- Moved from Less to Sass;
- Moved to Flexbox and improved grid system;
- Added cards (replacing wells, thumbnails, and panels);
- And much more!
At the time of writing, Bootstrap's latest release is [4.1.3](http://blog.getbootstrap.com/2018/07/24/bootstrap-4-1-3/
). If you would like to keep up with any news of announcements, follow them [here](http://blog.getbootstrap.com/).
#### Installation
There are two main options to add Bootstrap to your web project. You can link to publicly available sources, or download the framework directly.
##### Linking To Another Source
You can add Bootstrap CSS by using a `<link>` element inside the `<head>` of your webpage that references a Content Delivery Network (CDN):
`<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">`
Adding the JavaScript elements of Bootstrap is similar with `<script>` elements usually placed at the bottom of your ‘<body>’ tag. You may need to include some dependencies first. Pay special attention to the order listed:
```html
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
```
_Note: These are only examples and may change without notice. Please refer to a CDN for current links to include in your project._
##### Download/Install
You can download and install the Bootstrap source files with Bower, Composer, Meteor, or npm. This allows greater control and the option to include or exclude modules as needed.
`npm install bootstrap`
`gem 'bootstrap', '~> 4.1.3'`
_Note: These are only examples and may change without notice. Please refer to the _<a href='https://getbootstrap.com/' target='_blank' rel='nofollow'>Bootstrap website</a>_ for the most up-to-date links._
#### The Bootstrap Grid System
The grid system is a mobile-first flexbox system for quickly building layouts of all shapes and sizes suitable on all devices. It’s based on a 12 column layout and has multiple tiers, one for each media query range.
Bootstrap comes with predefined grid classes for your use in markup. See more details and examples at https://getbootstrap.com/docs/4.1/layout/grid/
### Boostrap Features
- Bootstrap 3 supports the latest versions of the Google Chrome, Firefox, Internet Explorer, Opera, and Safari (except on Windows). It additionally supports back to IE8 and the latest Firefox Extended Support Release (ESR).[12]
- Since 2.0, Bootstrap supports responsive web design. This means the layout of web pages adjusts dynamically, taking into account the characteristics of the device used (desktop, tablet, mobile phone).
- Starting with version 3.0, Bootstrap adopted a mobile-first design philosophy, emphasizing responsive design by default.
- Version 4.0 added Sass and flexbox support
#### More Information:
Bootstrap has thorough documentation with many <a href='https://getbootstrap.com/docs/4.0/examples/' target='_blank' rel='nofollow'>examples</a> and an <a href='https://getbootstrap.com/docs/4.0/getting-started/introduction/' target='_blank' rel='nofollow'>HTML template for getting started</a> (this template only has script included; it does not contain a set up of the grid system if that's what you're looking for).
In addition, you can find both <a href='https://bootswatch.com/' target='_blank' rel='nofollow'>free</a> and <a href='https://themes.getbootstrap.com/' target='_blank' rel='nofollow'>paid</a>
themes that build on the Bootstrap framework to provide a more customized and stylish look.
#### Bootstrap Resources:
[Bootstrap's offical blog](http://blog.getbootstrap.com/)
[Bootstrap site inspiration](http://expo.getbootstrap.com/)
[Showcase of sites built using Bootstrap](http://builtwithbootstrap.com/)
[HTML linter for projects using Bootstrap](https://github.com/twbs/bootlint)
[Design elements and code snippets for Bootstrap](https://bootsnipp.com/)
[Code, theme, and add-on resources for Bootstrap](http://expo.getbootstrap.com/resources/)

94
guide/english/bootstrap/modals/index.md Normal file
View File

@@ -0,0 +1,94 @@
---
title: Modals
---
## Modals
Modals are popups for providing important information before continuing further.
To create such dialogs/pop-ups on the top of current page Bootstrap provides Modal plugin.
#### Code Example :
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Triggering the modal popup -->
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal popup -->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<!-- Modal Content -->
<div class="modal-content">
<div class="modal-header">
<button type="button" data-dismiss="modal" class="close">&times;</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
Do you wish to continue?
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">close</button>
</div>
</div>
</div>
</div>
</body>
</html>
```
#### Understanding the Attributes and classes used :
a) `data-toggle = "modal"` : It opens up the modal.
b) `data-target` : It points to the Id of the modal to open up.
c) `data-dismiss="modal"` : This causes the popup to close when clicked on close button.
d) `.modal` class identifies the contents of `<div>` as a modal.
e) `.modal-dialog` class sets the proper height and width of the dialog.
f) `.modal-content` class styles the modal.It contains header,body and footer sections.
g) `.modal-header` class denotes the header section of the modal (title and (×) button).
h) `.modal-title` class styles the header of the modal with a proper height.
i) `.modal-body` class styles the body of the modal(dialog/popup).It can have other markups like `<p>,<img>,<video>` etc.
j) `.modal-footer` class styles the footer of the modal.
#### More Information :
<a href='https://bootstrapbay.com/blog/working-bootstrap-modal/' target='_blank' rel='nofollow'>Bootstrap Modal</a>
If you want to explore ****Bootstrap 4.0 Latest (Alpha version)**** :
<a href='https://getbootstrap.com/docs/4.0/components/modal/' target='_blank' rel='nofollow'>Bootstrap Modal v4.0</a>

168
guide/english/bootstrap/navigation-bar/index.md Normal file
View File

@@ -0,0 +1,168 @@
---
title: Navigation Bar
---
## Navigation Bar
The Bootstrap framework provides you with a feature call navigation bars. In short a navigation bar (also referred to navbars) is a header at the top of the page to display navigational information.
#### How To Use
To use Bootstrap Navigation Bars you add a `<nav>` element to the top inside the `<body>` element of your webpage. There are various styles you can add to customize the display of your navbars.
#### Code Example
This is the code needed to make a basic navbar.
```html
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Site Name</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
```
#### Navbar Styles
Bootstrap provides a set of classes in the Bootstrap framework to style your navbars. These classes are as followed:
* `navbar navbar-default` This is the default style for your navbars.
* `navbar navbar-inverse` This is similar to the default style except the colors are inverted.
#### Adding drop-down menus to the navbar
You can include a drop down menu inside a navbar. This feature requires you to include Bootstrap's javascript file for it to work.
```html
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Drop down
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</li>
```
#### Adding buttons to the navbar
You can add buttons on the navbar. The existing Bootstrap Button classes work however you'll need to include the class `navbar-btn` to the end of the class list.
```html
<button class="btn navbar-btn">Button</button>
```
#### Adding forms to the navbar
You can also add forms to the navbar. This could be uses for tasks such as a search field, quick login field, etc.
```html
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
```
#### Aligning elements to the right on the navbar
In some cases you might want to align elements in a navbar to the right (for example a login or sign-up button.). To do this you'll need to use the `navbar-right` class.
```html
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Site Name</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Action Link #1</a></li>
<li><a href="#">Action Link #2</a></li>
</ul>
</div>
</nav>
```
#### Displaying the navbar independent of scrolling
In some cases you might want to keep the navbar at the top or bottom of the screen regardless of scrolling. You will need to add either the `navbar-fixed-top` or `navbar-fixed-bottom` class to the `<nav>` element.
```html
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Site Name</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
```
#### Collapsing the navbar
On a small screen (such as a phone or tablet) the navbar is going to take up too much space. Luckily the option to collase the navbar exists. You can accomplish this using the following example.
```html
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Site Name</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
```
#### Navbar Examples
<!-- A drop-down cannot be shown in the example unless we include Bootstrap's javascript file. -->
<!-- The id attributes are set in the example so clicking the links won't go to top of the page. -->
`navbar navbar-default`
<nav class="navbar navbar-default" id="navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#navbar-default">Site Name</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#navbar-default">Home</a></li>
<li><a href="#navbar-default">Page 1</a></li>
<li><a href="#navbar-default">Page 2</a></li>
<li><a href="#navbar-default">Page 3</a></li>
<button class="btn navbar-btn">Button</button>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#navbar-default">Action Link #1</a></li>
<li><a href="#navbar-default">Action Link #2</a></li>
</ul>
</div>
</nav>
`navbar navbar-inverse`
<nav class="navbar navbar-inverse" id="navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#navbar-inverse">Site Name</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#navbar-inverse">Home</a></li>
<li><a href="#navbar-inverse">Page 1</a></li>
<li><a href="#navbar-inverse">Page 2</a></li>
<li><a href="#navbar-inverse">Page 3</a></li>
<button class="btn navbar-btn">Button</button>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#navbar-inverse">Action Link #1</a></li>
<li><a href="#navbar-inverse">Action Link #2</a></li>
</ul>
</div>
</nav>
#### More Information:
[BootStrap navbar documentation](https://getbootstrap.com/docs/4.0/components/navbar/)

60
guide/english/bootstrap/panels/index.md Normal file
View File

@@ -0,0 +1,60 @@
---
title: Panels
---
## Panels
The Bootstrap framework provides you with a feature called panels. A panel is a box that has a styled heading and then a body that allows you to display information in an organized manner, through a set of one or more panels.
#### How To Use:
To use Bootstrap Panels you add a `<div>` with a class for your type of panel (class `panel panel-default` or something similar, see the panel examples for more information.) and then two nested `<div>` tags, one for the heading (class `panel panel-heading`) and one for the body (class `panel panel-body`). You may find that the Code Example is easier to understand than a written explanation.
**Code Example**
```html
<div class="panel panel-primary">
<div class="panel panel-heading">Panel Primary</div>
<div class="panel panel-body"> This is a panel with the primary panel style.</div>
</div>
```
#### Panel Examples:
This is a set of examples that shows each type of panel. The CSS Class is displayed above each example.
`panel panel-default`
<div class="panel panel-default">
<div class="panel panel-heading">Panel Default</div>
<div class="panel panel-body"> This is a panel with the default panel style.</div>
</div>
`panel panel-primary`
<div class="panel panel-primary">
<div class="panel panel-heading">Panel Primary</div>
<div class="panel panel-body"> This is a panel with the primary panel style.</div>
</div>
`panel panel-success`
<div class="panel panel-success">
<div class="panel panel-heading">Panel Success</div>
<div class="panel panel-body"> This is a panel with the success panel style.</div>
</div>
`panel panel-info`
<div class="panel panel-info">
<div class="panel panel-heading">Panel Info</div>
<div class="panel panel-body"> This is a panel with the info panel style.</div>
</div>
`panel panel-warning`
<div class="panel panel-warning">
<div class="panel panel-heading">Panel Warning</div>
<div class="panel panel-body"> This is a panel with the warning panel style.</div>
</div>
`panel panel-danger`
<div class="panel panel-danger">
<div class="panel panel-heading">Panel Danger</div>
<div class="panel panel-body"> This is a panel with the danger panel style.</div>
</div>
### More Information
- [Bootstrap dropdown documentation](https://getbootstrap.com/docs/4.0/components/dropdowns/)

104
guide/english/bootstrap/tables/index.md Normal file
View File

@@ -0,0 +1,104 @@
---
title: Tables
---
## Tables
---
#### Basic Table
In order to achieve the basic styling example add the base class `.table` to any `<table>` element.
**Example**
<table class="table">
...
</table>
![Basic Table](https://github.com/TroyB12/Pictures/blob/master/Basic%20Table.PNG)
---
#### Table Striped
In order to achieve the striped row effect (zebra-striping) in tables use `.table-striped` in addition to `.table` on any `<table>` element. Striped tables are styled via the `:nth-child` CSS selector, which is not available in Internet Explorer 8.
<table class="table table-striped">
...
</table>
![Striped Table](https://github.com/TroyB12/Pictures/blob/master/Table%20Striped.PNG)
---
#### Table Bordered
In order to achieve the bordered table use `.table-bordered` in addition to `.table` on any `<table>` element.
<table class="table table-bordered">
...
</table>
![Bordered Table](https://github.com/TroyB12/Pictures/blob/master/Table%20Bordered.PNG)
---
#### Table Hover
In order to achieve the hover row effect on tables, use `.table-bordered` in addition to `.table` on any `<table>` element.
<table class="table table-hover">
...
</table>
![Hover Table](https://github.com/TroyB12/Pictures/blob/master/Table%20Hover.PNG)
---
#### Table Condensed
In order to achieve the condensed table use `.table-condensed` in addition to `.table` on any `<table>` element.
<table class="table table-condensed">
...
</table>
![Condensed Table](https://github.com/TroyB12/Pictures/blob/master/Table%20Condensed.PNG)
---
#### Table Responsive
In order to achieve the responsive table by wrapping any `.table` table in a `.table-responsive` element.
<div class="table-responsive">
<table class="table">
...
</table>
</div>
![Responsive Table](https://github.com/TroyB12/Pictures/blob/master/Table%20Responsive.PNG)
---
Developers are able to change the style of each individual row and/or cell by using **contextual classes**.
- `.active` - Applies the hover color to a particular row or cell
- `.success` - Indicates a successful or positive action
- `.info` - Indicates a neutral informative change or action
- `.warning` - Indicates a warning that might need attention
- `.danger` - Indicates a dangerous or potentially negative action
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>
![Contextual Class Table](https://github.com/TroyB12/Pictures/blob/master/Table%20Contextual%20Classes.PNG)
---

116
guide/english/bootstrap/tabs-and-pills/index.md Normal file
View File

@@ -0,0 +1,116 @@
---
title: Tabs and Pills
---
## Tabs and Pills
Tabs and Pills are forms of navigation. Meaning they help the end-user navigate through the site in a user-friendly manner.
### Tabs
To achieve bootstrap tabs, first you need an element that has the `.nav` class assigned to it. Then you simply add an extra class named `.nav-tabs`.
```html
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
```
![Bootstrap Tabs](https://github.com/TroyB12/Pictures/blob/master/Bootstrap%20Tabs.PNG)
---
### Pills
Bootstrap Pills is achieved the same way as Bootstrap Tabs except instead of `.nav-tabs`, use `.nav-pills`.
```html
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
```
![Bootstrap Pills](https://github.com/TroyB12/Pictures/blob/master/Bootstrap%20Pills.PNG)
---
### Pills Stacked
Bootstrap Pills are also vertically stackable by using `.nav stacked` in conjunction with `.nav-pills`.
```html
<ul class="nav nav-pills nav-stacked">
...
</ul>
```
![Bootstrap Pills Stacked](https://github.com/TroyB12/Pictures/blob/master/Bootstrap%20Pills%20Stacked.PNG)
---
### Bootstrap Tabs/Pills Justified
Both Bootstrap Tabs and Pills can have equal width of their parent at screens wider than 768px by using `.nav-justified` class. On smaller screens, the nav links are stacked.
```html
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
```
![Bootstrap Tabs/Pills Justified](https://github.com/TroyB12/Pictures/blob/master/Bootstrap%20Tabs%20And%20Pills%20Justified.PNG)
---
### Disabled Links
For any nav component (tabs or pills) add `.disabled` for gray links and no hover effects
```html
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
...
</ul>
```
![Disabled Links](https://github.com/TroyB12/Pictures/blob/master/Bootstrap%20Tabs%20and%20Pills%20Disabled%20Link.PNG)
---
### Tabs with Dropdowns
Add dropdown menus to your nav tabs.
```html
<ul class="nav nav-tabs">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
```
![Tabs with Dropdowns](https://github.com/TroyB12/Pictures/blob/master/Bootstrap%20Tabs%20Dropdown.PNG)
---
#### Tabs with Dropdowns
Add dropdown menus to your nav pills.
```html
<ul class="nav nav-pills">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
```
![Pills with Dropdowns](https://github.com/TroyB12/Pictures/blob/master/Bootstrap%20Pills%20Dropdown.PNG)

20
guide/english/bootstrap/templates/index.md Normal file
View File

@@ -0,0 +1,20 @@
---
title: Templates
---
## Templates
### Overview
Templates are prebuilt toolkits that make spinning up a new web page a breeze. If you have a general idea of your desired layout, or if you want to browse through a library of common layout templates for ideas, Bootstrap templates take much of the tediousness, and frustrations away form the initial build process. This assistance helps you to focus on the finer details of the project instead of wondering why CSS is not cooperating.
### Getting Started
* Bootstraps official webpage offers "Themes" instead of templates. Themes are just fully built out starter projects, while a template describes just a prebuilt HTML frame. Themes cost money and perhaps help out the novice developer, while many templates are open source and only provide the preliminary layout elements needed.
* Below is a list of layout templates, made specifically for for Bootstrap. Have Fun!
### Template Links
* [StartBootstrap Templates](https://startbootstrap.com/)
* [W3 Schools Bootstrap Templates](https://www.w3schools.com/bootstrap/bootstrap_templates.asp)
* [Wrap Bootstrap](https://wrapbootstrap.com/)
* [Wow Slider](http://wowslider.com/posts/35-top-free-bootstrap-templates-2016-95.html)
* [Bootstrap Made](https://bootstrapmade.com/)