Bootstrap Study Note (1)

<span class=”badge pull-right”>42</span>Because my project is related to Twitter API, Bootstrap is built by Twitter developers. In order to make the whole page same style, I decide to use Bootstrap to build the website’s frontend. Before that, I already can use Bootstrap to build website but it is not professional. Here I will write down study note to record knowledge related to Bootstrap systematically.

Bootstrap is a toolkit of CSS, HTML, JavsScript to make building website much easier and more flexible, which is built on HTML5 and CSS3.

• <p class=”lead“></p>

If you want your paragraph obvious, you can add class, named “.lead”, which will enlarge font, bold, and modify line-height and margin. Meanwhile, we can use <strong> <b> to bold words; <i> <em> to italics. In addition, you can use color to highlight text, for example, “.text-danger“, “.text-muted“, etc. You also can modify text position, like “.text-center“, “.text-left“, “.text-right” and “.text-justify“.

• <h1>…<small>…</small>…</h1>

We can use “small” to add sub-title.

• <ul class=”list-inline”>

This is used to make menu,  transferring from vertical list to horizontal list and remove bullet number to maintain level display.

• <tr class=”active”><td>…</td></tr>

We can set different class to mark table row’s status(different color), like “.active“, “.success“, “.info“, “.warning” and “.danger“.

• icon

Bootstrap uses @font-face attribute to load font. So you use this freely. <span class=”glyphicon glyphicon-cloud”></span>

• grid system

Each row(.row) must be contained in container(.container).

In row, we can add column (.column), but its sum should be no more than 12, like “.col-md-4“, “.col-md-8“, etc.

Detail content should be put in column, and only column can be treated as row container’s sub-element.

We can use padding to create each column’s space, like “.col-md-offset-4“.

• droplist

We can use <li role=”presentation” class=”dropdown-header“>第一部分菜单头部</li> to add sub-title in droplist; <li role=”presentation” class=”divider“></li> to draw a line to seperate groups.

We can add “.pull-right” and “.dropdown-menu-right” to modify drop menu’s position. For example, <ul class=”dropdown-menu pull-right” role=”menu” aria-labelledby=”dropdownMenu1″>

We can set like this: <div class=”btn-group dropdown“> to make menu show up(“.dropup”) or down(“.dropdown”).

• navigation

We can use “.nav-tabs” or “.nav-pills” to define navigation’s style. “.nav-stacked” can make navigation vertically. Like droplist, we also can use “.nav-divider” to draw line in navigation list. “.nav-justified” can modify navigation display model(vertial or horizontal) depending on window’s size. There is another special navigation, named breadcrumb.

There is another special navigation, named “.breadcrumb”. It is used to tell the user which location he is now. For example:

<ol class="breadcrumb">
  <li><a href="#">首页</a></li>
  <li><a href="#">我的书</a></li>
  <li class="active">《图解CSS3》</li>
</ol>

• navbar

Navbar is more complex than navigation. There are two steps to build a navbar.

(1) build a container(div) and use its class “.navbar” ( control position and style) and “.navbar-default” (control color)

(2) build a list by (<ul class=”nav“>) and use its class “.navbar-nav“.

If we want our navbar suitable for all kinds of windows, we need to use “.navbar-responsive-collapse”. Following is example to tell us how to use it.

<div class="navbar navbar-default" role="navigation">
 <div class="navbar-header">
 　<!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
 <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse">
 <span class="sr-only">Toggle Navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 <!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 -->
 <a href="##" class="navbar-brand">慕课网</a>
 </div>
 <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
 <div class="collapse navbar-collapse navbar-responsive-collapse">
 <ul class="nav navbar-nav">
 <li class="active"><a href="##">网站首页</a></li>
 <li><a href="##">系列教程</a></li>
 <li><a href="##">名师介绍</a></li>
 </ul>
 </div>
</div>

Default navbar’s color is gray; we can use “.navbar-inverse” to replace “.navbar-default” to change its color to black.

If we want to fix navigation, we need to add “.navbar-fixed-top“.

• Page Navigation

We can use “.pagination” to do page navigation. For example:

<ul class="pagination">
   <li><a href="#">&laquo;</a></li>
   <li><a href="#">1</a></li>
   <li><a href="#">2</a></li>
   <li><a href="#">&raquo;</a></li>
</ul>

