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代表有壓縮過,使用者下載時速度會快一點,可以自行選用任何一種

 blog

 解壓縮後會看到以下的目錄將bootstrap.css複製到public/stylesheets中,bootstrap.js複製到public/javascripts中

20140102-113836

也別忘了下載jquery並複製到public/javascripts,因為bootstrap仍會使用到jquery的元件;將jquery-1.10.2.js複製到public/javascripts

到此下載 jquery.com

這裡使用的bootstrap基本上是根據此範本http://getbootstrap.com/examples/jumbotron/所做的修改

20140103-134506

接下來修改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 »

可以看到調整完成的效果如下

 20140103-133959

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 %}

首頁的效果如下:

blog  
可以看出利用bootstrap設計出了一個簡潔的頁面

bootstrap的功能不只如此,各位有興趣可以去研究一下官網上的範例  和範本

 

arrow
arrow

    長風破浪會有時 發表在 痞客邦 留言(0) 人氣()