Scribd Logo
Upload

Welcome to Scribd!

  • 101 views

    Web Application Framework - Bootstrap

    Uploaded by

    Amit Dubey
    Bootstrap is a popular open-source front-end web framework that makes web development faster and easier. It provides pre-built, responsive UI components and grids for developing responsive web applications that work across desktops, tablets, and mobile devices. Some key benefits of Bootstrap include fast development, cross-browser compatibility, responsive design out of the box, and the ability to customize components and styles easily.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd

    Web Application Framework - Bootstrap

    Uploaded by

    Amit Dubey
    101 views7 pages
    Bootstrap is a popular open-source front-end web framework that makes web development faster and easier. It provides pre-built, responsive UI components and grids for developing responsive web applications that work across desktops, tablets, and mobile devices. Some key benefits of Bootstrap include fast development, cross-browser compatibility, responsive design out of the box, and the ability to customize components and styles easily.

    Original Description:

    This is a short article written by me as a presentation topic within Advaiya Solutions.

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Bootstrap is a popular open-source front-end web framework that makes web development faster and easier. It provides pre-built, responsive UI components and grids for developing responsive web applications that work across desktops, tablets, and mobile devices. Some key benefits of Bootstrap include fast development, cross-browser compatibility, responsive design out of the box, and the ability to customize components and styles easily.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    101 views7 pages

    Web Application Framework - Bootstrap

    Uploaded by

    Amit Dubey
    Bootstrap is a popular open-source front-end web framework that makes web development faster and easier. It provides pre-built, responsive UI components and grids for developing responsive web applications that work across desktops, tablets, and mobile devices. Some key benefits of Bootstrap include fast development, cross-browser compatibility, responsive design out of the box, and the ability to customize components and styles easily.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 7

    Web Application Framework | Bootstrap

    Building presence, voicing thoughts | Amit Dubey

    In todays world web applications are the preferred choice of development as more and more platforms are abiding to web standards. In such a competitive and dynamic compositions it becomes essential to work with frameworks and tools that can help scale your web applications to multiple web platforms including desktop, laptop and ultra-books to smart phones and tablet devices.

    Twitters Bootstrap is one such web application framework that helps you build web applications which are inherently responsive to various resolutions, display aspect ratios and can be used from your choice of device including mobile devices.

    Introduction
    Definition of web application framework
    A web application framework (WAF) is a software framework that is designed to support the development of dynamic websites, web applications, web services and web resources.

    Brief history of web application framework

    Earlier web application developers thought process for developing web application UIs

    Just fit anything to make it run

    Mark Otto and Jacob Thornton at Twitter soon realized that this is not a good idea for future web platforms and especially for twitter. In August 2011 they published their own made first web application framework under the banner of Twitter Bootstrap which was most popular GitHub development project by February 2012. Twitter bootstrap laid the foundation for thought process of responsive user interfaces for web based applications. Twitter released bootstrap 2 by end of January 2012 which was another massive hit and people started using Twitter Bootstrap framework actively in their applications. http://builtwithbootstrap.com/ provides some quick live site references those are built using Twitter Bootstrap Framework

    What is Responsive Web Design?


    Responsive web design inherently means reacting to change in environment, in case of web applications this can be Browsers Resolutions Display Aspect Ratios Devices

    EXAMPLE OF RESPONSIVE WEB DESIGN

    Few more examples of sites built with Twitter Bootstrap


    Toyota.com - Needs no introduction Appster Fastest growing mobile firm in Australia Quicklinkr - A home for all of your favorites Open Cooks Website for food lovers

    Why Bootstrap?
    Provides a clean and uniform solution for building an interface for developers
    Bootstrap makes use of compact and clean CSS that provides a very clean and uniform solution building approach. This CSS can be customized as per ones needs, however using the default version also provides enough features for rapidly building a good looking, crisp and clean web-site or web-application.

    User Interface Framework (JS, CSS and Images)


    Bootstrap makes use of standard JS, CSS and images providing a consistent look and feel across multiple webapplications. It becomes very easy even for system users to grasp the application usability quickly and this also reduces the end user learning curve across web-applications since all of the applications follow the same simple and clean UI constructs.

    Open Source project


    You can customize and build your own copy. Its open source and licensed under Apache 2.0 license making it free to use and distribute with your own customizations.

    Supports all major browsers incl. IE7


    Bootstrap has been built inherently on LESS framework making it possible to work across browsers and devices. LESS is a framework to generate CSS based on parameter settings dynamically, in simple words its a way of generating CSS on runtime that suits your environment and needs.

    Supports HTML5 and CSS3


    JavaScript takes much longer on MAC platforms and few previous versions of MAC do not even support flash making it difficult to embed dynamic content into the site. Bootstrap supports and works on HTML5 which has native support on all popular platforms including MAC and support on all popular browsers making it work across platforms and devices.

    Beautiful and functional built-in components which are easy to customize


    Bootstrap come pre-built with standard set of widely used components including buttons, carousels, panels, etc Behavior of all these components is driven by the Base CSS component of bootstrap making it really simple and easy to customize the look and feel and behavior of these controls. Being open source there are also external set of customized components available those enhance the components to greater extent by introducing higher degree of customizability.

    Bootstrap Constructs
    Scaffolding
    A temporary structure on the outside of a building, made of wooden planks and metal poles, used by workers while building, repairing, etc Twitter Bootstrap scaffolding consists of fixed\fluid GRID system and LAYOUT making it possible to adhere to responsive design standards. Twitter Bootstraps scaffolding also consists of LESS making it easier to customize the complete structure without even digging deep.

    Base CSS
    Twitter Bootstraps Base CSS covers design constructs such as Typography, Code, Tables, Forms, Buttons, Images, Icons. Bootstrap 2 onwards supports GLYPHICONS. GLYPHICONS is a library of precisely prepared monochromatic icons and symbols, created with an emphasis on simplicity and easy orientation.

    Components
    Twitter Bootstrap comes with pre-defined set of commonly used components including Dropdowns, Button groups, Button dropdowns, Navigational tabs, pills, and lists, Navbar, Breadcrumbs, Pagination, Labels & Badges, Page headers and hero unit, Thumbnails, Alerts, Progress bars. There are external third parties who have also contributed to the component developments to enhance existing set of components and also add new components. An extensive list exists here http://bootstraphero.com/

    JQuery Plugins
    jQuery is a multi-browser (cf. cross-browser) JavaScript library designed to simplify the clientside scripting of HTML.[2] It was released in January 2006 at BarCamp NYC by John Resig JQuery spices up the overall user experience by adding dynamism to components and HTML DOM elements like Transitions, Modals, Dropdowns, ScrollSpy, Togglable tabs, Tooltips, Popovers, Alert messages, Buttons, Collapse, Carousel, Typeahead, Affix. JQuery also exposes various events which can be used by developers to add custom handlers for achieving a specific task.

    Twitter Bootstrap Structure

    Bootstrap Benefits?
    Courtesy: Zing Design

    Bootstrap development is FAST


    If you need to push out a new site or app in a matter weeks and have a shoestring design budget, Bootstrap is perfect! You can grab one of the great templates available, make a few style changes, throw in some images, pop on a bit of snazzy interactivity and youre away! In the past, fast and easy has been synonymous with bad practice, and while there are a few issues, Bootstrap has been built from the ground-up by some of the smartest, geekiest geeks on the planet. Cross-browser and device compatibility have been taken into account, which will cut down your debugging time phenomenally.

    Its platform agnostic


    Remember: while it might seem like magic, its just CSS and JavaScript. You dont have to learn anything new, just plug it into the head of the document and all of its magnificent power will suddenly become available. Just in case things werent easy enough, you can get a Compass version of Bootstrap if you prefer SASS to LESS, there are Bootstrap packages like this one for .NET and, of course, a WordPress plugin.

    You can just pop magical classes onto any HTML element and make it do fancy stuff!
    Now I know what youre thinking Hey isnt that going to make my HTML horribly unsemantic?!. Well maybe it doesnt follow best practices, but it is easy and fast. If time is of the essence, or the site is a one-off promo or landing page, Bootstrappin is a no-brainer. If you are worried about non-semantic markup but are still eager to use Bootstrap for a big project, you may find you have to dig into the Bootstrap source code.

    Its responsive from the get-go!


    By using the fluid grid layout, designing for responsive websites is a walk in the park. Everything just works! Enjoy the true power of the grid, watch as your columns respond fluidly at every important viewport width. Bootstrap makes mobile-first development even easier as you dont need to go altering your mark-up with every new screen width that you are designing for.

    Its fully customizable

    Few In-house development references


    In-House Development Advaiya Lab Leave Management System Library Management System Ideascale Hackathon | Data Insights Ideascale Hackathon | iSocialytics Description
    Our very own Advaiya Lab is using Twitter Bootstrap for in-house projects. Advaiya Lab will soon be publishing various flavored Bootstrap Templates to be used in live projects too. Our new leave management system which is currently under development will be using Bootstrap for its UI make-over. One small application recently developed and used within Advaiya Lab is Library Management System. This version is a SharePoint App and uses Bootstrap for its UI. Data Insights project on IdeaScale platform has been built using Bootstrap as the UI Frontend Framework. This project was one among the First Price Winner. iSocialytics project on IdeaScale platform has been built using Bootstrap as the UI Frontend Framework.

    Sample Screenshot

    End of document

    You might also like