rita teaching bootstrap · sublime 利用sublime撰寫bootstrap 1、安裝sublime text3...

Bootstra p

RITA TEACHING

網頁設計

ENTER

講師：田甜甜Email: [email protected]://jumpdesign.tw

RitaTeaching

bootstrap - 2

Bootstrap \About Bootstrap

什麼是 Bootstrap

Bootstrap 是目前最流行的前端開發框架，由 twitter 的二位前員工Mark Otto 和 Jacob Thornton創建。其內建許多漂亮的樣式。Bootstrap 提供了大量的插件，代碼淺顯意懂，容易修改，以最寬鬆的MIT 協議，讓大家可以用在各種商業環境中。另一項優勢是有很多圍繞著 Bootstrap 開發的優秀插件，最有名的就是 Font Awesome 是一套 icon 字體。

其主要特性：1、一套完整的基礎 CSS 插件2、預定義樣式表3、一組 jQuery 的 JS 插件4、靈活的響應式 (Responsive) 欄格系統，並且以移動先行為主要思想。

下載 Bootstrap ：http://getbootstrap.com/

RitaTeaching

bootstrap - 3

Bootstrap \

Download Bootstrap下載的內容為編譯後可以直接使用的文件，皆為未壓縮的 bootstrap.css，一種是壓縮過的bootstrap.min.css，一般正式運行的時候會使用壓縮過的min 檔案，節省網站流量。

Download source下載用於編譯 CSS 的 Less 程式碼，以及各種插件的 js 程式碼，Less 能在 CSS 中使用變數，可減少撰寫 CSS 的時間，增加工作效率。語言名稱：LESS官方網站：http://www.lesscss.org/ ( 簡體中文 : http://www.lesscss.net/ )

Download sass下載用於編譯 CSS 的 Sass 程式碼，以及各種插件的 js 程式碼，Sass 是一種撰寫 CSS 樣式表的一種程式語言，較原生 CSS 來得更簡單易讀，在 css3 之後再延伸出來的一種縮排語法，寫法近似css。語言名稱：SASS官方網站：http://sass-lang.com/

前端開發框架

什麼是 Bootstrap

RitaTeaching

bootstrap - 04

Bootstrap \檔案結構和內容

HTML 標準模板

Bootstrap 提供了基本 HTML 原始碼，方便大家在此基礎上進行自己的擴建。

<!DOCTYPE html><html> <head> <title>Bootstrap 101 Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h1>Hello, world!</h1> <script src="http://code.jquery.com/jquery.js"></script> </body></html>

加入必要的 CSS（bootstrap.min.css）與 JS（bootstrap.min.js）檔案：

<!DOCTYPE html><html> <head> <title>Bootstrap 101 Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> </head> <body> <h1>Hello, world!</h1> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> </script> <script src="js/bootstrap.min.js"></script> </body></html>

// 加入這兩個檔案，你就可以開始用 Bootstrap 開發任何網站應用程式。

RitaTeaching

bootstrap - 05

Bootstrap \Sublime

利用 sublime 撰寫 Bootstrap

1、安裝 Sublime Text32、安裝 Sublime Text 管理工具：Package Control (tools/command palette)3、安裝 sublime 外掛 Bootstrap 3 Snippets

「html5-template」- bs html5 建立 Bootstrap標準模版

RitaTeaching

bootstrap - 06


Subline bootstrap 標準模板

subline bs3-html5-template 提供了 bs HTML 標準模版原始碼，方便大家在此基礎上進行自己的擴建。#bshtml

<!DOCTYPE html><html lang=""> <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>Title Page</title>

 < l ink re l="s ty lesheet" href="ht tps ://maxcdn.boots t rapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

   </head> <body> <h1 class="text-center">Hello World</h1>

 <script src="//code.jquery.com/jquery.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>  <script src="Hello World"></script> </body></html>

RitaTeaching

bootstrap - 07


Subline bootstrap 標準模板註解

<meta http-equiv="X-UA-Compatible" content="IE=edge">

註：HTML5 Shim 和 Respond.js IE8 對 HTML5 元素和媒體查詢的支緩

註：警告：如果您通過 file：// 查看頁面，Respond.js 不起作用



<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>註：JavaScript 載入並避免意外或惡意的修改作業。防止被 XSS 攻擊，透過新的「Subresource Integrity」規格，網站則可納入 JavaScript 並在其遭到修改時隨即停止。

RitaTeaching

bootstrap - 08

Bootstrap \Bootstrap CSS 套件Bootstrap 官網提供製作好的套件，可供大家直接套用。點選上方選單，選擇 CSS > 右側選單，選擇套件分類。

Bootstrap JS 套件Bootstrap 官網提供製作好的套件，可供大家直接套用。點選上方選單，選擇 JS > 右側選單，選擇套件分類。

RitaTeaching

bootstrap - 09

Bootstrap \Bootstrap CSS 套件

套用 CSS 套件：Button

直接拷貝網站中的語法即可直接成功套用

RitaTeaching

bootstrap - 10

Bootstrap \Bootstrap JS 套件

套用 JS 套件：Tab

直接拷貝網站中的語法即可直接成功套用

RitaTeaching

bootstrap - 11

Bootstrap \Bootstrap 格線系統

