基于Bootstrap的网页开发

基于Bootstrap的网页开发 

Bootstrap是用于前端开发的工具包，提供了优雅的HTML和CSS规范，并基于jQuery开发了丰富的Web组件。Bootstrap是移动设备优先的，它针对移动设备的样式融合了框架的每个角落，使得只需要通过简单的代码，便可以实现漂亮的响应式布局。备注：使用的初始化css文件是normalize.css；

1、基本模板

  
    
    
    
    
    

    
    

    
    
    
  
  
    
你好，世界！

    
    
    
    
  

温馨提示：

（1）上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！

（2）html5shiv.js 和 respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 ，用条件注释的方式引用。

（3）Bootstrap中的js插件依赖于jQuery，因此jQuery要在Bootstrap之前引用。

2、导航条

（1）导航条依赖JavaScript，响应式导航条依赖折叠collapse插件
（2）添加.navbar-fixed-top类可以让导航条固定在顶部，固定的导航条会遮住页面上的其他内容，除非给body元素设置padding。导航条的默认高度是50px，比如设置body{padding-top:70px;}可以包含一个.container或.container-fluid容器，从而让导航条居中或者自适应。

    

        
        

            
                Toggle navigation
                
                
                
            
            浏览器库
        
        

        
        

            

                

                    综述
                
                

                    简述
                
                

                    特点
                    

                        
谷歌
                        
火狐
                        
欧朋
                        
苹果
                        

                        
IE
                    
                
                

                    关于
                
            
        
        

    

注意：可以仅仅通过data属性API就能使用所有的Bootstrap插件，无需写一行JavaScript代码。这是Bootstrap中的一等API，也应该是你的首选样式。

3、滚动广告Carousel

Carousel是一个用于轮播内容的组件，也就是我们经常用到的滚动广告，或者滚动图片。一个Carousel基本结构：

  
  

    

    

    

  

  
  

    

      
      

        ...
      
    
    

      
      

        ...
      
    
    ...
  

  
  
    
    Previous
  
  
    
    Next
  

4、三栏布局

行（row）必须包含在.container（固定宽度）或.container-fluid（100%宽度）中。
使用 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的，在桌面（>970px）屏幕设备上变为水平排列。代码简写：div.container.summary>div.row#summary-container>div.col-md-4*3

5、标签页Tabs

标签页是一个经常使用的组件，可以放置较多的内容，又可以节省页面空间。

标签

    
Home
    
Profile
    
Messages
    
Settings
  

标签页内容

    
...
    
...
    
...
    
...
  

注意：无需写任何JavaScript代码，只需要简单的为页面元素指定data-toggle="tab"，为ul添加nav和nav-tabs class。另外，注意标签页和标签页内容id属性的对应关系。

5、弹出框（模态框）Modal

弹出框是一个经常使用的组件，一般用于弹出提示信息，确认信息，表单信息，表单内容。结构包括：modal-header、modal-body、modal-footer三部分。

  

    

      

        ×
        
Modal title
      
      

        
One fine body…
      
      

        Close
        Save changes
      
    

  

注意：点击的标签部分需要设置和modal弹出框相同的id属性，以便于在多个弹出框中，弹出对应的弹出框。

6、菜单定位及总结