用bootstrap十分鍾搭建你的博客首頁

本文轉載自查看原文 2018-12-14 11:22 1169 博客首頁/ 實例集/ bootstrap

第零章效果圖

第一章引入文件

引入bootstrap的css文件、js文件和jQuery文件

<!-- 這里我是將bootstrap的css,fonts,js文件都放在目錄下，且jQuery更名為jq后放在js的目錄下 -->
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
<script type="text/javascript" src="./js/jq.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>

注意：

引入bootstrap的js文件時，需要先引入jQuery文件，因為bootstrap的許多效果是基於jQuery去實現的。

第二章首頁結構規划

一個正常的博客首頁包含以下部分：頭部、導航欄、主體內容和尾部。

2.1 容器

將首頁的所有部分都包含在一個容器內（即用一個div將所有部分全都包裹住）

<div class="container">
...
</div>

2.2 頭部

頭部一般包含主標題、副標題等

<div class="page-header">
    <h1>荊白博客</h1>
    <p>因為菜，所以需要更加努力！</p>
</div>

2.3 導航欄

導航欄中的多個標簽全都用li標簽一字排開，這里，我在右邊加上了搜索框

<nav class="navbar navbar-inverse">
    <ul class="nav navbar-nav">
        <li><a href="#">首頁</a></li>
        <li class="active"><a href="#">HTML</a></li>
        <li><a href="#">CSS</a></li>
        <li><a href="#">JavaScript</a></li>
        <li>
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">PHP <span class="caret"></span></a>
            <!-- 下拉菜單 -->
            <ul class="dropdown-menu">
                <li><a href="#">PDO</a></li>
                <li><a href="#">基本函數</a></li>
                <li><a href="#">OOP</a></li>
                <li role="separator" class="divider"></li>
                <li><a href="#">MVC</a></li>
            </ul>
        </li>
        <li><a href="#">Linux</a></li>
        <li><a href="#">bootstrap</a></li>
        <li>
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">賬號管理 <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">添加文章</a></li>
                <li class="divider"></li>
                <li><a href="#">更改密碼</a></li>
                <li><a href="#">登錄</a></li>
                <li><a href="#">注銷</a></li>
            </ul>
        </li>
    </ul>
    <!-- 搜索框 -->
    <form class="navbar-form navbar-right">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="關鍵字">
        </div>
        <button type="submit" class="btn btn-default">搜索</button>
    </form>
</nav>

2.4 主體內容

左邊-主體內容

這里，我將主體內容放在了左邊，並在最后加上了分頁效果

<!-- 左-內容 -->
<div class="col-md-9">
    <article>
        <header>
            <h2><a href="#">文章標題1</a></h2>
        </header>
        <div class="cont">
            <p>“乘風破浪會有時，直掛雲帆濟滄海。”別讓怯弱否定自己，別讓憊懶誤了青春。一個人不奮斗不能有所成就，一個國家不奮斗不能立足世界，一個民族不奮斗不能興盛強大</p>
            <p>“乘風破浪會有時，直掛雲帆濟滄海。”別讓怯弱否定自己，別讓憊懶誤了青春。一個人不奮斗不能有所成就，一個國家不奮斗不能立足世界，一個民族不奮斗不能興盛強大</p>
        </div>
        <div class="text-right">
            <a href="#" class="btn btn-primary">閱讀更多</a >
        </div>
    </article>
    <div class="text-right">
        <ul class="pagination text">
            <li>
                <a href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li>
                <a href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </div>
</div>

右邊-面板

<!-- 右-側邊欄 -->
<div class="col-md-3">
    <div class="panel panel-default">
        <div class="panel-heading">
            欄目列表1
        </div>
        <div class="panel-body">
            <ul class="list-unstyled">
                <li><a href="#">php技術</a></li>
                <li><a href="#">聊人生</a></li>
                <li><a href="#">暢理想</a></li>
                <li><a href="#">個人心情</a></li>
            </ul>
        </div>
    </div>
</div>

注意：

主體內容部分我用了<div class="row"></div>進行包裹，防止后面的效果對其產生影響。

2.5 尾部

