常用框架使用二

5.Bootstrap

1.简介

40.png

1 什么是bootstrap?
bootstrap是当下最流行的前端框架（界面工具集);
特点是灵活简单、代码优雅、美观大方；
目的在于让web开发更加迅速、敏捷；
由Twitter公司的两名前端工程师Mark Otto和Jacob Thornton在2011年发起的，并利用业余时间完成了第一个版本的开发。
2 什么是框架？
库 lib library
写的更少做的更多 提供一套较为便捷的操作方式；
将一套功能体系封装到一个单独的文件中的东西；
Bootstrap提供一套前端需要的界面工具集合。
3 为什么使用Bootstarp？

• 生态圈火，不断地更新迭代；
• 提供一套美观大方地界面组件；
• 响应式界面，移动设备优先；
• 让我们的 Web 开发更简单，更快捷

注意:

1. 使用 Bootstrap 并不代表不用写 CSS 样式，而是不用写绝大多数大家都会用到的样式
2. Bootstrap 不是 BootStrap！这是一个词，不是合成词，其含义为：n. 引导指令,引导程序
   官网 ：http://www.bootcss.com/
   github 地址： https://github.com/twbs/bootstrap

3.Bootstrap初体验

Boostrap 依赖 Jquery

1.项目集成BootStrap

41.png

2.最简单的使用

组件：button , button -group , input , progress , 字体图标

42.png

6.官网快速开发（Bootstrap 页面）

1新建项目

使用bootstrap 与 Jquery 框架技术 ;
其中boostrap 依赖 Jquery

2.png

2 BootStrap 页面的简单配置

1.配置 : 网页的宽等于设备的宽
2.初始化网页的缩放比例为 1

3.png

参考：
http://v3.bootcss.com/getting-started/#template
http://v3.bootcss.com/css/

3 实现导航条组件

bootstrap官网：http://v3.bootcss.com/

    

        
        

            
                Toggle navigation
                
                
                
            
            美味小馆
        
    
        
        

            

                
简介 (current)
                
综述
                

                    派系 
                    

                        
川菜
                        

                        
湘菜
                        

                        
粤菜
                        

                        
浙菜
                        

                        
HTML5
                    
                
                
关于
                
社区
                
服务
            


        

    

4设计导航条样式

• 添加 .navbar-fixed-top 类可以让导航条固定在浏览器的顶部
  注意:固定的导航条会遮住页面上的其他的内容，可给 设padding
• 导航条包含一个.container 或者.container-fluid容器，从而让导航条居中显示或者自适应显示
• 添加.navbar-inverse 可以改变导航栏显示的背景颜色

5实现 轮播图 （js插件）和 样式

参考：http://v3.bootcss.com/javascript/#carousel
index.html实现头部轮播图：

    
    

        

        

        

    
    
    
    

        

            
            

                Hello Word !
            
        
        

            
            

                
        
        

            
            

                
        
        
        
    
        
        Previous
    
    
        
        Next
    

index.css设计样式：

body{
    padding-top: 50px;
}

6中间的栅栏布局(一)

参考：http://v3.bootcss.com/css/#grid

该布局代码：

    

        

            
.col-md-4
            
.col-md-4
            
.col-md-4
        
    

7中间栅栏布局（二）

1.每一个item布局的代码：

    

        

            

                
                
川菜
                
川菜是中国四大菜系之一，因起源于四川地区（含今重庆）而得名，以麻、辣、鲜、香为特色，以一菜一格、百菜百味而闻名。其中，麻辣是川菜最具特色的口味，其每日所用的大部分餐点都含有高于一般人能接受程度的辛辣，居住于此地区的四川人和重庆人也以能吃辣而闻名于世。

                立即尝试
            
            

                
                
川菜
                
川菜是中国四大菜系之一，因起源于四川地区（含今重庆）而得名，以麻、辣、鲜、香为特色，以一菜一格、百菜百味而闻名。其中，麻辣是川菜最具特色的口味，其每日所用的大部分餐点都含有高于一般人能接受程度的辛辣，居住于此地区的四川人和重庆人也以能吃辣而闻名于世。

                立即尝试
            
            

               
                
