Useful Components
BS07. Adding thumbnail
在bootstrap中，連圖片的樣貌都有預定的格式可以使用。http://www.w3schools.com/bootstrap/bootstrap_images.asp
<div class="col-sm-3">
<div class="thumbnail">
<img src="assets/p1.png" alt="crisis">
</div>
</div>
<div class="col-sm-9">
...
</div>
Image
如果外包一張圖片<img…>的<div>或<a>套用了class=”thumbnails”的話，那麼跑出來的圖就會有外部的框框如下左圖。
<Practice> #3 Add out-link for image
以下為一個HTML檔中，指定圖片鏈結要開啟在另外一個視窗（targe=_blank）的案例。請模仿下面這段HTML code，讓上面的gallery可以連結到圖片本身。
BS08. Navigator
若你所有的內容都擺好了，你可以依照這個範例，直接抓他的<nav>區塊來改，這邊很多既定的設計，我會建議你直接複製人家的就好（我習慣什麼都會去動，但我會盡量避免去動navigation bar的設定）。
修正超鏈結的捲動位置
設好對的超鏈結對象（根據你的id），你就發現可以連了，但是，上面的navigation bar會蓋到下面的字。所以你要用之前教過的方法來控制底下的捲動，避免被上面的navigation bar蓋字。
你若查看這個範例，也會看到他有處理這件事，你可以根據你的版面需要，決定是否用負值的margin-top來調整<div>間的空間http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_theme_company_complete_animation
然後你會發現你捲動的時候不會像該範例一樣，上面的navbar的focus也會跟著變。這是因為你<body>中的class還沒改。這個項目為scrollby的功能。http://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp
<Practice>#4. Add one more division and modify your navigator
(Option) table
bootstrap為所有的HTML元件都製作了格式，連表格也不例外，例如以下表格。除此之外，建議開始習慣使用制式化的<table>的標籤，例如在標題欄位的部分，用<thead>包起來，在資料的部分用<tbody>包起來。
BS09. thumbnails gallery (Using others’ bootstrap template)
網路上提供非常多的bootstrap template可以套用，例如以下這兩個
以下我們套用這個例子來試試看http://bootsnipp.com/snippets/featured/simple-responsive-image-gallery
BS10. popup image using bootstrap
你可以練習看看，如果我今天要apply人家的範例，可以改到什麼程度？又如何因應自己的需求改？http://bootsnipp.com/snippets/7XVM2
Popup modal為一個彈出視窗，一共包含.modal-header、.modal-body和.modal-footer三個部分，分別設計標題、關閉視窗案件、圖案本身、和下方的關閉視窗案件。
tabindex="-1"會保證你的電腦會focus在彈出視窗上這個設計中包含一個Javascript，他會將
<a>中title這個attribute的value取代掉h3.modal-title的內容。讓你的圖片上方出現你在title中寫的文字。記得你的程式碼要include該javascript。
Media object
方便快速產生跟Twitter或Faceboo一樣的留言牆物件。See https://getbootstrap.com/docs/4.0/layout/media-object/
Last updated
Was this helpful?