Best Mobile Apps for Learning Bootstrap

Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites. It allows us to design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins.

Best Bootstrap Learning Apps for Mobile

1. Bootstrap Tutorial

This is a excellent apps for learning Bootstrap offline.We would prefer because low memory occupied. Very informative and easy to understand for beginner intermediate and advance developer.

[Download]   Android

 

2. Offline Bootstrap

Offline Bootstrap provides a set of style sheets that provide basic style definitions for all key HTML components.It’s design is cool and user friendly.

[Download]   Android

3. Bootstrap 3.1 docs and example

This apps contains Documentation and examples of this powerfull framework Sleek, intuitive, and powerful front-end framework for faster and easier web development.

[Download]   Android

4. Bootstrap Assistant

Bootstrap Assistant is the ultimate, all-in-one reference guide for developing responsive, mobile-first websites and applications using Bootstrap Framework. Quickly navigate between different styles, components and scripts included in Bootstrap Framework to extend your project and make it fit every device perfectly.

[Download]   Android

5. Bootstrap 3 Examples

In this app you can See how well Bootstrap 3 runs on your Android devices.This app wraps the Bootstrap v3.3.1 example pages in a Phonegap v3.6.4 package.

[Download]   Android

 

If you need any Web development services ... Feel free to contact us at :

M2soft

 

List of all classes in bootstrap

Hello Everyone,

Welcome to M2soft, As you all know Bootstrap is the first mobile HTMl and CSS frameworks used to develop a responsive website. So In this article, We have mentioned how bootstrap classes works or what meaning of single classes and what they played role in the code. 

Here is the list of bootstrap classes that makes it more easier to use bootstrap for making a responsive web page.

 .container-fluid   : 

Sets a minimum width of 940px (clears floated elements before/after)

 .container :

Sets a width of 940px which also centres the content (clears floated elements before/after)
 
.pull-right :

Floats element to the right
 
.pull-left :

Floats element to the left
 
.hide :

sets element to display:none
 
.show :

 
sets element to display:block
 
.row :

 
Sets a -20px margin (clears floated elements before/after)
 
.span1 up to .span24 :

 
Sets specific pixel width values
 
.row > .offset1 (up to .offset12) :

 
Sets specific margin-left values
 
.span-one-third :

 
Sets width of 300px
 
.span-two-thirds :

 
Sets width of 620px
 
.span-one-third :

 
Sets margin-left of 340px (so clears .span-one-third by 40px)
 
.span-two-thirds  :

 
Sets margin-left of 660px (so clears .span-two-thirds by 40px)
 
/* Forms.less  Base styles for various input types, form layouts, and states  -------------- */
 
.uneditable-input :

Sets element to block and gives border-radius + sets height/line-height to 18px + sets a box-shadow + background colour white + cursor: not-allowed
 
.input-mini :
.mini :

 
Sets width to 60px
 
.input-small :
.small :

 
Sets width to 90px
 
.input-medium :
.medium :

 
Sets width to 150px
 
.input-large :
.large :

 
Sets width to 210px
 
.input-xlarge :
.xlarge :

 
Sets width to 270px
 
.input-xxlarge :
.xxlarge :

 
Sets width to 530px
 
.span1 up to .span16 (when applied to inputs and textareas) 

 
Sets specific pixel width values + no float + no left margin + inline-block
 
.actions :

 
Sets top/bottom margin of 18px + padding + top border + border-radius
 
.actions .secondary-action :

 
floats element right and get a line-height of 30px
 
.help-inline :
.help-block :

 
line-height 18px + font-size: 13px
 
.form-stacked :

 
padding-left: 20px;
 
/* Tables.less Tables for, you guessed it, tabular data ---------- */
 
.condensed-table :

Applies smaller padding than default
 
.bordered-table :

 
Applies borders to the table
 
.zebra-striped :

 
Uses CSS3 to apply stripes (e.g. tr:nth-child(odd) td)
 
table .header :
cursor:pointer :
 
/* Patterns.less  Repeatable UI elements outside the base styles provided from the scaffolding ---------- */
 
.topbar  :

 
Sets height to 40px + position:fixed + to top/left of screen with a very large z-index (10,000)
Also sets styles on sub elements like a form, p, input, div > ul
 
.topbar-inner, .topbar .fill :

 
Sets dark background gradient
 
.menu-dropdown :
.dropdown-menu :

 
Sets white background, floats to left, absolute positioning, box shadow, border-radius, large z-index (900) + min/max widths + display none!?
(I believe this is the drop down menu itself which is hidden until hovered over)
 
.breadcrumb :
.pagination   :

 
Applies relevant styles to a

element
 
.hero-unit  :

 
Sets elements as a large promotional section
 
.page-header :

 
Applies box-shadow and bottom-border 

Different button classes using for different styles. 

  
.btn.error
.btn.success
.btn.info
.btn
.btn.primary
.btn.active
.btn.disabled
.btn.large
.btn.small
.close 

 
.well : Applies padding/background colours/border-radius/box-shadow  

Use these classes to develop  a responsive website.

If you need any web development services.. Feel free to contact us at

M2Soft Solutons

 

Bootstrap guide for beginners

Bootstrap :

Bootstrap is one of the most popular front-end framwork which provide free collection of tools for creating websites and web applications.

What You Should Already Know
 
you Must have a basic understanding of the following:

1. HTML
2. CSS
3. (JavaScript/jQuery)


Features of Bootstrap :

 Great Greed System :
 “Bootstrap uses a twelve-column grid system based on percentages, so it’s easy to create a fluid layout, where your design will re-arrange itself at major browser-width breakpoints,”

Built-in Classes

Caitlin explains, “Using the Bootstrap classes, you can decide how your design will flow as users view it on different devices.”

Ready-to-use Components

 More than a ready-to-go grid system and built-in-classes, the Bootstrap framework comes with components such as:

    Glyphicons
    Buttons
    Navigation Bars
    Breadcrumbs
    Pagination
    Panels
    And much more!

Easy-to-implement JavaScript Plugins

According to Caitlin
    “On top of the built-in styles, Bootstrap comes with JavaScript plugins that take care of interactive elements for you. Want to include a carousel at the top of your page? Bootstrap’s got that. Want to pop out your login form in a modal window? Easy-peasy. Need to add an accordion to your FAQs page? Done.”

Furthermore, Caitlin mentions that, “because these components are so simple to style, you barely need to look outside the Bootstrap JS for different-looking plugins!”

Why Use Bootstrap?

Mobile-first approach : Since Bootstrap 3, the framework consists of mobile-first styles throughout the entire library

Browser support : Bootstrap is supported by all popular browsers

Responsive web design : Bootstrap's responsive CSS adjusts to Desktops, Tablets, and Mobile phones

Easy to get started : With just the knowledge of HTML and CSS anyone can get started with Bootstrap

"What do you think about this article" Share with us in comments.

Regards : Web Development Company Indore