bootstrap v3

由 datahunter 在五, 15/10/2021 - 12:37 發表

Grid

column elements are placed within row elements

xs class is meant for phones with size <768 px.
sm class is for tablets with size >= 768 px and <992 px.
md class is used for desktops with size >=992 px and <1200 px.
lg class is defined for larger desktops with size >= 1200 px.

ie.

<div class="row">
<div class="col-md-4">One</div>
<div class="col-md-4">Two</div>
<div class="col-md-4">Three</div>
</div>
<div class="row">
<div class="col-md-3">Four</div>
<div class="col-md-3">Five Welcome to BrowserStack!</div>
<div class="col-md-3">Six</div>
<div class="col-md-3">Seven</div>
</div>

Components

https://getbootstrap.com/docs/3.4/components/

Containers
Glyphicon
Button
Button groups
Button toolbar
alert box
Well
dropdown menu
Input Group
nav
- nav-tabs
- nav-pills
navbar
Labels
Badges
List group
Panel
Text
Jumbotron
Page header
Tables

Containers

# Bootstrap requires a containing element to wrap site contents and house grid system.

# esponsive fixed width container

<div class="container">
  ...
</div>

# full width container, spanning the entire width of your viewport

<div class="container-fluid">
  ...
</div>

glyphicon

Icon classes cannot be directly combined with other components
(所以要用 "<span>" 包它)

* "<span></span>" 中間不應再包野 !!

<span class="glyphicon glyphicon-star"></span> Star

在 Button 內放 icon

<button type="button" class="btn btn-default btn-lg">
    <span class="glyphicon glyphicon-star"></span> Star
</button>

在 alert 內加 icon

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign"></span> Msg
</div>

Button

<button type="button" class="btn btn-default btn-lg"> ... </button>

button 的效果:

- btn-default ( mouse over, click )

size:

- btn-group-lg
- btn-group-sm
- btn-group-xs

button acts like a link

<a class="btn btn-default" href="#" role="button">Link</a>

Button groups

<div class="btn-group">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

size:
- btn-group-lg
- btn-group-sm
- btn-group-xs

Nesting - dropdown menus

Place a .btn-group within another .btn-group when you want dropdown menus mixed with a series of buttons.

Button toolbar

<div class="btn-toolbar">
    <div class="btn-group">
      <button type="button" class="btn btn-default">1</button>
      <button type="button" class="btn btn-default">2</button>
    </div>
    <div class="btn-group">
      <button type="button" class="btn btn-default">A</button>
      <button type="button" class="btn btn-default">B</button>
    </div>
</div>

Stateful

# Stateful

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  Loading state
</button>

<script>
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // business logic...
    $btn.button('reset')
  })
</script>

Methods

$().button('toggle')
$().button('reset')
$().button(string)

Radio

* 應用了 checked 及 disabled

<div class="form-check">
  <input class="form-check-input" type="radio" name="MyRadios" id="MyRadios1" value="option1" checked>
  <label class="form-check-label" for="MyRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="MyRadios" id="MyRadios2" value="option2">
  <label class="form-check-label" for="MyRadios2">
    Second default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="MyRadios" id="MyRadios3" value="option3" disabled>
  <label class="form-check-label" for="MyRadios3">
    Disabled radio
  </label>
</div>

alert box

# "alert type" 是必須的

# "alert-link" 令到 click 了後不轉色

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

Dismissible alerts

× 是 x 來

<div class="alert alert-warning alert-dismissible">
  <button type="button" class="close" data-dismiss="alert" >
    <span>&times;</span>
  </button>
  <strong>Warning!</strong> some text
</div>

Well

<div class="well">...</div>
<div class="well well-lg">...</div>
<div class="well well-sm">...</div>

dropdown menu

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" >
    <li><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li><a role="menuitem" tabindex="-1" href="#">Another action</a></li>    
    <li class="divider"></li>
    <li class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
  </ul>
</div>

Input group

input-group
input-group-addon

Extend form controls by adding text or buttons before, after, or on both sides of any text-based <input>

