首页 > 代码库 > Bootstrap 响应式布局

Bootstrap 响应式布局

2024-09-15 23:33:51   250人阅读

1、保证在窄屏时需要折叠的内容必须包裹在带一个div内，并且为这个div加入collapse、navbar-collapse两个类名。最后为这个div添加一个class类名或者id名。

2、保证在窄屏时要显示的图标样式（固定写法）：

1 <button class="navbar-toggle" type="button" data-toggle="collapse">
2   <span class="sr-only">Toggle Navigation</span>
3   <span class="icon-bar"></span>
4   <span class="icon-bar"></span>
5   <span class="icon-bar"></span>
6 </button>

3、并为button添加data-target=".类名/#id名"，究竞是类名还是id名呢？由需要折叠的div来决定。

 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>响应式导航条</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<style type="text/css">
    body{padding:50px 0 0 0;}
</style>
</head>

<body>
<!--代码-->
<div class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
     　<!-- .navbar-toggle样式用于toggle收缩的内容，即nav-collapse collapse样式所在元素 -->
       <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-responsive-collapse">
          <span class="sr-only">Toggle Navigation</span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span> 
       </button>
       <!-- 确保无论是宽屏还是窄屏，navbar-brand都显示 -->
       <a href="##" class="navbar-brand">汇杰科技</a>
  </div>
  <!-- 屏幕宽度小于768px时，div.navbar-responsive-collapse容器里的内容都会隐藏，显示icon-bar图标，当点击icon-bar图标时，再展开。屏幕大于768px时，默认显示。 -->
  <div class="collapse navbar-collapse" id="navbar-responsive-collapse">
        <ul class="nav navbar-nav">
              <li class="active"><a href="##">网站首页</a></li>
              <li><a href="##">系列教程</a></li>
              <li><a href="##">职员介绍</a></li>
              <li><a href="##">成功案例</a></li>
              <li><a href="##">关于我们</a></li>
         </ul>
  </div>
</div>

<script src="jquery.js"></script>
<script src="js/bootstrap.min.js"></script> 

</body>
</html>

 

Bootstrap 响应式布局


联系
我们