摘要:簡單的Bootstrap效果(v 3.0.0 / v 3.2.0版)與入門教學 (#2 範例修正與下載) -- 響應式網頁 / 自適應網頁(Responsive Web)設計
因為VS 2013搭配 Bootstrap v3.0.0版，有些CSS的名稱略有修改。
原廠文件有提供一份列表說明，非常清楚。
建議您完成上一篇文章的教學，再來看下去。
因為VS 2013搭配 Bootstrap v3.0.0版，有些CSS的名稱略有修改。
原廠文件有提供一份列表說明，非常清楚。
我把上一篇文章的範例（for 2.3.2版）
轉成 Bootstrap 3.0.0版時需要更動的重點，用黃底色來註明。
資料來源：http://getbootstrap.com/getting-started/#migration
=================================================================================
Reference table for classes that have changed between v2.x and v3.0.
| Bootstrap 2.x | Bootstrap 3.0 |
|---|---|
.container-fluid |
.container |
.row-fluid |
.row |
.span* |
.col-md-* |
.offset* |
.col-md-offset-* |
.brand |
.navbar-brand |
.nav-collapse |
.navbar-collapse |
.nav-toggle |
.navbar-toggle |
.btn-navbar |
.navbar-btn |
.hero-unit |
.jumbotron |
.icon-* |
.glyphicon .glyphicon-* |
.btn |
.btn .btn-default |
.btn-mini |
.btn-xs |
.btn-small |
.btn-sm |
.btn-large |
.btn-lg |
.visible-phone |
.visible-sm |
.visible-tablet |
.visible-md |
.visible-desktop |
.visible-lg |
.hidden-phone |
.hidden-sm |
.hidden-tablet |
.hidden-md |
.hidden-desktop |
.hidden-lg |
.input-small |
.input-sm |
.input-large |
.input-lg |
.checkbox.inline .radio.inline |
.checkbox-inline .radio-inline |
.input-prepend .input-append |
.input-group |
.add-on |
.input-group-addon |
.thumbnail |
.img-thumbnail |
ul.unstyled |
.list-unstyled |
ul.inline |
.list-inline |
What's new
We've added a few new elements and changed some existing ones. Here's their new or updated classes.
| Element | Description |
|---|---|
| Panels |
.panel .panel-default .panel-body .panel-title .panel-heading.panel-footer .panel-collapse |
| List groups |
.list-group .list-group-item .list-group-item-text .list-group-item-heading |
| Glyphicons |
.glyphicon |
| Jumbotron |
.jumbotron |
| Tiny grid (<768 px) |
.col-xs-* |
| Small grid (>768 px) |
.col-sm-* |
| Medium grid (>992 px) |
.col-md-* |
| Large grid (>1200 px) |
.col-lg-* |
| Offsets |
.col-sm-offset-* .col-md-offset-* .col-lg-offset-* |
| Push |
.col-sm-push-* .col-md-push-* .col-lg-push-* |
| Pull |
.col-sm-pull-* .col-md-pull-* .col-lg-pull-* |
| Input groups |
.input-group .input-group-addon .input-group-btn |
| Form controls |
.form-control .form-group |
| Button group sizes |
.btn-group-xs .btn-group-sm .btn-group-lg |
| Navbar text |
.navbar-text |
| Navbar header |
.navbar-header |
| Justified tabs / pills |
.nav-justified |
| Responsive images |
.img-responsive |
| Contextual table rows |
.success .danger .warning .active |
| Contextual panels |
.panel-success .panel-danger .panel-warning .panel-info |
| Modal |
.modal-dialog .modal-content |
| Thumbnail image |
.img-thumbnail |
| Well sizes |
.well-sm .well-lg |
| Alert links |
.alert-link |
What's removed
The following elements have been dropped or changed in v3.
| Element | Removed from 2.x | 3.0 Equivalent |
|---|---|---|
| Form actions |
.form-actions |
N/A |
| Search form |
.form-search |
N/A |
| Fluid container |
.container-fluid |
.container (no more fixed grid) |
| Fluid row |
.row-fluid |
.row (no more fixed grid) |
| Navbar inner |
.navbar-inner |
N/A |
| Dropdown submenu |
.dropdown-submenu |
N/A |
| Tab alignments |
.tabs-left .tabs-right .tabs-below |
N/A |
Additional notes
We've made many underlying changes in v3 that are not immediately apparent. Base classes, key styles, and behaviors have been adjusted for flexibility and our mobile first approach.
-
Text-based form controls are now 100% wide. Wrap inputs inside
<div class="col-*"></div>to control input widths. -
.badgeno longer has contextual (-success,-primary,etc..) classes. -
.btnmust also use.btn-defaultto get the "default" button. -
.containerand.roware now fluid (percentage-based). -
Images are no longer responsive by default. Use
.img-responsivefor fluid<img>size. -
The icons, now
.glyphicon, are now font based. They also require a base and icon class (e.g..glyphicon .glyphicon-asterisk). - Typeahead has been dropped, in favor of using Twitter Typeahead.
-
Modal markup has changed significantly. The
.modal-header,.modal-body, and.modal-footersections now get wrapped in.modal-contentand.modal-dialogfor improved mobile styling and behavior. -
JavaScript events are namespaced. For example, to handle the modal "show" event, use
'show.bs.modal'. For tabs "shown" use'shown.bs.tab', etc..
=================================================================================
我是一個沒有學過 CSS與 jQuery的人
只接觸過簡單的 HTML標籤與網頁、有寫過簡單的 JavaScript
（基礎接近於零）
但我把文章看過一次，把範例放到 ASP.NET裡面看看成果，就知道該怎麼下手了
（不要在「看」了！要動手做~）
範例下載 for Bootstrap 3.0.0
Book_Samples_BootStrap 3.0.0.rar
WebSite2013_Bootstrap 3.2.0.rar
請參閱 http://getbootstrap.com/examples/theme/
我之前參閱了這本書，吸收得比較順暢 -- [好書推薦]簡體中文 -- Implementing Responsive Design（響應式Web設計實踐）
知識，因為 分享 而偉大
更多說明與範例，請參閱 正體中文版 Bootstrap (v2.3.2)網站 (http://kkbruce.tw/)
相關文章：
下一篇文章：幫您的VS 2012 /2013安裝智慧手機模擬器(iOS / Android)，來瀏覽畫面
我將思想傳授他人， 他人之所得，亦無損於我之所有；
猶如一人以我的燭火點燭，光亮與他同在，我卻不因此身處黑暗。----Thomas Jefferson
線上課程教學，遠距教學 (Web Form 約 51hr) https://dotblogs.com.tw/mis2000lab/2016/02/01/aspnet_online_learning_distance_education_VS2015
線上課程教學，遠距教學 (ASP.NET MVC 約 140hr) https://dotblogs.com.tw/mis2000lab/2018/08/14/ASPnet_MVC_Online_Learning_MIS2000Lab
寫信給我，不要私訊 -- mis2000lab (at) yahoo.com.tw 或 school (at) mis2000lab.net
(1) 第一天 ASP.NET MVC5 完整影片（5.5小時 / .NET 4.x版）免費試聽。影片 https://youtu.be/9spaHik87-A
(2) 第一天 ASP.NET Core MVC 完整影片（3小時 / .NET Core 6.0~8.0）免費試聽。影片 https://youtu.be/TSmwpT-Bx4I
[學員感言] mis2000lab課程評價 - ASP.NET MVC , WebForm 。 https://mis2000lab.medium.com/%E5%AD%B8%E5%93%A1%E6%84%9F%E8%A8%80-mis2000lab%E8%AA%B2%E7%A8%8B%E8%A9%95%E5%83%B9-asp-net-mvc-webform-77903ce9680b
ASP.NET遠距教學、線上課程（Web Form + MVC）。 第一天課程， "完整" 試聽。
......... facebook社團 https://www.facebook.com/mis2000lab ......................
......... YouTube (ASP.NET) 線上教學影片 https://www.youtube.com/channel/UC6IPPf6tvsNG8zX3u1LddvA/
Blog文章 "附的範例" 無法下載，請看 https://dotblogs.com.tw/mis2000lab/2016/03/14/2008_2015_mis2000lab_sample_download
請看我們的「售後服務」範圍（嚴格認定）。
......................................................................................................................................................
ASP.NET MVC => .NET Core MVC 線上教學 ...... 第一天課程 完整內容 "免費"讓您評估 / 試聽
[遠距教學、教學影片] ASP.NET (Web Form) 課程 上線了！MIS2000Lab.主講 事先錄好的影片，並非上課側錄！ 觀看時，有如「一對一」面對面講課。
