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”的話，那麼跑出來的圖就會有外部的框框如下左圖。

<div class="col-md-3 col-sm-4 col-xs-6">
    <a class="thumbnail" href="https://rapidminer.com/wp-content/uploads/2016/08/data-scientist.jpg" target="_blank"><img class="img-responsive" src="https://rapidminer.com/wp-content/uploads/2016/08/data-scientist.jpg" />
    </a>
</div>

<Practice> #3 Add out-link for image

以下為一個HTML檔中，指定圖片鏈結要開啟在另外一個視窗（targe=_blank）的案例。請模仿下面這段HTML code，讓上面的gallery可以連結到圖片本身。

<div class="col-lg-3 col-md-4 col-xs-6 thumb">
    <a class="thumbnail" href="https://rapidminer.com/wp-content/uploads/2016/08/data-scientist.jpg" target="_blank">
        <img class="img-responsive" src="https://rapidminer.com/wp-content/uploads/2016/08/data-scientist.jpg" alt="">
    </a>
</div>

BS08. Navigator

若你所有的內容都擺好了，你可以依照這個範例，直接抓他的<nav>區塊來改，這邊很多既定的設計，我會建議你直接複製人家的就好（我習慣什麼都會去動，但我會盡量避免去動navigation bar的設定）。

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#myPage">Logo</a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#about">ABOUT</a></li>
                <li><a href="#members">MEMBERS</a></li>
                <li><a href="#projects">PROJECTS</a></li>
                <li><a href="#publications">PUBLICATIONS</a></li>
            </ul>
        </div>
    </div>
</nav>

.navbar {
    margin-bottom: 0;
    background-color: #333;
    z-index: 9t999;
    border: 0;
    font-size: 12px !important;
    line-height: 1.42857143 !important;
    letter-spacing: 4px;
    border-radius: 0;
    font-family: Montserrat, sans-serif;
}
.navbar li a,
.navbar .navbar-brand {
    color: #fff !important;
}
.navbar-nav li a:hover,
.navbar-nav li.active a {
    color: #f4511e !important;
    background-color: #fff !important;
}
.navbar-default .navbar-toggle {
    border-color: transparent;
    color: #fff !important;
}

修正超鏈結的捲動位置

設好對的超鏈結對象（根據你的id），你就發現可以連了，但是，上面的navigation bar會蓋到下面的字。所以你要用之前教過的方法來控制底下的捲動，避免被上面的navigation bar蓋字。

你若查看這個範例，也會看到他有處理這件事，你可以根據你的版面需要，決定是否用負值的margin-top來調整<div>間的空間http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_theme_company_complete_animation

.container-fluid {
    padding: 60px 50px;
}

然後你會發現你捲動的時候不會像該範例一樣，上面的navbar的focus也會跟著變。這是因為你<body>中的class還沒改。這個項目為scrollby的功能。http://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp

<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60">

<Practice>#4. Add one more division and modify your navigator

(Option) table

bootstrap為所有的HTML元件都製作了格式，連表格也不例外，例如以下表格。除此之外，建議開始習慣使用制式化的<table>的標籤，例如在標題欄位的部分，用<thead>包起來，在資料的部分用<tbody>包起來。

<table class="table table-striped table-hover">
    <thead>
        <tr>
            <th>Years</th>
            <th>Project name</th>
            <th>Roles</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>2016-2019</td>
            <td>Developing Upper</td>
            <td>co-PI</td>
        </tr>
    ...
    </tbody>
</table>

BS09. thumbnails gallery (Using others’ bootstrap template)

網路上提供非常多的bootstrap template可以套用，例如以下這兩個

以下我們套用這個例子來試試看http://bootsnipp.com/snippets/featured/simple-responsive-image-gallery

<div id="gallery" class="container-fluid">
    <div class="row">
        <div class="col-sm-9 col-sm-offset-3">
            <div class="col-md-3 col-sm-4 col-xs-6"><img class="img-responsive" src="..." /></div>
            <div class="col-md-3 col-sm-4 col-xs-6"><img class="img-responsive" src="..." /></div>
            <div class="col-md-3 col-sm-4 col-xs-6"><img class="img-responsive" src="..." /></div>
        </div>
    </div>
</div>

#gallery img {
    filter: gray;
    /* IE6-9 */
    -webkit-filter: grayscale(1);
    /* Google Chrome, Safari 6+ & Opera 15+ */
    -webkit-box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.75);
    margin-bottom: 20px;
}
#gallery img:hover {
    filter: none;
    /* IE6-9 */
    -webkit-filter: grayscale(0);
    /* Google Chrome, Safari 6+ & Opera 15+ */
}

你可以練習看看，如果我今天要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。

</head>
...
    <script src="bt.js"></script>
</head>

<div id="gallery2" class="container-fluid">
    <div class="row">
        <div class="col-sm-9 col-sm-offset-3">
            <h2>Our activities</h2>
            <div class="col-md-3 col-sm-4 col-xs-6">
                <a href="#gallery2"><img class="modalthumb img-responsive" src="....jpg" />
                </a>
            </div>
            <div class="col-md-3 col-sm-4 col-xs-6">
                <a href="#gallery2"><img class="modalthumb img-responsive" src="....jpg" /></a>
            </div>
        </div>
    </div>
</div>
<!--Design the type of popup modal-->
<div tabindex="-1" class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
 <button class="close" type="button" data-dismiss="modal">×</button>
 <h3 class="modal-title">Heading</h3>
 </div>
 <div class="modal-body">
 </div>
 <div class="modal-footer">
 <button class="btn btn-default" data-dismiss="modal">Close</button>
 </div>
   </div>
  </div>
</div>

.modal-dialog {
    width:600px;
    margin-top: 100px;
}
.modalthumb {margin-bottom:6px;}

(document).ready(function() {
$('.modalthumb').click(function(){
      $('.modal-body').empty();
   var title = $(this).parent('a').attr("title");
   $('.modal-title').html(title);
   $($(this).parents('div').html()).appendTo('.modal-body');
   $('#myModal').modal({show:true});
});
});

Media object

方便快速產生跟Twitter或Faceboo一樣的留言牆物件。See https://getbootstrap.com/docs/4.0/layout/media-object/

	<div class="media">
		<img class="mr-3" src="https://lh3.googleusercontent.com/proxy/vohOKjF2-FvjxZXjOA-XaPrcZSGDMZHwuMrnnRa-yjsP6udZJDPtmBABb-54VqagptjiAuXN-2B7eyvgrqj-y1VfIsGOk1YHp6BZ7c39krCmvTyX0Sk" alt="Generic placeholder image">
		<div class="media-body">
			<h5 class="mt-0">Media heading</h5>
			Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
		</div>
	</div>

PreviousGrid and spacing NextComponent Cheatsheet

Last updated 4 years ago

Was this helpful?