常用框架使用二

5.Bootstrap

1.简介

40.png

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

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

注意:

使用 Bootstrap 并不代表不用写 CSS 样式，而是不用写绝大多数大家都会用到的样式

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/



    
        
        
            
            美味小馆
        
    
        
        
            
                简介 (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
该布局的代码：

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 广州小码哥教育集团
    
     回到顶部