[BS] 簡化網頁開發、兼容不同裝置

過去我們開發網頁總是自己設計按鈕、表格、排版大小等等，但是現在 Twitter Bootstrap 都幫我們做好了！

Twitter Bootstrap 是一個功能較完整的 Framework，有 Javascript 一些功能的函式庫，樣式方面則是提供版面配置 Layout、CSS Grid、Responsive Web Design 等等的配置模式，並且已經定義好按鈕 button、輸入框 input 及一堆 icon，提供給開發者免費使用，加快開發。

教學 外掛 問題解決

載點

☞ Bootstrap | a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.

教學

☞ 官網 - CSS
☞ 官網 - Components
☞ W3Schools.com
☞ runoob.com
☞ Mobile First With Bootstrap 3
☞ Social Buttons for Bootstrap
☞ Bootstrap Glyphicon Components

Bootstrap 的10 個錯誤用法

☞ http://jimmysu.logdown.com/posts/254007-do-not-use-bootstrap-like-this

Bootstrap 4 在不同裝置隱藏元件的用法

☞ Bootstrap 4 Hide Element Based On Screen Size

the structure of Bootstrap

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── bootstrap-theme.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

ionicons

☞ ionicons

Font Awesome

☞ 是一套完美的圖標字體，主要目的是和 Bootstrap 搭配使用。
☞ Font Awesome
☞ Font Awesome 中文網站 ☞ Themify.me

☞ Ajax based file uploads using FileInput plugin
☞ Krajee Bootstrap File Input, catching AJAX success response
☞ bootstrap fileinput, show uploaded files and delete them
☞ Custom length selection menu doesn't work in DataTable
☞ how to make image fit the div exactly as the mobile screen??
☞ Responsive Web Layouts for Mobile Screens: Intro, Tips and Examples

<div style="width:auto;height:auto;max-height:100%;max-width:100%;max-device-width:100%;max-device-height:100%">
</div>

01／Tooltip 提示工具

☞ Tooltips
☞ 讓 tooltip 斷行
☞ 更改 tooltip 的寬度
☞ Bootstrap JS Tooltip
☞ Change bootstrap tooltip color
☞ JqueryUI - Tooltip

02／Tabs 分頁

☞ Responsive: tabs to accordion
☞ Make Bootstrap 3 Tabs Responsive
☞ 如何利用Bootstrap的標籤（Tabs）和導覽列（Navigation Bar）

03／Dropdown Menu 下拉式選單

☞ Twitter Bootstrap 3 Navbar with Dropdown Menu and Search Form

04／Breadcrumbs 導覽列

☞ Breadcrumb Navigation with CSS Triangles (有範例檔)
☞ Triangle Breadcrumbs Arrows (有範例檔)
☞ How to make breadcrumbs responsive? (有範例檔)
☞ CSSPure CSS3 Breadcrumbs Navigation (有範例檔)
☞ How to Add and Customize Twitter Bootstrap3 Breadcrumbs
☞ Bootstrap Breadcrumbs Designer
☞ Creating A Flat Style Breadcrumb With Pure CSS3 (網頁飄雪)(有範例檔)
☞ How To Create Flat Style Breadcrumb Links with CSS (有範例檔)
☞ LiveDemo: Twitter Bootstrap : Breadcrumbs Variations (有範例檔)
☞ Twitter Bootstrap breadcrumbs tutorial (有範例檔)

05／Data Table 表格資料

☞ Tables
☞ jQuery 套件 DataTables 的測試 (dataTable 參數使用教學)
☞ jQuery Data Table
☞ jQuery Plugin For Bootstrap Based Data Table
☞ DataTables' Bootstrap integration
☞ DataTables and Bootstrap 3
☞ The examples of bootstrap table
☞ Custom length selection menu doesn't work in DataTable (改變datatable每頁顯示格式)
☞ Is there a way to disable initial sorting for jquery DataTables? (預設資料不排序)
☞ Default ordering (sorting)(排序)
☞ scroll - vertical (凍結頂端列)
☞ Bootstrap Table with edit delete row example code (刪除某一列)
☞ Dynamic Table row creation and Deletion (動態多一列)

06／Select 下拉選單

☞ Button Dropdown Select
☞ Select + tooltip
☞ Playing with Bootstrap Select
☞ Bootstrap-select 範例
☞ Select2
☞ Select2 範例 (從 GitHub 下載 Select2)
☞ [問題解決] AJax does not work with bootstrap-select

07／Form 表單

☞ Bootstrap select dropdown list placeholder
☞ Animated radios & checkboxes (noJS)
☞ Bootstrap radio buttons and checkboxes in columns, with contextual text fields
☞ Bootstrap Contact Forms: 2 Free Responsive Templates
☞ Sky Forms
☞ jQuery Bootstrap Validator Basic Demo
☞ Bootsnipp
☞ 27 Free CSS HTML Login Form Templates
☞ Simple Form and Bootstrap sample application
☞ 30 Progressive jQuery Plugins For Building Web Forms
☞ Login Templates
☞ PHP Login Form with Sessions

