常用框架使用二

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/

<!--导航条-->
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">美味小馆</a>
        </div>
    
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">简介 <span class="sr-only">(current)</span></a></li>
                <li><a href="#">综述</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">派系 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">川菜</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">湘菜</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">粤菜</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">浙菜</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">HTML5</a></li>
                    </ul>
                </li>
                <li><a href="#">关于</a></li>
                <li><a href="#">社区</a></li>
                <li><a href="#">服务</a></li>
            </ul>


        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

4设计导航条样式

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

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

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

<!--广告轮播图-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators 下面圆点 -->
    <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
    </ol>
    
    <!-- Wrapper for slides 中间滚动的内容 -->
    <div class="carousel-inner" role="listbox">
        <div class="item active">
            <img src="image/nav_01.jpg" alt="...">
            <div class="carousel-caption">
                Hello Word !
            </div>
        </div>
        <div class="item">
            <img src="image/nav_02.jpg" alt="...">
            <div class="carousel-caption">
                </div>
        </div>
        <div class="item">
            <img src="image/nav_03.jpg" alt="...">
            <div class="carousel-caption">
                </div>
        </div>
        </div>
        <!-- Controls  上一张 下一张-->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

index.css设计样式：

body{
    padding-top: 50px;
}

6中间的栅栏布局(一)

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

该布局代码：

<!--中间的栅栏布局-->
<div id="main">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-4">.col-md-4</div>
        </div>
    </div>
</div>

7中间栅栏布局（二）

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

<!--中间的栅栏布局-->
<div id="main">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-4">
                <img src="image/lzjd.png" alt="">
                <h2>川菜</h2>
                <p>川菜是中国四大菜系之一，因起源于四川地区（含今重庆）而得名，以麻、辣、鲜、香为特色，以一菜一格、百菜百味而闻名。其中，麻辣是川菜最具特色的口味，其每日所用的大部分餐点都含有高于一般人能接受程度的辛辣，居住于此地区的四川人和重庆人也以能吃辣而闻名于世。
</p>
                <button>立即尝试</button>
            </div>
            <div class="col-md-4">
                <img src="image/lzjd.png" alt="">
                <h2>川菜</h2>
                <p>川菜是中国四大菜系之一，因起源于四川地区（含今重庆）而得名，以麻、辣、鲜、香为特色，以一菜一格、百菜百味而闻名。其中，麻辣是川菜最具特色的口味，其每日所用的大部分餐点都含有高于一般人能接受程度的辛辣，居住于此地区的四川人和重庆人也以能吃辣而闻名于世。
</p>
                <button>立即尝试</button>
            </div>
            <div class="col-md-4">
               <img src="image/lzjd.png" alt="">
                <h2>川菜</h2>
                <p>川菜是中国四大菜系之一，因起源于四川地区（含今重庆）而得名，以麻、辣、鲜、香为特色，以一菜一格、百菜百味而闻名。其中，麻辣是川菜最具特色的口味，其每日所用的大部分餐点都含有高于一般人能接受程度的辛辣，居住于此地区的四川人和重庆人也以能吃辣而闻名于世。
</p>
                <button>立即尝试</button>
            </div>
        </div>
    </div>
</div>

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

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

<!--中间的栅栏布局-->
<div id="main">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-4">
                <img class="img-circle"  src="image/lzjd.png" alt="" >
                 ...
            </div>
        ...
          ...
        </div>
    </div>
</div>

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
该布局代码：

    <!--底部的tabBar-->
    <div id="tabBar">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#iOS" aria-controls="home" role="tab" data-toggle="tab">川菜</a></li>
            <li role="presentation"><a href="#Android" aria-controls="profile" role="tab" data-toggle="tab">湘菜</a></li>
            <li role="presentation"><a href="#UI" aria-controls="messages" role="tab" data-toggle="tab">粤菜</a></li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="chuan">川菜</div>
            <div role="tabpanel" class="tab-pane" id="xiang">湘菜</div>
            <div role="tabpanel" class="tab-pane" id="yue">粤菜</div>
        </div>
    </div>

10底部标签添栅栏布局

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

 <!--底部的tabBar-->
    <div id="tabBar">
        <!-- Nav tabs -->
        ...
        ...
        ...
        <!-- Tab panes -->
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="chuan">
                <div class="row">
                    <div class="col-md-8">.col-md-8</div>
                    <div class="col-md-4">.col-md-4</div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="xiang">
                <div class="row">
                    <div class="col-md-4">.col-md-4</div>
                    <div class="col-md-8">.col-md-8</div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="yue">
                <div class="row">
                    <div class="col-md-8">.col-md-8</div>
                    <div class="col-md-4">.col-md-4</div>
                </div>
            </div>
        </div>
    </div>

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

该布局对应的代码：

    <!--底部的tabBar-->
    <div id="tabBar">
        <!-- Nav tabs -->
        ...
        ...
        ...
        <!-- Tab panes -->
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="chuan">
                <div class="row">
                    <div class="col-md-8">
                          <h2>川菜</h2>
                <p>川菜是中国四大菜系之一，因起源于四川地区（含今重庆）而得名，以麻、辣、鲜、香为特色，以一菜一格、百菜百味而闻名。其中，麻辣是川菜最具特色的口味，其每日所用的大部分餐点都含有高于一般人能接受程度的辛辣，居住于此地区的四川人和重庆人也以能吃辣而闻名于世。
</p>
                    </div>
                    <div class="col-md-4">
                        <img src="image/lzjd.jpg" alt="">
                    </div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="xiang">
                <div class="row">
                    <div class="col-md-4">
                        <img src="image/djyt.jpg" alt="">
                    </div>
                    <div class="col-md-8">
                           <h2>川菜</h2>
                <p>川菜是中国四大菜系之一，因起源于四川地区（含今重庆）而得名，以麻、辣、鲜、香为特色，以一菜一格、百菜百味而闻名。其中，麻辣是川菜最具特色的口味，其每日所用的大部分餐点都含有高于一般人能接受程度的辛辣，居住于此地区的四川人和重庆人也以能吃辣而闻名于世。
</p>
                    </div>
    
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="yue">
                <div class="row">
                    <div class="col-md-8">
                          <h2>川菜</h2>
                <p>川菜是中国四大菜系之一，因起源于四川地区（含今重庆）而得名，以麻、辣、鲜、香为特色，以一菜一格、百菜百味而闻名。其中，麻辣是川菜最具特色的口味，其每日所用的大部分餐点都含有高于一般人能接受程度的辛辣，居住于此地区的四川人和重庆人也以能吃辣而闻名于世。
</p>
                    </div>
                    <div class="col-md-4">
                        <img src="image/csb.jpg" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>

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尾部布局

<!--分解线-->
<hr>
<!--尾部-->
<footer>
    <!--左浮动-->
    <p class="pull-left">© 2015 广州小码哥教育集团</p>
    <!--右浮动-->
    <a class="pull-right" target="_top"> 回到顶部</a>
</footer>

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 218,284评论 6赞 506
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 93,115评论 3赞 395
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 164,614评论 0赞 354
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,671评论 1赞 293
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,699评论 6赞 392
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,562评论 1赞 305
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,309评论 3赞 418
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 39,223评论 0赞 276
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,668评论 1赞 314
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,859评论 3赞 336
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,981评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,705评论 5赞 347
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,310评论 3赞 330
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,904评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 33,023评论 1赞 270
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 48,146评论 3赞 370
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,933评论 2赞 355