Bootstrap

Intro. bootstrap

Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites. 簡單地說，它提供了一套預設的CSS與JS樣式集合，只要你照他的方式來「定名與安排HTML的版面與結構」，他就會呈現出設定好的樣式。

接下來的練習以個人形象網站為目標。http://www.w3schools.com/bootstrap/trybs_theme_company_full.htm

學習資源

Getting start: https://getbootstrap.com/docs/4.5/getting-started/introduction/
Bootstrap example: https://getbootstrap.com/docs/4.5/examples/
w3school:Bootstrap 4: https://www.w3schools.com/bootstrap4/default.asp

BS01. 開始使用Bootstrap

Including query and bootstrap

在head中連結到bootstrap的css和javascript，並另外需要載入jquery。順序應該是jquery在前，bootstrap.js在後。以下面的範例來說，他除了載入jquery之外，尚載入bootstrap.min.css與bootstrap.min.js兩個css與jquery。

最快的做法：到bootstrap官網，直接複製下列這段程式碼，灰色部分為必要區域：https://getbootstrap.com/docs/4.5/getting-started/introduction/

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

    <!-- Option 2: jQuery, Popper.js, and Bootstrap JS
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
    -->
  </body>
</html>

lang
charset
HTML5 doctype: Bootstrap requires the use of the HTML5 doctype. Without it, you’ll see some funky incomplete styling, but including it shouldn’t cause any considerable hiccups.
Responsive meta tag viewport: 自bootstrap 3的設計開始，也回應了手持載具的螢幕寬度，並以<meta>指定在<head>中。 Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices, add the responsive viewport meta tag to your <head>. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
New bootstrap CDN from bootstrap official site http://getbootstrap.com/

<Practice> Adding HTML content

此時你若在<body>加入一些 code已經可以看到一些bootstrap所提供的效果。

<body>
    <div>
        <h1>My First Bootstrap Page</h1>
        <p>This is some text.</p>
    </div>
</body>

HTML典型結構：使用bootstrap

以下的結構為非常典型的bootstrap結構，最外層為container，裡面分成jumbotron與row兩部分的內容，row的部分則切割為三等分的欄。Jumbotron你可以解釋為網頁標題區。看起來如下圖

<body>
    <div class="container">
        <div class="jumbotron">
            <h1>My First Bootstrap Page</h1>
            <p>Resize this responsive page to see the effect!</p>
        </div>
        <div class="row">
            <div class="col-4">
                <h3>Column 1</h3>
                <p>Lorem ipsum dolor sit amet, </p>
            </div>
            <div class="col-4">
                <h3>Column 2</h3>
                <p>Lorem ipsum dolor sit am</p>
            </div>
            <div class="col-4">
                <h3>Column 3</h3>
                <p>Lorem ipsum dolor sit am</p>
            </div>
        </div>
    </div>
</body>

(Options) 使用HTML5 Tags

接下來我們以http://www.w3schools.com/bootstrap/trybs_theme_company_full.htm為目標來逐步設計網頁。一般來說，你就找到一個template直接套用就好，但當你還未熟悉bootstrap的操作邏輯錢，就逐步設計會比較容易了解。

HTML5對版面上的區塊元素制定了以下的標籤

<div class="container">
    <header>
        <h1>header</h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">link1</a></li>
            <li><a href="#">link2</a></li>
        </ul>
    </nav>
    <article>
        <h1>article1</h1>
        <p>content here</p>
    </article>
    <footer>Copyright</footer>
</div>

BS02. Container

Bootstrap提供了兩種主要的container：

一個是.container as a responsive fixed width container；

	<div class="container">
		<h1 class="display-4">Normal Container div</h1>
		<p class="lead">This is a Normal Container</p>
	</div>

另一個是滿版的風格：.container-fluid as a full width container。

	<div class="container-fluid">
		<h1 class="display-4">Fluid div</h1>
		<p class="lead">This is a Fluid div</p>
	</div>

BS03. 內容樣式設置