08／Froala WYSIWYG Editor 所見即所得

☞ 上傳圖片(PHP)
☞ 上傳圖片(所有方法)
☞ 輕量級jQuery文本編輯器插件Froala WYSIWYG Editor (中文化用法)
☞ A beautiful WYSIWYG HTML text editor (官網)
☞ jQuery Plugins Tagged ‘WYSIWYG’
☞ Redactor - WYSIWYG Editor on jQuery
☞ romanesque.me (韓國)
☞ Froala WYSIWYG Editor (*可用範例包)
☞ 一些給網站使用的 WYSIWYG 的編輯器

09／Admin Template 管理者模板

☞ AdminLTE Dasboard and Control Panel Template
☞ SugarRush - Bootstrap 3 Responsive Admin Template
☞ Nice Admin Bootstrap Template
☞ Limitless

10／File input 檔案上傳

☞ Ajax based file uploads using FileInput plugin (參數傳遞)
☞ 【線上範例】Bootstrap FileStyle
☞ 【線上範例】jQuery File Upload Demo
☞ 【線上範例】Creating Multi-files Uploader with blueimp jQuery Plugin & PHP
☞ 【線上範例】Mini AJAX File Upload Form
☞ 【線上範例】Advanced Usage Demo
☞ 【線上範例】Bootstrap File Input Demo
☞ 【線上範例】基於Bootstrap 3可預覽的HTML5文件上傳插件
☞ Krajee Bootstrap File Input, catching AJAX success response
☞ Options文件
☞ Bootstrap文件上傳插件File Input的使用
☞ bootstrap-fileinput簡單完整列子 (*完整參數介紹)

11／BootstrapValidator 表單驗證工具

☞ 基於bootstrap3最好的jquery表單驗證插件BootstrapValidator
☞ BootstrapValidator (範例下載)
☞ form validation Examples
☞ Powerful Form Validation Plugin For jQuery and Bootstrap 3 (範例下載)
☞ FormValidation教學
☞ 針對核取框檢查
☞ 針對下拉選單檢查

12／themes 免費主題

☞ Free themes for Bootstrap

13／date & time picker 日期時間選擇器

☞ Datepicker for Bootstrap demo (簡單)
☞ the date picker (教你改變格式)
☞ pickadate.js (下載檔案)
☞ Native HTML5 datepicker demo
☞ Bootstrap 3 Datepicker v4 Docs
☞ Bootstrap form component to handle date and time data
☞ Pickadate Example
☞ pickadate.js example
☞ 在pickadate.js中check out date (onSet)(選擇日期後有其他事件)
☞ Playing with Bootstrap Datepicker
☞ The jQuery UI Month Picker Plugin Version 3.0-beta2 (jQuery的插件monthpicker實現年，月選擇功能)

14／Back to Top Button 返回文件頂端

☞ Bootstrap Float to Top Button

15／bootpag 動態分頁

☞ Hello, this is bootpag - dynamic pagination jQuery plugin.
☞ bootstrap 分頁插件用 jquery

16／Button 按鈕

☞ Support glyph and fa icon inside input
☞ Input group
☞ Bootstrap Button Generator

17／Password masking 密碼遮罩

☞ Password masking in password field using jquery
☞ Password masking in jQuery
☞ Better Password Inputs, iPhone Style

18／Excel Export 匯出Excel

☞ Export Bootstrap Data table all rows to excel

19／SweetAlert

☞ How to Add Ajax Call with sweet alert
☞ SweetAlert for Bootstrap (中文化)
☞ SweetAlert for Bootstrap
☞ A BEAUTIFUL REPLACEMENT FOR JAVASCRIPT'S "ALERT"

20／Simple Please Wait Dialog

☞ "Waiting for..." modal dialog with progress bar
☞ Creating Simple Please Wait Dialog with Twitter Bootstrap
☞ Create Simple Please Wait Dialog with Twitter Bootstrap 3

21／Dialog 對話框

☞ Position fixed close button of Bootstrap modal styling is not displaying properly at internet explorer
☞ Make use of Bootstrap's modal more monkey-friendly.
☞ [w3c] Bootstrap JS Modal

22／TreeView 樹狀選單

☞ Free jQuery tree view Plugins
☞ BootStrap TreeView

23／switch 開關

☞ Bootstrap switch

24／Form Process Steps 處理步驟

☞ Responsive Checkout Progress Bar
☞ Bootstrap Form Process Steps
☞ See how beautiful jQuery Steps is and what you can do with it!

---

Source

☞ Simple Process Steps
☞ 樂在設計：TWITTER BOOTSTRAP 框架簡化網頁開發、兼容不同裝置，讓網頁工程師兼設計師!
☞ iT邦幫忙：實用網頁工具庫：bootstrap
☞ A dead simple, responsive boilerplate.

Image Source

☞ 30 of Our Best Bootstrap Themes
☞ Create a bootstrap resopnsive website