Twitter Bootstrap依照其宣言
簡潔，直覺，強大的前端框架，讓網頁開發更快速更簡單。
就是說像我這樣的CSS半瓶水與美學白癡，只要套用其設定就可以達成優雅、風格一致的使用者介面網頁呈現出來
Twitter Bootstrap是Twitter的設計師和工程師貢獻的開放原始碼專案，包含了HTML, CSS 和JavaScript呈現的工具
如果說
HTML是素顏
CSS就像是單一功能或顏色的化妝品，用以美化HTML
JavaScript 就像是會化妝的巧手，可以調和CSS美化HTML
Bootstrap 就是一個已經由化妝大師調好各種CSS和JavaScript的組合包
當然上述的JavaScript不止操縱CSS的功能，還有各種其他強大的功能，在此不贅述
Bootstrap就像是目前市面上在賣的BB霜或CC霜，不會化妝沒關係拿一瓶CC霜在臉上一抹，馬上達成舒緩、保濕、抗老、隔離、遮瑕、調色、防護、美白、輕透、隱形毛孔與保濕，再加送能讓肌膚變成小臉效果、增加平滑明亮感。這樣的好東西，能不用嗎？
首先到http://getbootstrap.com/ 下載.zip套件回來，檔名中有min代表有壓縮過，使用者下載時速度會快一點，可以自行選用任何一種
解壓縮後會看到以下的目錄將bootstrap.css複製到public/stylesheets中，bootstrap.js複製到public/javascripts中
也別忘了下載jquery並複製到public/javascripts，因為bootstrap仍會使用到jquery的元件；將jquery-1.10.2.js複製到public/javascripts
到此下載 jquery.com
這裡使用的bootstrap基本上是根據此範本http://getbootstrap.com/examples/jumbotron/所做的修改
接下來修改layout.jade和index.jade
doctype html
head
title Microblog - powered by Express
//
Bootstrap core CSS
link(href='/stylesheets/bootstrap.css', rel='stylesheet')
//
Custom styles for this template
link(href='/stylesheets/style.css', rel='stylesheet')
body
.navbar.navbar-inverse.navbar-fixed-top(role='navigation')
.container
.navbar-header
button.navbar-toggle(type='button', data-toggle='collapse', data-target='.navbar-collapse')
span.sr-only Toggle navigation
span.icon-bar
span.icon-bar
span.icon-bar
a.navbar-brand(href='#') Microblog
.navbar-collapse.collapse
form.navbar-form.navbar-right(role='form')
.form-group
input.form-control(type='text', placeholder='Email')
.form-group
input.form-control(type='password', placeholder='Password')
button.btn.btn-success(type='submit') Sign in
// /.navbar-collapse
// Main jumbotron for a primary marketing message or call to action
.container
block content
hr
footer
p microblog made by Express
// /container
//
Bootstrap core JavaScript
==================================================
// Placed at the end of the document so the pages load faster
script(src='/javascripts/jquery-1.10.2.js')
script(src='/javascripts/bootstrap.js')
修改index.jade
//index.jade
extends layout
block content
.jumbotron.hero-unit
h1= title
p this is #{title} page
p
a.btn.btn-primary.btn-lg(role='button') Learn more »
.container
// Example row of columns
.row
.col-md-4
h2 有女朋友别忘了请我吃饭
p 你有一种好脾气 让我非常着迷 才故意跟你熟悉 好引来你对我的注意
p 却在多年之后 成为你口中的好兄弟 书上说 男人最讲义气
p 除了爱情没有不可分享的东西 我潜心学习 所以 我笑着对你说
p "有女朋友别忘了请我吃饭" 这样才不会给你带来负担
p
a.btn.btn-default(href='#', role='button') View details »
.col-md-4
h2 PEP 20 -- The Zen of Python
p Beautiful is better than ugly. Explicit is better than implicit.
p
a.btn.btn-default(href='#', role='button') View details »
.col-md-4
h2 Heading3
p something to do
p
a.btn.btn-default(href='#', role='button') View details »
可以看到調整完成的效果如下
Django
Django也如法泡製；將bootstrap.css複製到mysite/microblog/static/css中，bootstrap.js和jquery-1.10.2.js複製到mysite/microblog/static/js中
編輯/mysite/mysite/microblog/templates中的layout.html和index.html
重新編輯layout.html
<!DOCTYPE html>
<html>
<head>
<title>Microblog - powered by Django </title>
<!--Bootstrap core CSS -->
<link href="/static/css/bootstrap.css" rel="stylesheet">
<!--Custom styles for this template -->
<!--link href='/static/css/style.css', rel='stylesheet'-->
</head>
<body>
<div role="navigation" class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target=".navbar-collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span></button>
<a href="#" class="navbar-brand">Microblog </a>
</div>
<div class="navbar-collapse collapse">
<form role="form" class="navbar-form navbar-right">
<div class="form-group"><input type="text" placeholder="Email" class="form-control"></div>
<div class="form-group"><input type="password" placeholder="Password" class="form-control"></div>
<button type="submit" class="btn btn-success">Sign in</button>
</form>
</div>
<!-- /.navbar-collapse-->
</div>
</div>
<div class='container'>
<!-- Main jumbotron for a primary marketing message or call to action-->
{% block content %}{% endblock %}
<footer>
<hr>
<p>microblog made by django </p></footer>
</div>
</div>
</body>
<!-- /container--><!--Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster-->
<script src="/static/js/jquery-1.10.2.js"></script>
<script src="/static/js/bootstrap.js"></script>
</html>
修改index.html
{% extends 'layout.html' %}
{% block content %}
<div class="jumbotron hero-unit">
<h1>{{title}}</h1>
<p>this is {{title}} page </p>
<p>
<a role="button" class="btn btn-primary btn-lg">Learn more »</a></p>
</div>
<div class="container">
<!-- Example row of columns-->
</div>
<div class="row">
<div class="col-md-4">
<h2>有女朋友别忘了请我吃饭</h2>
<p> 你有一种好脾气 让我非常着迷 才故意跟你熟悉 好引来你对我的注意</p>
<p> 却在多年之后 成为你口中的好兄弟 书上说 男人最讲义气</p>
<p> 除了爱情没有不可分享的东西 我潜心学习 所以 我笑着对你说</p>
<p> "有女朋友别忘了请我吃饭" 这样才不会给你带来负担</p>
<p>
<a href="#" role="button" class="btn btn-default">View details »</a></p>
</div>
<div class="col-md-4">
<h2>PEP 20 -- The Zen of Python</h2>
<p> Beautiful is better than ugly. Explicit is better than implicit.</p>
<p>
<a href="#" role="button" class="btn btn-default">View details »</a></p>
</div>
<div class="col-md-4">
<h2>Heading3</h2>
<p> something to do</p>
<p><a href="#" role="button" class="btn btn-default">View details »</a></p>
</div>
</div>
{% endblock %}
首頁的效果如下：
可以看出利用bootstrap設計出了一個簡潔的頁面
bootstrap的功能不只如此，各位有興趣可以去研究一下官網上的範例 和範本
留言列表
