關於BS響應式的網站建設

1、首先是導航

html部分：

<!-- 導航 -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!--小屏幕導航按鈕和logo -->
<div class="navbar-header">
<a href="index.html" class="navbar-brand">茄子融媒</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

</div>
<!--小屏幕導航按鈕和logo -->

<!-- 大屏幕顯示導航 -->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#home">首頁</a></li>
<li><a href="index.html">論壇</a></li>
<li><a href="index.html">前端開發</a></li>
<li><a href="index.html">最新課程</a></li>
<li><a href="index.html">移動APP</a></li>
<li><a href="index.html">聯繫咱們</a></li>
</ul>
</div>
<!-- 大屏幕顯示 導航 -->
</div>
</nav>

css部分：

/* 導航 */
.navbar-default .navbar-brand{
font-size: 30px;
font-weight: bold;
color: #40d2b1;
height: 70px;
line-height: 35px;
}
.navbar-default .navbar-nav>li>a{
font-size: 16px;
font-weight: bold;
color: #666;
height: 70px;
line-height: 35px;
}
.navbar-toggle{
margin-top: 17px;
}
.navbar-defult .navbar-toggle:hover{
border-color: #40d2b1;
background-color: rgba(69,210,184);
}
.nvabar-default .navbar-toggle .icon-bar{
background-color: #1c9982
}

<!-- 導航 -->

2、關於建設響應式網站的知識點：

1.container 是建設響應式佈局的重要元素，通常結構爲：

<div class="container">

<div class="row"></div>

</div>

2.img圖片響應式的一個條件是必須加一個名爲img-responsive的class:

<img src="img/0.jpg" class="img-responsive">

若是banner只有一張圖，而不輪播的話，能夠這樣寫html:

<!-- home -->
<section id="home">
<!-- 濾鏡層 -->
<div class="lvjing">
<div class="container">
<div class="row">
<div class="1"></div>
<div align="center" class="10">
<h1>鄭東新區最大的線上營銷專家！</h1>
<p>本課程適用於：1.WEB開發人員、管理要員</br>
培訓技能的目標：使用bootstrap框架快速構建響應式網頁，顛覆傳統WEB前端！
</p>
<img src="../assets/img/php.jpg" class="img-responsive" alt="">
</div>
<div class="1"></div>
</div>
</div>
</div>
<!-- 濾鏡層 -->
</section>

css樣式：

/* Home */
#home{
background:url(../img/home-bg.jpg);
background-size: cover;
margin-top: 70px;
color:#fff;
text-align: center;
width: 100%;
}
.lvjing{
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
padding: 90px 0;
}
#home h1{
font-weight: bold;
padding-bottom: 20px;
}
#home p{
font-weight: bold;
line-height: 35px;
}
#img{
margin-top: 30px;
display: inline-block;
}

這其中包括了一個濾鏡的知識點。