宜宾网站建设公司

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

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

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

知识点

1 导航栏

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

1.1 基础导航栏

使用 Bootstrap 之前，习惯用

    +
  • 来构造一个导航栏。

    


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

效果图：

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

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

    外面套一层
    ，并加上样式 navbar navbar-default；然后给里面的
      加上样式 nav navbar-nav；最后，给选中的部分加上样式 active。一个最基本的 Bootstrap 导航便完成了。

      

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

    效果图：

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

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

    1.2 进阶的导航栏

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

    里面加一个样式 navbar-header 的
    ，这个
    内再加一个样式 navbar-brand 的 元素。

    

			
						LOGO
                 Navigation First         
  • Navigation Second
    •         
  • Navigation Third
    •         
  • Navigation Fourth
    •         
  • Navigation Fifth
    •     

效果图：

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

有的时候一级导航是不够的，需要搭配二级导航展示更多的内容。使用方法：首先在需要加二级导航的

  • 元素中添加样式 dropdown， 元素中添加样式 dropdown-toggle 和属性 data-toggle="dropdown"；然后在
  • 里面 下面在放一个
    •              Navigation First         
  • Navigation Second
    •         
  • Navigation Third
    •         
  • Navigation Fourth
    •                                       Navigation Fifth                                      
  • Sub-Navigation First
    •                     
  • Sub-Navigation Second
    •                     
  • Sub-Navigation Third
    •                                            

    效果图：

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

    这里又出现新的属性 aria-haspopup="true" aria-expanded="false"，同样的，这也是 HTML5 新加的属性，这里引用 Segmentfault 社区姜中秋的回答。

    aria-haspopup: true 表示点击的时候会出现菜单或是浮动元素；false 表示没有 pop-up 效果。aria-expanded: 表示展开状态。默认为 undefined, 表示当前展开状态未知。其它可选值：true 表示元素是展开的；false 表示元素不是展开的。

    平常所见到的下拉框一般都有一个向下的箭头符号 ▼，同样的，在 Bootstrap 中也支持这一效果，只不过需要引入她自带的字体库 Glyphicons 字体图标。

    官方介绍：Bootstrap 包括 250 多个来自 Glyphicon Halflings 的字体图标。Glyphicons Halflings 一般是收费的，但是他们的作者允许 Bootstrap 免费使用。为了表示感谢，希望你在使用时尽量为Glyphicons添加一个 友情链接。

    使用方法：新建一个 元素，然后在里面加上样式 glyphicon glyphicon-triangle-bottom。

    Glyphicons 字体图标使用示例：

    

    
        Navigation Fifth 
        
            
  • Sub-Navigation First
    • 
            
  • Sub-Navigation Second
    • 
            
  • Sub-Navigation Third
    • 
        
    

    效果图：

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

    注意：

    另外这里的箭头也可以使用 Bootstrap 自带的样式 caret 来实现，这里的箭头是用 CSS 实现了，使用方法：。

    1.3 响应式导航栏

    在手机端浏览网站的时候常看到几个横线（≡）组成的导航向导，Bootstrap 作为一个移动设备优先也是支持这样的需求的，响应式导航的使用的方法比较固定，首先在导航标题

    内加上一段固定写法的代码；然后在需要在小屏时折叠的                                            

    效果图：

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

    2 轮播

    图片轮播是网站的重要组成部分之一，常用来放活动广告或企业宣传图，有时也叫做“幻灯片”，Bootstrap 中的轮播效果是由 JavaScript 插件 Carousel 来实现的。

    2.1 基础轮播

    轮播的使用方法也是相对固定的，特殊场景按需求修改即可。需要注意的是需要给最外层

    元素加上一个 id，并在小圆点出指向这个 id。

    

    
    
        
        
        
    
    
    
        
        
            
        
                                       
    2.2 进阶的轮播

    一个完整的轮播应具有自动播放、点击切换、悬浮停止、外加说明文字功能，别担心，这些 Bootstrap 通通都有！

    2.2.1 自动播发

    最外层

    元素添加属性 data-ride="carousel" 和样式 slide（使轮播播放更平滑），如：         
                                                       
    后除提醒君の世界
                                                                         

    其实实现这样一个效果很简单，首先看一下栅格参数如何在多种屏幕设备上工作的。

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

    在新闻和资讯的盒子上同时加上样式 col-xs-*，col-sm-* 和 col-md-*，小屏时（屏幕宽度 ＜ 992px）col-xs-*，col-sm-* 生效，col-md-* 失效；大屏时（屏幕宽度 ≥ 992px）col-md-* 生效，col-xs-*，col-sm-* 失效。例如：

    新闻
    资讯
    。

    感谢各位的阅读，以上就是“Bootstrap中响应式布局的相关知识点有哪些”的内容了，经过本文的学习后，相信大家对Bootstrap中响应式布局的相关知识点有哪些这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！


    网站名称：Bootstrap中响应式布局的相关知识点有哪些
    分享网址：http://hbruida.cn/article/jhidoe.html

    其他资讯