Meanwhile, we can use “.pagination-lg” and “.pagination-sm” to modify page navigation’s size. Bootstrap also provides flip page navigation by “.pager“.

• Label

We can use “.label” to implement highlight. Similar to button, label has different colors, like “.label-default“(gray), “.label-primary“(navy blue), “.label-success“(green), “.label-in“(light blue), “.label-warning“(orange) and “.label-danger“(red). For instance,

<span class="label label-default">New</span>

• Badge

Badge is similar to label to remind something. It doesn’t have so many colors, but its usage is same with label.  If I want to add color for badge, I can use process to help.

<span class="badge pull-right">42</span>

<span class="badge progress-bar-info">10</span> 
<span class="badge progress-bar-success">20</span>
<span class="badge progress-bar-warning">30</span>
<span class="badge progress-bar-danger">40</span>

• thumbnail

Thumbnail always combines with grid system to use. Meanwhile, we normally add “.caption” to describe the image. For example:

<div class="container">
 <div class="row">
 <div class="col-xs-6 col-md-3">
 <a href="#" class="thumbnail">
 <img src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;" alt="">
 </a>
 <div class="caption">
 <h3>Bootstrap框架系列教程</h3>
 <p>Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p>
 <p>
 <a href="##" class="btn btn-primary">开始学习</a>
 <a href="##" class="btn btn-info">正在学习</a>
 </p>
 </div> 
 </div>
</div>
</div>

• alert

Bootstrap uses different color to show warning box, like “.alert-success“, “.alert-info“, “.alert-warning” and “.alert-danger“. For example,

<div class="alert alert-success" role="alert">Cong</div>

We also can close the alert and use “.alert-link” to give link highlight in alert.

<div class="alert alert-success alert-dismissable" role="alert">
 <button class="close" type="button" data-dismiss="alert">&times;</button>
 恭喜您操作成功！<a href="#" class="alert-link">import message</a>
</div>

• Processing bar

We just need to use following method to show processing bar.

<div class="progress">
       <div class="progress-bar" style="width:40%">40%</div>
</div>

Colorful processing bar is so easy, like “.progress-bar-info“, “.progress-bar-success“, “.progress-bar-warning” and “.progress-bar-danger“.

We can change processing style, like “.progress-striped“. In order to make processing running, we add “.active”, for example <div class=”progress progress-striped active“>. We also can add label to processing bar, just adding number before </div>, see above example.

• media

Media can seperate to four parts, one is container (.media), the other is object (.media-object), another is body (.media-body) and topic (.media-heading). Here is an exmaple. object is usually image. body is to describe this image, including heading and real paragraph. We can use “.pull-left” or “.pull-right” to modify object and body’s related position.

<div class="media">
 <a class="pull-left" href="#">
 <img class="media-object" src="http://img.mukewang.com/52e1d29d000161fe06000338-300-170.jpg" alt="...">
 </a>
 <div class="media-body">
 <h4 class="media-heading">系列：十天精通CSS3</h4>
 <div>全方位深刻详解CSS3模块知识，经典案例分析，代码同步调试，让网页穿上绚丽装备！</div>
 </div>
</div>

If we want to do comment/review, we can use “.media-list” to list all medias.

• list-group

list group looks like a table with only one column and multiple rows.

<ul class="list-group">
 <li class="list-group-item"><span class="badge">13</span>揭开CSS3的面纱</li>
 <li class="list-group-item"><a href="##">CSS3选择器</a></li>
 <li class="list-group-item">CSS3文本</li>
</ul>

We can add badge/link to it. In “.list-group-item”, we also can define header and text by “.list-group-item-heading” and “.list-group-item-text“. Except that, we can color list-group-item by “.list-group-item-success“, “.list-group-item-info“, “.list-group-item-warning” and “.list-group-item-danger“.

• panel

Panel is to generate a text box with boarder.

<div class="panel panel-default">
    <div class="panel-heading">topic: ##</div>
    <div class="panel-body">I'm a panel's body</div>
    <div class="panel-footer">author: linda</div>
</div>

We can change “.panel-default” to others to change panel’s color, like “.panel-primary“, “.panel-success“, “.panel-info“, “.panel-warning” and “.panel-danger“.

• pop out box

This part is complex, but we can use JavsScript method to implement it. So here I don’t write down any additional information about it. Maybe later I will add it.