Bootstrap中响应式布局的相关知识点有哪些

这篇文章主要讲解了“Bootstrap中响应式布局的相关知识点有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Bootstrap中响应式布局的相关知识点有哪些”吧！

为汾阳等地区用户提供了全套网页设计制作服务，及汾阳网站建设行业解决方案。主营业务为网站设计制作、成都网站制作、汾阳网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

知识点

1 导航栏

官方解释：导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。

1.1 基础导航栏

使用 Bootstrap 之前，习惯用

+
• 来构造一个导航栏。

  
  
  
  	   
      Navigation First

    
• Navigation Second
    
• Navigation Third
    
• Navigation Fourth
    
• Navigation Fifth

效果图：

使用 Bootstrap 的话，便是在熟悉的这个构造上加上一些修饰即可。首先在

外面套一层
，并加上样式 navbar navbar-default；然后给里面的

加上样式 nav navbar-nav；最后，给选中的部分加上样式 active。一个最基本的 Bootstrap 导航便完成了。

    
        Navigation First
        
Navigation Second
        
Navigation Third
        
Navigation Fourth
        
Navigation Fifth
    

效果图：



这里在最外层加了一个 role="navigation" 的属性，这里是 HTML5 的标签属性，目的是让标签语义化，方便屏幕阅读器对其进行识别，同时也是为了方便特殊人群浏览。

1.2 进阶的导航栏

在浏览一些官方网站时，首先映入眼帘的是左上角鲜明的公司 LOGO 和夸张的轮播 ，Bootstrap 在导航中预留了 LOGO 的位置。使用方法是在外层

里面加一个样式 navbar-header 的
，这个
内再加一个样式 navbar-brand 的 元素。
			
						LOGO
			
             Navigation First         
Navigation Second
        
Navigation Third
        
Navigation Fourth
        
Navigation Fifth