Bootstrap - Revision history

Yiming: /* Use React-Bootstrap */

2017-12-13T01:44:44Z

Use React-Bootstrap

Yiming: /* Why Bootstrap */

2017-12-13T01:43:02Z

Why Bootstrap

Yiming: /* Why Bootstrap */

2017-12-13T01:37:17Z

Why Bootstrap

Yiming: /* Why Bootstrap */

2017-12-13T01:36:38Z

Why Bootstrap

Yiming: /* What is Bootstrap */

2017-12-13T01:36:09Z

What is Bootstrap

Yiming: /* What is Bootstrap */

2017-12-13T01:35:31Z

What is Bootstrap

Yiming: /* What is Bootstrap */

2017-12-13T01:35:07Z

What is Bootstrap

Yiming: Created page with "===What is Bootstrap === #Bootstrap is a free front-end framework for faster and easier web development #Bootstrap includes HTML and CSS based design templates for typography,..."

2017-12-12T05:34:10Z

Created page with "===What is Bootstrap === #Bootstrap is a free front-end framework for faster and easier web development #Bootstrap includes HTML and CSS based design templates for typography,..."

New page

===What is Bootstrap ===
#Bootstrap is a free front-end framework for faster and easier web development
#Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins
#Bootstrap also gives you the ability to easily create responsive designs

===Why Bootstrap ===
#Easy to use: CSS Pre-processing is great and every front end developer should learn it. However not everyone is using it. Bootstrap offers less files for those of us who know how to use CSS, but it also provides the plain old CSS file for those don’t want to use CSS pre-processing.
#Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops
#Basic and extensive HTML elements: A website has many different elements such as headings, lists, tables, buttons, forms, etc. All these fundamental HTML elements have been styled and enhanced in Bootstrap. There are also extensive components covered in Bootstrap such as Dropdowns, Button Groups, Navigation Bar, Alerts.
#Browser compatibility: Bootstrap is compatible with all modern browsers (Chrome, Firefox, Internet Explorer, Safari, and Opera)

=== React-Bootstrap ===
React-Bootstrap is a library of reusable front-end components, built for React. For more reference, please go [https://react-bootstrap.github.io/ here].

== Install React-Bootstrap ==
You can get React-Bootstrap from npm:
npm install --save react-bootstrap
Include the following code in your public/index.html:
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
If you want to use bootstrap themes, you should also include this one:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css">

== Use React-Bootstrap ==
Let's try the following code in your src/App.js file:
import {Button} from 'react-bootstrap';
<Button bsStyle="success" bsSize="small" onClick={someCallback}>
Some button
</Button>
What we are doing here is to import a bootstrap component named "Button" from "react-bootstrap", and set the style to "success" and the size to "small".

Another way to use React-Bootstrap is to write directly in Javascript:
var button = ReactBootstrap.Button({
bsStyle: "success",
bsSize: "large",
children: "Register"
});
React.render(button, mountNode);
What we are doing here is to create a component named button, and set its style to "success", size to "large" and name to "Register".

Explore more bootstrap components at [https://react-bootstrap.github.io/components.html here].

@@ Line 1: / Line 1: @@
 ===What is Bootstrap ===
-#Bootstrap is a free front-end framework for faster and easier web development
+#Bootstrap is a free front-end framework for faster and easier web development.
-#Bootstrap includes many HTML and CSS based design templates, including typography, forms, buttons, tables, navigation, modals, image carousels, as well as optional JavaScript plugins
+#Bootstrap includes many HTML and CSS based design templates, including typography, forms, buttons, tables, navigation, modals, image carousels, as well as optional JavaScript plugins.
-#Bootstrap also gives you the ability to easily create responsive designs
+#Bootstrap also gives you the ability to easily create responsive designs.
 ===Why Bootstrap ===

@@ Line 37: / Line 37: @@
    });
    React.render(button, mountNode);
-What we are doing here is to create a component named button, and set its style to "success", size to "large" and name to "Register".
+What we are doing here is to create a component named "button", and set its style to "success", size to "large" and name to "Register".
 Explore more bootstrap components at [https://react-bootstrap.github.io/components.html here].

@@ Line 6: / Line 6: @@
 ===Why Bootstrap ===
 #Easy to use: CSS Pre-processing is great, and every front end developer should learn it. However, not everyone is using it. Bootstrap offers less files for those of us who know how to use CSS, but it also provides the plain old CSS file for those who don’t want to use CSS pre-processing.
-#Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops
+#Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops.
-#Basic and extensive HTML elements: A website has many different elements such as headings, lists, tables, buttons, forms, etc. All these fundamental HTML elements have been styled and enhanced in Bootstrap. There are also extensive components covered in Bootstrap such as Dropdowns, Button Groups, Navigation Bar, Alerts.
+#Basic and extensive HTML elements: A website has many different elements such as headings, lists, tables, buttons, forms. All these fundamental HTML elements have been styled and enhanced in Bootstrap. There are also extensive components covered in Bootstrap, such as Dropdowns, Button Groups, Navigation Bar, Alerts.
-#Browser compatibility: Bootstrap is compatible with all modern browsers (Chrome, Firefox, Internet Explorer, Safari, and Opera)
+#Browser compatibility: Bootstrap is compatible with all modern browsers (Chrome, Firefox, Internet Explorer, Safari, and Opera).
 === React-Bootstrap ===