Difference between revisions of "Bootstrap"
From CSE330 Wiki
Jump to navigationJump to search| (3 intermediate revisions by the same user not shown) | |||
| Line 5: | Line 5: | ||
===Why Bootstrap === | ===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. | + | #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 | + | #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 === | === React-Bootstrap === | ||
| Line 37: | Line 37: | ||
}); | }); | ||
React.render(button, mountNode); | 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]. | Explore more bootstrap components at [https://react-bootstrap.github.io/components.html here]. | ||
Latest revision as of 01:44, 13 December 2017
Contents
What is Bootstrap
- 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 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 who 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. 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 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 here.