欄格系統代號：col-

裝置螢幕尺寸代號

class設定的代號寫法為：col- ( 為 column 之縮寫 )

bootstrap 預設有 4種螢幕尺寸，以適應各種裝置。1、xs ：超小尺寸代號，寬度 767px 以下2、sm ：小型尺寸代號，寬度 768px 以上3、md：中型尺寸代號，寬度 992px 以上4、lg ：大型尺寸代號，寬度 1200px 以上class 設定的代號寫法為：col-xs- ( 為欄格系統 - 超小尺寸 - )

官方網站：http://getbootstrap.com/css/

欄格系統

RitaTeaching

bootstrap - 12

Bootstrap \Bootstrap 格線系統

欄格系統

bootstrap 預設一列有 12 個欄格，以百分比的方式設定每個欄格 (100%/12=8.33333333%)，感應螢幕尺寸自動縮放欄格以適應各種裝置。class 設定的代號寫法為：col-xs-12 ( 為欄格系統 - 超小尺寸 - 12 欄格 )

例如一列二欄式的 class 設定：第一欄：class=”col-xs-12 col-sm-6 col-md-4 col-lg-3” /* xs-12 ：於 xs 螢幕時，使用 12 欄格 col-sm-6 ：於 sm螢幕時，使用 6欄格 col-md-4 ：於 md螢幕時，使用 4欄格 col-lg-3 ：於 lg 螢幕時，使用 3欄格 */

第二欄：class=”col-xs-12 col-sm-6 col-md-8 col-lg-9” /* col-xs-12 ：於 xs 螢幕時，使用 12 欄格 col-sm-6 ：於 sm螢幕時，使用 6欄格 col-md-8 ：於 md螢幕時，使用 8欄格 col-lg-9 ：於 lg 螢幕時，使用 9欄格 */

* 二個欄在不同螢幕尺寸中的相加，以 12 欄為主。

*col- 每個尺寸均預設：padding-left : 15px ; padding-right : 15px ;

*bootstrap 預設所有元素為 box-sizing: border-box;　　　　　　　　　　　　　/* 內距和邊框將不會增加元素本身的寬度 */* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}*:before,*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

col - 代號 - 欄寬

RitaTeaching

bootstrap - 13

Bootstrap \

Bootstrap 版面配置

類別：.container 容器 : 版面置中

類別：.row 列 : 移除間距

.container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px;}.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { float:left;}

.row { margin-right: -15px; margin-left: -15px;}

為了讓 .container 左右邊不要有內距空白，可使用 .row 讓左右版面的間距 -15px，來扺消左右間距的空白。

Bootstrap 格線系統

欄格系統

RitaTeaching

bootstrap - 14

Bootstrap \Bootstrap 版面配置

類別：.container-fluid 容器 : 版面滿版

.container-fluid{ padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;}.container > .navbar-header,.container-fluid > .navbar-header,.container > .navbar-collapse,.container-fluid>.navbar-collapse { margin-right: -15px; margin-left: -15px;}@media (min-width: 768px) {.container > .navbar-header, .container-fluid>.navbar-header, .container > .navbar-collapse, .container-fluid>.navbar-collapse { margin-right: 0; margin-left: 0; }}@media (min-width: 768px) {.navbar > .container .navbar-brand, .navbar > .container-fluid .navbar-brand { margin-left: -15px; }}.container .jumbotron,.container-fluid.jumbotron { border-radius: 6px;}.clearfix:before,.clearfix:after,.dl-horizontal dd:before,.dl-horizontal dd:after,.container:before,.container:after,.container-fluid:before,.container-fluid:after,.row:before,.row:after,.form-horizontal .form-group:before,.form-horizontal .form-group:after,.btn-toolbar:before,.btn-toolbar:after,.btn-group-vertical > .btn-group:before,.btn-group-vert ical > .btn-group:after, .nav:before,.nav:after, .navbar:before,.navbar:after,.navbar-header:before,.navbar-header:after,.navbar-collapse:before,.navbar-collapse:after,.pager:before,.pager:after,.panel-body:before,.panel-body:after,.modal-footer:before,.modal-footer:after { display: table; content: " ";}.clearfix:after,.dl-horizontal dd:after,.container:after,.container-fluid:after,.row:after,.form-horizontal .form-group:after,.btn-toolbar:after,.btn-group-vertical > .btn-group:after,.nav:after,.navbar:after,.navbar-header:after,.navbar-collapse:after,.pager:after,.panel-body:after,.modal-footer:after { clear: both;}

RitaTeaching

bootstrap - 15

Bootstrap \

添加響應式圖片：.img-responsive,.thumbnail > img,.thumbnail a > img,.carousel-inner > .item > img,.carousel-inner > .item > a > img { display: block; max-width: 100%; height: auto;}

添加圓角圖片：.img-rounded { border-radius: 6px;}

添加圓型圖片：.img-circle { border-radius: 50%;}

添加縮圖：.img-thumbnail { display: inline-block; max-width: 100%; height: auto; padding: 4px; line-height: 1.42857143; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out;}

Bootstrap 圖片設定

img-responsive

rita teaching bootstrap · sublime 利用sublime撰寫bootstrap 1、安裝sublime text3...

Documents