【CSS】美化畫面TOOL—Bootstrap前台開發工具包

- 6月 20, 2013

Bootstrap前台開發工具包，是一個簡單易上手的工具，對於程式設計師來說是一大福音，透過簡單的設定引用，能輕輕鬆鬆完成一個不錯的畫面，此工具功能強大，有CSS來美化畫面外，也整合了Jquery、JavaScript API 應用（若有需要此相關功能，需引用JS檔案，詳見官網），本篇單純簡單介紹如何使用CSS，更多CSS應用，詳見官網CSS介紹。

使用Bootstrap前台開發工具包前，需要引用Bootstrap CSS檔案。
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />

HTML 頁面(參考)︰
<body style="margin-left:30px">

<h1>標題 Hello, world!</h1>

<strong>粗體 rendered as bold text</strong>
<br/><br/>

<address>
     <strong>Twitter, Inc.</strong><br>
          795 Folsom Ave, Suite 600<br>
            San Francisco, CA 94107<br>
     <abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:jason@example.com"> jason@example.com</a>
</address>

<br/><br/>

<input type="button" id="button_query" value="查詢" class="btn btn-info" >
   <br/><br/>
<a href="#" class="btn btn-large btn-primary disabled">Primary link</a>



<form>
<fieldset>
    <legend>Legend</legend>
    <label>Label name</label>
    <input type="text" placeholder="Type something…">
    <span class="help-block">Example block-level help text here.</span>
    <label class="checkbox">
      <input type="checkbox"> Check me out
    </label>
    <button type="submit" class="btn">Submit</button>
</fieldset>
</form>

<form class="form-search">
<input type="text" class="input-medium search-query">
<button type="submit" class="btn">Search</button>
</form>

<div class="btn-group">
<a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
    <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
    <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
    <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
    <li class="divider"></li>
    <li><a href="#"><i class="i"></i> Make admin</a></li>
</ul>
</div>

</body>

執行畫面：