尾部一般是一個網站的備案及統計信息等

<footer>
    <div class="well text-center">
        關於本站及版權申明 | 在線留言 | 隱私保護 | RSS訂閱站長統計
        京ICP備090614xx號 Copyright © 2011-2018 文章閱讀網 版權所有
    </div>
</footer>

第三章完整代碼

通過以上代碼，我進行了一些簡單的樣式調整，完整代碼如下

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>荊白博客</title>
	<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
	<script type="text/javascript" src="./js/jq.js"></script>
	<script type="text/javascript" src="./js/bootstrap.min.js"></script>
	<style type="text/css">
		.page-header h1 {
			padding: 10px 0 0 10px;
		}
		.page-header p {
			padding-left: 35px;
		}
		.navbar-right{
			margin-right: -10px;
		}
		article{
			padding: 0 0 20px 0;
			border-bottom: 1px solid #DDD;
		}
	</style>
</head>
<body>
	<!-- 容器 -->
	<div class="container">
		<!-- 頭部 -->
		<div class="page-header">
			<h1>荊白博客</h1>
			<p>因為菜，所以需要更加努力！</p>
		</div>
		<!-- 導航 -->
		<nav class="navbar navbar-inverse">
			<ul class="nav navbar-nav">
				<li><a href="#">首頁</a></li>
				<li class="active"><a href="#">HTML</a></li>
				<li><a href="#">CSS</a></li>
				<li><a href="#">JavaScript</a></li>
				<li>
					<!-- class是caret的 顯現效果為一個倒三角形 -->
					<a href="#" class="dropdown-toggle" data-toggle="dropdown">PHP <span class="caret"></span></a>
					<!-- 下拉菜單 -->
					<ul class="dropdown-menu">
						<li><a href="#">PDO</a></li>
						<li><a href="#">基本函數</a></li>
						<li><a href="#">OOP</a></li>
						<!-- 下拉子菜單的分割線 -->
						<li role="separator" class="divider"></li>
						<li><a href="#">MVC</a></li>
					</ul>
				</li>
				<li><a href="#">Linux</a></li>
				<li><a href="#">bootstrap</a></li>
				<li>
					<a href="#" class="dropdown-toggle" data-toggle="dropdown">賬號管理 <span class="caret"></span></a>
					<ul class="dropdown-menu">
						<li><a href="#">添加文章</a></li>
						<li class="divider"></li>
						<li><a href="#">更改密碼</a></li>
						<li><a href="#">登錄</a></li>
						<li><a href="#">注銷</a></li>
					</ul>
				</li>
			</ul>
			<!-- 搜索框 -->
			<form class="navbar-form navbar-right">
				<div class="form-group">
					<input type="text" class="form-control" placeholder="關鍵字">
				</div>
				<button type="submit" class="btn btn-default">搜索</button>
			</form>
		</nav>
		<!-- 主體內容 -->
		<div class="row">
			<!-- 左-內容 -->
			<div class="col-md-9">
				<article>
					<header>
						<h2><a href="#">文章標題1</a></h2>
					</header>
					<div class="cont">
						<p>“乘風破浪會有時，直掛雲帆濟滄海。”別讓怯弱否定自己，別讓憊懶誤了青春。一個人不奮斗不能有所成就，一個國家不奮斗不能立足世界，一個民族不奮斗不能興盛強大</p>
						<p>“乘風破浪會有時，直掛雲帆濟滄海。”別讓怯弱否定自己，別讓憊懶誤了青春。一個人不奮斗不能有所成就，一個國家不奮斗不能立足世界，一個民族不奮斗不能興盛強大</p>
					</div>
					<div class="text-right">
						<a href="#" class="btn btn-primary">閱讀更多</a >
					</div>
				</article>
				<article>
					<header>
						<h2><a href="#">文章標題2</a></h2>
					</header>
					<div class="cont">
						<p>“乘風破浪會有時，直掛雲帆濟滄海。”別讓怯弱否定自己，別讓憊懶誤了青春。一個人不奮斗不能有所成就，一個國家不奮斗不能立足世界，一個民族不奮斗不能興盛強大</p>
						<p>“乘風破浪會有時，直掛雲帆濟滄海。”別讓怯弱否定自己，別讓憊懶誤了青春。一個人不奮斗不能有所成就，一個國家不奮斗不能立足世界，一個民族不奮斗不能興盛強大</p>
					</div>
					<div class="text-right">
						<a href="#" class="btn btn-primary">閱讀更多</a >
					</div>
				</article>
				<article>
					<header>
						<h2><a href="#">文章標題3</a></h2>
					</header>
					<div class="cont">
						<p>“乘風破浪會有時，直掛雲帆濟滄海。”別讓怯弱否定自己，別讓憊懶誤了青春。一個人不奮斗不能有所成就，一個國家不奮斗不能立足世界，一個民族不奮斗不能興盛強大</p>
						<p>“乘風破浪會有時，直掛雲帆濟滄海。”別讓怯弱否定自己，別讓憊懶誤了青春。一個人不奮斗不能有所成就，一個國家不奮斗不能立足世界，一個民族不奮斗不能興盛強大</p>
					</div>
					<div class="text-right">
						<a href="#" class="btn btn-primary">閱讀更多</a >
					</div>
				</article>
				<div class="text-right">
					<ul class="pagination text">
						<li>
							<a href="#" aria-label="Previous">
								<span aria-hidden="true">&laquo;</span>
							</a>
						</li>
						<li><a href="#">1</a></li>
						<li><a href="#">2</a></li>
						<li><a href="#">3</a></li>
						<li>
							<a href="#" aria-label="Next">
								<span aria-hidden="true">&raquo;</span>
							</a>
						</li>
					</ul>
				</div>
			</div>

			<!-- 右-側邊欄 -->
			<div class="col-md-3">
				<div class="panel panel-default">
					<div class="panel-heading">
						欄目列表1
					</div>
					<div class="panel-body">
						<ul class="list-unstyled">
							<li><a href="#">php技術</a></li>
							<li><a href="#">聊人生</a></li>
							<li><a href="#">暢理想</a></li>
							<li><a href="#">個人心情</a></li>
						</ul>
					</div>
				</div>
				<div class="panel panel-default">
					<div class="panel-heading">
						欄目列表2
					</div>
					<div class="panel-body">
						<ul class="list-unstyled">
							<li><a href="#">php技術</a></li>
							<li><a href="#">聊人生</a></li>
							<li><a href="#">暢理想</a></li>
							<li><a href="#">個人心情</a></li>
						</ul>
					</div>
				</div>
				<div class="panel panel-default">
					<div class="panel-heading">
						欄目列表3
					</div>
					<div class="panel-body">
						<ul class="list-unstyled">
							<li><a href="#">php技術</a></li>
							<li><a href="#">聊人生</a></li>
							<li><a href="#">暢理想</a></li>
							<li><a href="#">個人心情</a></li>
						</ul>
					</div>
				</div>
				<div class="panel panel-default">
					<div class="panel-heading">
						欄目列表4
					</div>
					<div class="panel-body">
						<ul class="list-unstyled">
							<li><a href="#">php技術</a></li>
							<li><a href="#">聊人生</a></li>
							<li><a href="#">暢理想</a></li>
							<li><a href="#">個人心情</a></li>
						</ul>
					</div>
				</div>

			</div>
		</div>
		<!-- 尾部 -->
		<footer>
			<div class="well text-center">
				關於本站及版權申明 | 在線留言 | 隱私保護 | RSS訂閱站長統計
				京ICP備090614xx號 Copyright © 2011-2018 文章閱讀網 版權所有
			</div>
		</footer>
	</div>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 十分鍾帶你入門bootstrap 十年建站老司機帶你十分鍾搭建網站十分鍾用HTML&CSS讓博客園變得高大上 Python學習總結（一）—— 十分鍾入門十分鍾學會防抖和節流 VUE -- 十分鍾入門 Less 十分鍾搞懂什么是CGI 十分鍾學會寫shell腳本十分鍾搞懂Lombok使用與原理 GitLab 之 Linux十分鍾快裝