Bootstrap / 前端UI框架 · 2022-03-09

《CSS Frame》 Bootstrap

Twitter出品，以 HTML、CSS 和 JavaScript組成的前端框架。
[ Bootstrap官網 ] ⇢ https://getbootstrap.com/

– 主要模組 –

Layout

  • Breakpoints
  • Containers
  • Grid
  • Columns
  • Gutters
  • Utilities
  • Z-index
  • CSS Grid

Content

  • Reboot
  • Typography
  • Images
  • Tables
  • Figures

Forms

  • Overview
  • Form controls
  • Select
  • Checks and radios
  • Range
  • Input group
  • Floating labels
  • Layout
  • Validation

Components

  • Accordion
  • Alerts
  • Badge
  • Breadcrumb
  • Buttons
  • Button group
  • Card
  • Carousel
  • Close button
  • Collapse
  • Dropdowns
  • List group
  • Modal
  • Navs & tabs
  • Navbar
  • Offcanvas
  • Pagination
  • Placeholders
  • Popovers
  • Progress
  • Scrollspy
  • Spinners
  • Toasts
  • Tooltips

Bootstrap

☞ 下載

[ Bootstrap 下載 ] ⇢ https://getbootstrap.com/docs/5.1/getting-started/download/
[ Bootstrap 教學 ] ⇢ https://getbootstrap.com/docs/5.1/getting-started/introduction/

☞ 使用

快速安裝Bootstrap

<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- Bootstrap CSS <head>加入</head> -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<!-- Js <body>加在底部</body>-->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Bootstrap Icons

☞ 下載

[ Bootstrap Icon 下載 ] ⇢ https://github.com/twbs/icons
[ Bootstrap Icon 目錄 ] ⇢ https://icons.getbootstrap.com/

☞ 使用

<i class="bi bi-house"></i>

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house" viewBox="0 0 16 16">
  <path fill-rule="evenodd" d="M2 13.5V7h1v6.5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5V7h1v6.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5zm11-11V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/>
  <path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z"/>
</svg>

Bootstrap-select

☞ 下載

[ Bootstrap-select 下載 ] ⇢ https://developer.snapappointments.com/bootstrap-select/

☞ 使用

使用Bootstrap套件下，新增Bootstrap-select樣式。

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>

<!-- (Optional) Latest compiled and minified JavaScript translation files -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/i18n/defaults-*.min.js"></script>

範例

//Javascript
$('.my-select').selectpicker();
//or
$('select').selectpicker();
//or
$(function () {
    $('select').selectpicker();
});
<select class="selectpicker">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Barbecue</option>
</select>

Bootstrap datepicker 

☞ 下載

[ Bootstrap datepicker  下載 ] ⇢ https://uxsolutions.github.io/bootstrap-datepicker
[ Bootstrap datepicker  安裝 ] ⇢ $ lessc build/build_standalone.less datepicker.css

☞ 使用

使用Bootstrap套件下，新增bootstrap-datepicker樣式。

<!-- <head> 加入 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker3.min.css">

範例

基本

//Javascript
$('.datepicker').datepicker()
<!--input-->
<input type="text" class="form-control">
<input type="date" class="form-control" id="date" name="date">

自訂

//Javascript
$('.datepicker').datepicker({
    format: 'mm/dd/yyyy',
    startDate: '-3d'
});

//Javascript預設值
$.fn.datepicker.defaults.format = "mm/dd/yyyy";
$('.datepicker').datepicker({
    startDate: '-3d'
});
<!--input-->
<input class="datepicker" data-date-format="mm/dd/yyyy">
Share

You may also like...