jumbotron: Banner setting

如果是指定.jumbotron-fluid那麼會使得原本.jumbotron的圓角消失。補充：.display-4 是用來顯示特大清楚的文字。.lead 亦有相同效果，均是為了顯示。

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-4">Fluid jumbotron</h1>
    <p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
  </div>
</div>

Change .container to .container-fluid.

文字置中 text-center

原本的文字太靠邊，所以我希望置中。

<div class="jumbotron text-center">
    <h1>Data practice team @ ntu journalism</h1>
</div>

文字內縮

如果你沒希望置中，但覺得他太靠邊，那就在div.jumbotron內加一層div.container。

    <div class="jumbotron">
        <div class="container">
            <h1>Data practice team @ ntu journalism</h1>
        </div>
    </div>

覆寫bootstrap規則

如果你希望改變底色，那就要建立新的CSS規則來覆寫原本bootstrap的初始風格，此時你需要先連結到一個CSS檔，這個在<head>中的CSS <link>應該擺在所有CSS你從外引進的CSS之後才會生效，不然會被覆寫。

<head>
    <meta charset="utf-8">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="bt.css">

    <!-- jQuery library →
    ….

.jumbotron {
      background-color: #f4511e;
      color: #fff;
      padding: 100px 25px;
      font-family: Montserrat, sans-serif;
  }

Banner底圖

如果你希望底部是一張圖的話，可以用下面的語法

你可以把background-size: cover;和overflow:hidden;取消掉，看看會有什麼效果。原則上差別是在於底圖的位置。
有margin-bottom的原因是，jumbotron會預留margin-bottom，檢查元素看看。

原本的樣子，底圖寬是實際大小，所以如果<div>比底圖小，則對其左上端後，能顯示多少就算多少。

.jumbotron {
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/1280px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg");
    color: #fff;
    height: 400px;
    margin-bottom: 0px;
}

加上backgorund-size:cover; 的樣式後，會使得圖面寬度相當於<div>寬度。

.jumbotron {
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/1280px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg");
    color: #fff;
    height: 400px;
	background-size: cover;
    margin-bottom: 0px;
}

最後則可用background-position:center來調整圖的位置。

.jumbotron {
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/1280px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg");
    background-position:center;
    color: #fff;
    height: 400px;;
    background-size: cover;
    margin-bottom: 0px;      
}

(Option) 底圖模糊

此時我希望讓div.jumbotron的底圖模糊一點點，上網查一查找到這個方法，結果整片都糊了，連文字都糊了。因為這個方法不是用在這邊的，這方法在未來製作捲動時，可以區分前後景。正確的做法應該看這一篇（概念上就是把背景放在jumboton下一層新建的<div>中，然後只模糊那一層），可以自己實做看看。

-webkit for Chrome, Safari;
-moz for Firefox,
-o for Opera,
-ms for Internet Explorer

<!doctype html>
<html lang="en">

<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<!-- Bootstrap CSS -->

	<title>Hello, world!</title>
</head>

<body>

	<div class="jumbotron">
			<div class="container-fluid">
			<div class="bg"></div>
			<h1 class="display-4">jumbotron-fluid div</h1>
			<p class="lead">This is a Fluid jumbotron with a container inside</p>
	</div>
		</div>
	<div style="background-color:beige;min-height:100vh"></div>

	<!-- Optional JavaScript; choose one of the two! -->

	<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
	<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>

</html>

.jumbotron {
	margin-bottom: 0px;
	position: relative;
	background: none;
	color: white;
	height: 50vh;
}

.jumbotron .bg {
	background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/1280px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg");
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-position: 0% 15%;
	background-size: cover;
	background-repeat: no-repeat;
	-webkit-filter: blur(5px);
	-moz-filter: blur(5px);
	-o-filter: blur(5px);
	-ms-filter: blur(5px);
	filter: blur(5px);
	z-index: -1;
}

CodePen

PreviousPositioning-sticky NextGrid and spacing

Last updated 4 years ago

Was this helpful?