(.input-group-addon or .input-group-btn to prepend or append elements to a single .form-control)

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="basic-addon1">*</span>
  <input type="text" class="form-control" placeholder="username">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

Size:

- input-group-lg
- input-group-sm

將 checkbox 與 textbox 結合

<div class="row">
  <div class="col-xs-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox">
        <!--<input type="radio">-->
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div>
  </div>
</div>

nav

nav(Tabs)

<ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li class="disabled"><a href="#">Profile</a></li>
</ul>

nav(Pills)

<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
</ul>

navbar (headers for your application)

Navbar

<nav class="navbar navbar-default">
    <a class="navbar-brand" href="#"> <img alt="Brand" src="..."> </a>
    <p class="navbar-text">Some text</p>
    <a href="#" class="navbar-link">A link</a>
    <button type="button" class="btn btn-default navbar-btn">Logout</button>
</nav>

Labels

不用 type 決定不同顏面

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

Badges

<span class="badge">42</span>

List group

<ul class="list-group">
  <li class="list-group-item">item 1</li>
  <li class="list-group-item active">item 2</li>
  <li class="list-group-item disabled">item 3</li>
  <a href="#" class="list-group-item">My Link</a>
</ul>

不同色

- list-group-item-success
- list-group-item-info
- list-group-item-warning
- list-group-item-danger

Panel

<div class="panel panel-default">
  <div class="panel-heading">Panel with heading</div>
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

不用色

<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

放 table 或 list 入去

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
 
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
  </ul>
 
</div>

Text

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

Jumbotron

# A lightweight, flexible component, "rounded corners"

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#">Learn more</a></p>
</div>

Page header (appropriately space out and segment sections of content on a page)

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

form-group

All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%;

ie.

<form>
  <div class="form-group">
    <label for="InputEmail">Email address</label>
    <input type="email" class="form-control" id="InputEmail" placeholder="Enter email">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

* Inline form

# reset that to width: auto; <= 3 element 都在同一行

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

* Inputs type

text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color

# Textarea

<textarea class="form-control" rows="3"></textarea>

# Inline checkboxes and radios

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

# Selects

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

* multiple

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

# Static control

  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">[email protected]</p>
    </div>
  </div>

# color

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1">
</div>

# ICON

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
</div>

other:

- <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
- <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>

has-warning
has-error

# Sizing

* Height

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

* Column

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

form-inline

# 在同一行有多個 element, 比如以下有"label, p, label, input button" 在同一行

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">[email protected]</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

# Horizontal form

一行兩個, 一左一右 "label input"

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
</form>

View

# To ensure proper rendering and touch zooming

<meta name="viewport" content="width=device-width, initial-scale=1">

# disable zooming capabilities ( feeling a bit more like a native application )

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Devices size

Extra small devices < 768px (.col-xs-)
Small devices < 992px (.col-sm-) [~62px]
Medium devices < 1200px (.col-md-) [~81px]
Large devices > 1200px (.col-lg-) [~97px]

Grid system

* up to 12 columns as the device or viewport size
* If more than 12 columns, each group of extra columns will, as one unit, wrap onto a new line.
* Rows must be placed within a .container

Stacked-to-horizontal

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

Column sizing (細 device 用 col-xs-)

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

Usage:

# 不同 device 用不同排法

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

Offsetting columns

view: "4" "x" "4"

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>

# Responsive design

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
</head>

Tables

# add the base class .table to any <table>

<table class="table">
  ...
</table>

# Striped rows (zebra-striping)

<table class="table table-striped">
  ...
</table>

# Bordered table

<table class="table table-bordered">
  ...
</table>

# Hover rows

<table class="table table-hover">
  ...
</table>

# Condensed table (compact by cutting cell padding in half)

<table class="table table-condensed">
  ...
</table>

# color table rows / Cell

<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

# Responsive tables (make them scroll horizontally on small devices (under 768px))

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

JS Plugin

Check version

$.fn.tooltip.Constructor.VERSION

Data attributes

