Twitter Bootstrap

Twitter Bootstrap?? Heard anything about this earlier?? omg..i too donno..lets browse what it is.. 😉

wiki: twitter_bootstrap

download: TwitterBootStrap

Video Tutorial for codeIgniter & TwitterBootstrap:

Youtube

Best Authors to subscribe for this frameworks/php video tutorials are:

phpacademy
creativitytuts
verbloten

webdesigntutplus

 

What is twitter bootstrap

Twitter Bootstrap is a toolkit to develop web apps and sites fast. It includes basic CSS and HTML for creating Grids, Layouts, Typography, Tables, Forms, Navigation, Alerts, Popovers etc. In simply we can say its a css framework developed by twitter for open source.

In this and consequent pages, w3resource covers Twitter Bootstrap tool in detail, which will equip you to build web apps and sites using the tool.

Browser Support

Twitter Bootstrap is created with modern browsers in mind. So, you will find it working perfectly with all the modern versions of Chrome, Firefox, Safari, Opera and Internet Explorer.

Today we will see how to use twitter bootstrap with code igniter.

Getting started with Twitter Bootstrap

You can include twitter Bootstrap in your HTML page in two ways.

You can simply include

<link rel=”stylesheet” href=”/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css”>

in the head section of your HTML file.

Since Twitter Bootstrap supports LESS (CSS preprocessor for faster and easier web development), you can include the less css file and less JS file in your HTML page as

<link rel=”stylesheet/less” href=”/path/to/bootstrap.less”>
<script src=”/path/to/less.js”></script>

You may also use NetDNA’s Bootstrap CDN @ http://www.bootstrapcdn.com/

What you will learn

In w3resource “Twitter Bootstrap Tutorial” you will learn the following.

Grid system

You will see how to create Grid System using Twitter Bootstrap. It supports 940px wide 12 column Grid as default and many variations of it.

Grid Demo

Layouts

You will see how to create 940px wide fixed Layout and how to create Fluid layouts. This will help you to build HTML templates easily.

Fluid Layout

Typography

You will see how to build Headings, paragraphs, lists, and other inline type elements.

Typography

Tables

You will see how to build tables for containing tabular data.

Tables

Forms

You will see how to build stylish forms, including textbox, radio button, textarea, various kind of buttons in your HTML page.

Form

Navigation

You will see how to build stylish modern navigation. And also Pagination.

Navbar

Alerts & Error

As a web designer / developer you often need to create alerts for errors, warnings etc. In this tutorial you will learn how to build those using Twitter Bootstrap.

Alerts

Popovers

You will learn to use the toolkit to build modal windows, tooltips and popovers.

popover

Modals

Creating modal windows.

Modal

This is a ongoing series of tutorials and we keep adding new tutorials in this section. Subscribe to our RSS feed to grab what’s new.

.

You may download all the HTML, CSS, JS and image files used in our tutorials here.

undefined

Grid system tutorial

For More like Jquery UI Components for twitter bootstrap and More fonts and icons: click, another click

Advertisements