川菜
                
川菜是中国四大菜系之一，因起源于四川地区（含今重庆）而得名，以麻、辣、鲜、香为特色，以一菜一格、百菜百味而闻名。其中，麻辣是川菜最具特色的口味，其每日所用的大部分餐点都含有高于一般人能接受程度的辛辣，居住于此地区的四川人和重庆人也以能吃辣而闻名于世。

                立即尝试
            
        
    

2.第一张图片裁剪成圆形：

img 使用 class="img-circle" 样式

    

        

            

                
                 ...
            
        ...
          ...
        
    

8中间栅栏布局样式

body{
    padding-top: 50px;
}

#main{
    padding: 20px;
}

/*图片大小*/
#main .container-fluid .row .col-md-4 img{
    width: 180px;

}
/*水平居中*/
#main .container-fluid .row .col-md-4{
    text-align: center;
     /*下边距*/
    margin-bottom: 20px;
}

/*字体样式*/
#main .container-fluid .row .col-md-4 p {
    /*字体对齐方式*/
    text-align: left;
    /*首行缩进*/
    text-indent: 8%;
}

设计button的样式

9底部标签布局（js插件）

参考：http://v3.bootcss.com/javascript/#tabs
该布局代码：

    
    

        
        

            
川菜
            
湘菜
            
粤菜
        
        
        

            
川菜
            
湘菜
            
粤菜
        
    

10底部标签添栅栏布局

参考：http://v3.bootcss.com/css/#grid
该布局的代码：

 
    

        
        ...
        ...
        ...
        
        

            

                

                    
.col-md-8
                    
.col-md-4
                
            
            

                

                    
.col-md-4
                    
.col-md-8
                
            
            

                

                    
.col-md-8
                    
.col-md-4
                
            
        
    

11底部标签栅栏布局的完善

该布局对应的代码：

    
    

        
        ...
        ...
        ...
        
        

            

                

                    

                          
川菜
                
川菜是中国四大菜系之一，因起源于四川地区（含今重庆）而得名，以麻、辣、鲜、香为特色，以一菜一格、百菜百味而闻名。其中，麻辣是川菜最具特色的口味，其每日所用的大部分餐点都含有高于一般人能接受程度的辛辣，居住于此地区的四川人和重庆人也以能吃辣而闻名于世。

                    
                    

                        
                    
                
            
            

                

                    

                        
                    
                    

                           
川菜
                
川菜是中国四大菜系之一，因起源于四川地区（含今重庆）而得名，以麻、辣、鲜、香为特色，以一菜一格、百菜百味而闻名。其中，麻辣是川菜最具特色的口味，其每日所用的大部分餐点都含有高于一般人能接受程度的辛辣，居住于此地区的四川人和重庆人也以能吃辣而闻名于世。

                    
    
                
            
            

                

                    

                          
川菜
                
川菜是中国四大菜系之一，因起源于四川地区（含今重庆）而得名，以麻、辣、鲜、香为特色，以一菜一格、百菜百味而闻名。其中，麻辣是川菜最具特色的口味，其每日所用的大部分餐点都含有高于一般人能接受程度的辛辣，居住于此地区的四川人和重庆人也以能吃辣而闻名于世。

                    
                    

                        
                    
                
            
        
    

12底部标签栅栏布局的样式

1.图片自适应大小：

2.设计字体样式

/*字体距离顶部*/
#tabBar .tab-content .tab-pane .row .col-md-8 {
    margin-top: 100px;
}
/*h2 字体颜色*/
#tabBar .tab-content .tab-pane .row .col-md-8 h2{
    color:  red;
}

/*span 字体颜色和大小*/
#tabBar .tab-content .tab-pane .row .col-md-8 h2 span{
    color: purple;
    font-size: 20px;

}

3.设计字体自适应大小
4.自适应布局

/*自适应布局*/
@media screen and (max-width: 650px) {
    /**字体距离顶部*/
    #tabBar .tab-content .tab-pane .row .col-md-8 {
        margin-top: 40px;
    }
}

13尾部布局

    
    
© 2015 广州小码哥教育集团
    
     回到顶部