Use all Bootstrap plugins purely through the markup API without writing a single line of JavaScript. <-- 所以, 那些 plugin 可以由 markup 或 js 發動

# turn all off

$(document).off('.data-api')

# a specific plugin off

$(document).off('.alert.data-api')

modal.js

flexible, dialog prompts - Toggle a modal via JavaScript by clicking the button below

i.e.

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

i.e.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

tooltip.js

For performance reasons, the Tooltip and Popover data-apis are opt-in (meaning you must initialize them yourself)

$('[data-toggle="tooltip"]').tooltip()

Markup Usage

<button type="button" class="btn btn-default" data-toggle="tooltip" placement="top" title="Tooltip on top">
    Tooltip on top
</button>

options

- title (default: "")

- placement (default: top)

$('[data-toggle="tooltip"]').tooltip({'placement': 'bottom'}); // json pass option

JS Usage

# activate your tooltips using jQuery selectors

$('Example').tooltip(options)

HTML

<a href="#" data-toggle="tooltip">Hover over me</a>

$('[data-toggle="tooltip"]').tooltip({title:"Some tooltip text!"})

popover.js

* Popovers require the tooltip plugin to be included in your version of Bootstrap.

<button type="button" class="btn btn-lg btn-danger"
    data-toggle="popover" title="Popover title"
    data-content="content information">
Click to toggle popover</button>

- placement 'right'
- trigger       'click'
- content      ''
- title           ''

Usage

$('#example').popover(options)

# Auto close

$('[data-toggle="popover"]').popover().click(function () {
    setTimeout(function () {
        $('[data-toggle="popover"]').popover('hide');
    }, 2000);
});

collapse.js

link 及 button 都會 call 同一個 collapse (collapseExample)

# Via data attributes

<!-- btn -->
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample">
  Link with href
</a>

<!-- link -->
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample">
  Button with data-target
</button>

# 內容

<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

# Via JavaScript

$('.collapse').collapse()

Methods:

.collapse({toggle: false})
.collapse('toggle')
.collapse('show')
.collapse('hide')

Events:

shown.bs.collapse
hidden.bs.collapse

i.e.

$('#myCollapsible').on('hidden.bs.collapse', function () {
  // do something…
})

Accordion menu example

<!-- 在同一個"panel-group"內, 只有一個 panel  會被打開 -->
<div class="panel-group" id="accordion">

  <!-- 第一組 -->
    <div class="panel panel-default">
        <div class="panel-heading">
            <!-- 如果唔加 "panel-title", 那 header 會變成 link-->
            <h4 class="panel-title">
                <!-- 用 "data-parent" 及 "href" 指出它的仔女 -->
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"  >
                    Collapsible Group Item #1
                </a>
            </h4>
        </div>
        <!-- "in" 才表打開它 -->
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
            ....
            </div>
        </div>
    </div>
  <!-- 第一組 -->

  <!-- 第二組 -->
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" >
                    Collapsible Group Item #2
                </a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
            ....
            </div>
        </div>
    </div>
  <!-- 第二組 -->
</div>

Table CSS

Bordered table (有框)

.table-bordered

Striped rows (隔行 highlight)

.table-striped

Hover rows (mouse 經過時轉色)

.table-hover

Condensed table (make tables more compact by cutting cell padding in half)

.table-condensed

Contextual classes (row 的顏色)

.active(深灰)
.success(綠)
.info (藍)
.warning (粉)
.danger

Example:

<table id="grid-basic" class="table table-condensed table-hover table-striped">
    <thead>
        <tr>
        <th data-column-id="id" data-type="numeric">ID</th>
        <th data-column-id="sender">Sender</th>
        <th data-column-id="received" data-order="desc">Received</th>
        </tr>
    </thead>
    <tbody>
        <tr>
        <td>1</td>
        <td>[email protected]</td>
        <td>2015-01-21</td>
        </tr>
        ...
    </tbody>
</table>

Doc

http://getbootstrap.com/

瀏覽次數： 901

夢想家