Web 初學者的第五堂課

套版教學

前情提要

大家還記得上過些什麼嗎

Bootstrap 基礎介紹

Bootstrap 3

最受歡迎的 HTML、CSS 和 JS 框架，

用於開發自適應網頁與以行動優先的網站專案。

Designed for everyone, everywhere.

Bootstrap makes front-end web development faster and easier

One framework, every device.

Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.

Full of features

With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.

Bootstrap 基礎模板

Sample

<!DOCTYPE html>
<html lang="zh-TW">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
  </body>
</html>

Grid system

  • 12 columns across the page
  • is responsive
  • columns will re-arrange depending on the screen size

Grid System

Why Grid System?

  • Readable
  • Normalize
  • Responsive

Bootstrap Grid Classes

  • xs (for phones)
  • sm (for tablets)
  • md (for desktops)
  • lg (for larger desktops)

Grid System Rules

  • Rows must be placed within a .container
  • Use rows to create horizontal groups of columns
  • Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows

Example

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

Tables

Basic example

add the class .table to any <table>

Striped rows

table table-striped

Bordered table

table table-bordered

Hover rows

table table-hover

Condensed table

.table-condensed

Contextual classes

  • .active
  • .success
  • .info
  • .warning
  • .danger

Forms

Basic example

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Buttons

Button tags

Use the button classes on an <a>, <button>, or <input> element.

Example

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

Options

  • btn-default
  • btn-primary
  • btn-success

  • btn-info

  • btn-warning

  • btn-danger

  • btn-link

Sizes

  • .btn-lg
  • .btn-sm
  • .btn-xs

Images

Responsive images

.img-responsive

Image shapes

  • .img-rounded
  • .img-circle
  • .img-thumbnail

Components

  • Glyphicons
  • Dropdowns
  • Button groups
  • Button dropdowns
  • Input groups
  • Navs
  • Navbar
  • Breadcrumbs
  • Pagination
  • Labels
  • Badges
  • Jumbotron
  • Page header
  • Thumbnails
  • Alerts
  • Progress bars
  • Media object
  • List group
  • Panels
  • Responsive embed
  • Wells

Watch yourself

getbootstrap.com/components

LayoutIt!

Drag & Drop Bootstrap Builder.

http://www.layoutit.com

在我們開始之前

讓我們先下載

Bootstrap

http://j.mp/bootstrap-cscec

下星期期中考週前

社課暫停一次！

感謝大家今天的參與

Web 初學者的第五堂課

By Albert Hsieh

Made with Slides.com

Web 初學者的第五堂課

大同大學資訊創意研究社系列社課

  • 1,149

More from Albert Hsieh