Presentation is loading. Please wait.

Presentation is loading. Please wait.

Creating customization with JS framework: Bootstrap

Similar presentations


Presentation on theme: "Creating customization with JS framework: Bootstrap"— Presentation transcript:

1 Creating customization with JS framework: Bootstrap
Author: Juan Davila If it's not responsive, user's are more likely to overlook it, and move on.

2 Bootstrap is a front-end framework, that utilizes CSS.
Basically, a large stylesheet with a lot of rules. JavaScript comes with custom jQuery plugins. Lastly, The magic happens with conventions with structured html with class in the right place. 1. Bootstrap is a front-end framework. 2. A large style sheet with of rules. 3. Coordinates with jQuery. 4. Conventions and Semantics are important.

3 Requirements <script src="Scripts/jquery-1.8.3.js"/>
Bootstrap.css <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href=" p/3.3.4/css/bootstrap.min.css"> <!-- Optional theme --> <link rel="stylesheet" href=" p/3.3.4/css/bootstrap-theme.min.css"> <!-- Latest compiled and minified JavaScript --> <script src=" p/3.3.4/js/bootstrap.min.js"></script> <script src="Scripts/jquery js"/> <script src="bootstrap/js/bootstrap.js/> Source:

4 Where to customize and how?
Visit Less can be used created as .json config file.

5 Demo Visual Studio has a nuget package for bootstrap that can be used to install bootstrap, if you want more customization create the .Less file on the bootstrap and modify from there. Can modify/override the bootstrap styles.  Can use the F12 editor to locate the style to modify the site.css file for bootstrap. Make sure site.css is included in the html page, just after the bootstrap.css. Directly extract bootstrap in to project directory. CSS and IMG folders need to be on the same level, works because it references relevant URLs. Best to place them in the layout views, so that it goes into every page.

6 Managing dependencies
Bower bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff2

7 Javascript can be use to check states
Data-toggle Active at the end of button attributes Uses jQuery event delegate, uses the on method, the button state is set until after the click event  fires. The "button" for example will have active class btn btn-primary active.

8 Basic Setup Download the Bootstrap
Reference the correct dependencies that may be needed. Modify any custom styles in the site.css, and included in the head element. IMPORTANT NOTE: Operates on 12 column grid layout

9 To be aware of what? Advantages Disadvantages
Good for developing for responsive UI design. A lot of documentation is provided. Reusable by utilizing semantic class names. Convention(within a class that creates something like magic.) Difficult to differentiate from other websites that use bootstrap. Class names are not specific about implementation Will not accept 3rd party JavaScript libraries. PAGINATION or JUMBOTRON are good examples of conventions.

10 Information http://getbootstrap.com/2.3.2/ Sources:


Download ppt "Creating customization with JS framework: Bootstrap"

Similar presentations


Ads by Google