Bootstrap 基本class

表頭

  • jumbotron
    頁面表頭
    功能:内元素放大
  • container
    排版使用
    加上自適應内距
link(rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css")

.jumbotron
 .container
  h1 Hello Bootstrap!
  p Bootstrap是很多人使用的網頁模板,裡面有很多別人寫好的現成css資源,也有用來排版很方便的網格系統
  a.btn.btn-primary(href="http://kkbruce.tw/bs3" target="_blank") 了解更多(中文説明文件)

Display

標題與圖片

  • img-responsive
    自適應圖片大小
  • page-header
    標題用,上下留margin,下面再留一條淺淺的灰線
link(rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css")

h3.page-header 寫完HTML就可以刻完網頁的設計哲學
p 當時間很趕/或是原本對設計版面沒有什麼概念的時候,就會希望,如果元件都幫我刻好好的是不是就可以刻完html網頁就做完了?
img.img-responsive(src="https://www.gaslampmedia.com/media/bootstrap.png")

Display

按鈕

  • btn
    使成為按鈕
  • btn-default,btn-primary,btn-danger,btn-success,btn-warning
    按鈕顏色
  • btn-lg,btn-xs
    按鈕大小
  • btn-grounp
    按鈕群組化
link(rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css")

h3.page-header 按鈕的大小與調整
  p
   .btn.btn-default 前往報名課程
   .btn.btn-primary 主要的按鈕
   .btn.btn-danger.btn-lg 危險按鈕
   .btn.btn-warning 警告
   .btn.btn-success.btn-xs 成功按鈕
   br
   br
   .btn-group
    .btn.btn-default 設定
    .btn.btn-primary 帳號
    .btn.btn-default 課程
    .btn.btn-default 購買資訊
    .btn.btn-default 前往報名課程
    .btn.btn-default 前往報名課程

Display

麵包屑導覽列

  • breadcrumb
    麵包屑導覽頁,方便呈現分類樹資訊
link(rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css")

h3.page-header 麵包屑導覽列
 ul.breadcrumb
 li 
  a 動態網頁課程
 li 
  a Bootstrap介紹
 li 
  a 第一個範例

Display

清單

  • ul.list-group
  • li.list-group-item
    清單
  • span.badge
    清單項目徽章
  • li.active
    清單亮起來
  • li.disabled 禁用的灰色
link(rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css")

h3.page-header 清單練習
ul.list-group
 li.list-group-item list-group 清單
  span.badge list-group-item 裡面的項目
 li.list-group-item.disabled span.badge 右方小提醒
  span.badge disabled禁用的灰色
 li.list-group-item.active breadcrumn 麵包屑導覽列 
  span.badge active亮起來
 li.list-group-item.list-group-item-success .list-group-item-success成功的綠

Display

表格

  • table
    處理表格樣式
  • table-striped
    條紋式的row
link(rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css")

.container
 h3.page-header 表格練習
 table.table.table-striped
  thead
  tr
   th 項目
   th 優點
   th 缺點
  tr
   th 速度
   th 可以很快建立網頁
   th 看起來大同小異
  tr
   th 樣式
   th 基本視覺不會太離譜
   th 深入改需要功力
  tr
   th 適合情境
   th 沒時間的時候
   th 獨特設計,動態網頁

Display

well:文字灰框

link(rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css")

.container
 h3.page-header 好用的Bootstrap
 p.well 省時又方便的Bootstrap,是由兩個twitter員工開發的框架

Display

練習網址

CODEPEN

 

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *