Coursera – Front-End Web UI Frameworks and Tools – Introduction to Bootstrap

將以下程式碼貼在<head>標籤的下一行,可以達到RWD(Responsive Web Design)的效果

<br /><br /><br /><!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

將以下程式碼貼在<head>的<title>標籤的下一行,可以引用專案內包含的BootstrapCSS檔

<!-- Bootstrap -->

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!-- [if lt IE 9]>
<a href="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js">https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js</a>
<a href="https://oss.maxcdn.com/respond/1.4.2/respond.min.js">https://oss.maxcdn.com/respond/1.4.2/respond.min.js</a>
<![endif]-->

將以下程式碼貼在</body>的前一行,可以引用專案內包含的jQuery和Bootstrap JavaScript lib。

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<a href="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js</a>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<a href="http://js/bootstrap.min.js">http://js/bootstrap.min.js</a>

也可以改用以下程式碼,引用網路上的Bootstrap CSS/JS檔

<a href="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js</a>
<a href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js</a>

三種Bootstrap class

  1. container
  2. row
  3. jumbotron
廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s