使用BootStrap制作自使用的菜单(一)

先看图

这是大屏幕时

这是小屏幕时

这是小屏幕菜单展开时

使用BootStrap制作自使用的菜单(一)_第1张图片




    
    
    
    04-导航条
      
    
	
    
    


   
    

 

其中

1.中的 lang=“en”

写在html标签中的lang属性作用:声明当前页面的语言类型。

 //英文
  //中文
  //日文
  //美式英文

2.   

        这一句代码中 

          navbar:样式

          navbar-static-top:始终把导航栏置顶

         navbar-default:白底黑字

          navbar-inverse:黑底白字

3.   

      container:类用于固定宽度并支持响应式布局的容器。

      container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。

4. 

      navbar-header为导航的标题

5. logo

    navbar-brand

       

没有

    使用 .nav-brand 的标签一般是 ,也可以是  或者 

 等标签

6.

 

  navbar-toggle: 来修饰button表示这是一个控制切换状态的button  

  data-toggle="collapse":告诉JavaScript需要对按钮做什么  就是绑定折叠之间

  data-target="#togglemenu":要切换到那一个元素

 
 
      创建所谓的汉堡按钮

 

7. 

    collapse:表示一开始是隐藏的   =====》collage in表示一开始是展开的

    .collapse .navbar-collapse:小于768px时,隐藏,大于768px时,显示

 

8..sr-only 不可见(可以去掉)  下面那三个span 是表示button上面的三条线的

你可能感兴趣的:(bootstrap,随手记)