Bootstrap项目实战--案例

html

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">

    <title>Bootstrap 介绍</title>

    <!--引入bootstrap样式文件-->

    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

    <link rel="stylesheet" href="css/ceshi.css">

    <link rel="stylesheet" href="css/anl.css">

</head>

<body>

<!--导航-->

<nav class="navbar navbar-default navbar-fixed-top">                <!--声明导航区域，设置导航默认样式，设置导航条固定在顶部-->

    <div class="container">                                            <!--设置固定布局，最大宽度1140-->

        <div class="navbar-header">                                    <!--设置导航标题区域-->

            <a href="#" class="navbar-brand logo">自贡瑞佳财务咨询有限公司</a>    <!--设置导航标内容-->

            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">    <!--设置导航按钮-->

                <span class="icon-bar"></span>        <!--设置导航按钮样式-->

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

            </button>

        </div>

        <div class="collapse navbar-collapse" id="navbar-collapse">                <!--设置导航折叠区域，设置导航折叠样式-->

            <ul class="nav navbar-nav navbar-right dhul">        <!--设置列表区域，导航列表默认样式，导航列表右浮动-->

                <li class="active"><a href="ceshi.html"><span class="glyphicon glyphicon-home"></span> 首页</a></li>    <!--设置当前列表首先-->

                <li><a href="zix.html"><span class="glyphicon glyphicon-list"></span> 资讯</a></li>                    <!--设置当前列表图标-->

                <li><a href="anl.html"><span class="glyphicon glyphicon-fire"></span> 案例</a></li>

                <li><a href="gyu.html"><span class="glyphicon glyphicon-question-sign"></span> 关于</a></li>

            </ul>

        </div>

    </div>

</nav>

<!--轮播图-->

<div id="myCarousel" class="carousel slide">                        <!--设置轮播器区域样式，设置轮播器滚动样式-->

    <ol class="carousel-indicators">                                <!--设置轮播器列表区域样式，就是小圆点区域样式-->

        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>    <!--设置当前列表首选-->

        <li data-target="#myCarousel" data-slide-to="1"></li>

        <li data-target="#myCarousel" data-slide-to="2"></li>

    </ol>

    <div class="carousel-inner">                                    <!--设置轮播器图片区域-->

        <div class="item active tp1">                                <!--设置轮播器图片样式-->

            <a href="#"><img src="img/1.jpg" alt="第一张"></a>

        </div>

        <div class="item tp2">

            <a href="#"><img src="img/2.jpg" alt="第二张"></a>

        </div>

        <div class="item tp3">

            <a href="#"><img src="img/3.jpg" alt="第三张"></a>

        </div>

    </div>

    <!--设置轮播器箭头区域-->

    <a href="#myCarousel" data-slide="prev" class="carousel-control left">

        <span class="glyphicon glyphicon-chevron-left"></span>

    </a>

    <a href="#myCarousel" data-slide="next" class="carousel-control right">

        <span class="glyphicon glyphicon-chevron-right"></span>

    </a>

</div>

<!--案例-->

<div id="case">

    <div class="container">

        <div class="row">

            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">

                <div class="thumbnail">

                    <img src="img/case1.jpg" alt="">

                    <div class="caption">

                        <h4>中国移动通信</h4>

                        <p>参与了本机构的总裁管理培训课程，学员反馈意见良好。</p>

                    </div>

                </div>

            </div>

            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">

                <div class="thumbnail">

                    <img src="img/case2.jpg" alt="">

                    <div class="caption">

                        <h4>中国石化</h4>

                        <p>参与了本机构的总裁管理培训课程，学员反馈意见良好。</p>

                    </div>

                </div>

            </div>

            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">

                <div class="thumbnail">

                    <img src="img/case3.jpg" alt="">

                    <div class="caption">

                        <h4>中国联通</h4>

                        <p>参与了本机构的总裁管理培训课程，学员反馈意见良好。</p>

                    </div>

                </div>

            </div>

            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">

                <div class="thumbnail">

                    <img src="img/case4.jpg" alt="">

                    <div class="caption">

                        <h4>中国电信</h4>

                        <p>参与了本机构的总裁管理培训课程，学员反馈意见良好。</p>

                    </div>

                </div>

            </div>

            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">

                <div class="thumbnail">

                    <img src="img/case3.jpg" alt="">

                    <div class="caption">

                        <h4>中国联通</h4>

                        <p>参与了本机构的总裁管理培训课程，学员反馈意见良好。</p>

                    </div>

                </div>

            </div>

            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">

                <div class="thumbnail">

                    <img src="img/case4.jpg" alt="">

                    <div class="caption">

                        <h4>中国电信</h4>

                        <p>参与了本机构的总裁管理培训课程，学员反馈意见良好。</p>

                    </div>

                </div>

            </div>

            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">

                <div class="thumbnail">

                    <img src="img/case2.jpg" alt="">

                    <div class="caption">

                        <h4>中国石化</h4>

                        <p>参与了本机构的总裁管理培训课程，学员反馈意见良好。</p>

                    </div>

                </div>

            </div>

            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">

                <div class="thumbnail">

                    <img src="img/case1.jpg" alt="">

                    <div class="caption">

                        <h4>中国移动通信</h4>

                        <p>参与了本机构的总裁管理培训课程，学员反馈意见良好。</p>

                    </div>

                </div>

            </div>

            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">

                <div class="thumbnail">

                    <img src="img/case4.jpg" alt="">

                    <div class="caption">

                        <h4>中国电信</h4>

                        <p>参与了本机构的总裁管理培训课程，学员反馈意见良好。</p>

                    </div>

                </div>

            </div>

            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">

                <div class="thumbnail">

                    <img src="img/case3.jpg" alt="">

                    <div class="caption">

                        <h4>中国联通</h4>

                        <p>参与了本机构的总裁管理培训课程，学员反馈意见良好。</p>

                    </div>

                </div>

            </div>

            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">

                <div class="thumbnail">

                    <img src="img/case4.jpg" alt="">

                    <div class="caption">

                        <h4>中国电信</h4>

                        <p>参与了本机构的总裁管理培训课程，学员反馈意见良好。</p>

                    </div>

                </div>

            </div>

            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">

                <div class="thumbnail">

                    <img src="img/case2.jpg" alt="">

                    <div class="caption">

                        <h4>中国石化</h4>

                        <p>参与了本机构的总裁管理培训课程，学员反馈意见良好。</p>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

    <!--底部-->

<div class="dibu">

    <div class="container">

        <div class="row">

            <div class="col-md-6">

                <h4 class="text-center">联系方式</h4>

                <p>联系人:游先生</p>

                <p>手机:18681395066     13096006150</p>

                <p>座机:0813-8287339</p>

                <p>Q Q:350016919</p>

                <p>邮箱:350016919@qq.com</p>

                <p>地址:自贡市自流井区丹桂东段泰丰大厦1区8层7号 </p>

            </div>

            <div class="col-md-6">

                <h4 class="text-center">友情链接</h4>

                <ul class="list-unstyled">

                    <li><a href="http://www.scaic.gov.cn/" target="_blank">四川工商局</a></li>

                    <li><a href="http://www.baidu.com" target="_blank">百度</a></li>

                </ul>

            </div>

        </div>

    </div>

</div>

<div class="banq">

    <div class="container text-center banq">

        <p>版权所有 © 自贡瑞佳财务咨询有限公司 未经许可 严禁复制</p>

        <p><a href="http://www.jxiou.com/" target="_blank">自贡玉秀文化传播技术支持</a></p>

        <p>蜀ICP备16022718号-1 </p>

    </div>

</div>

<!--引入jquery文件-->

<script src="jquery/jquery.min.js"></script>

<!--引入bootstrap里的js-->

<script src="bootstrap/js/bootstrap.min.js"></script>

<script src="ceshi.js"></script>

</body>

</html>

重点：利用栅格系统布局

第二百五十四节，Bootstrap项目实战--案例的更多相关文章

  1. 第二百五十三节，Bootstrap项目实战-资讯

    Bootstrap项目实战-资讯 html <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...

  2. 第二百五十节，Bootstrap项目实战--响应式导航

    Bootstrap项目实战--响应式导航 学习要点: 1.响应式导航 一．响应式导航 基本导航组件+响应式 第一步,声明导航区域,设置导航默认样式,设置导航条固定在顶部navbar样式class类,写 ...

  3. 第二百五十五节，Bootstrap项目实战--关于

    Bootstrap项目实战--关于 html <!DOCTYPE html> <html lang="zh-cn"> <head> <me ...

  4. 第二百五十一节，Bootstrap项目实战--响应式轮播图

    Bootstrap项目实战--响应式轮播图 学习要点: 1.响应式轮播图 本节课我们要在导航条的下方做一张轮播图,自动播放最新的重要动态. 一．响应式轮播图 响应式轮播图 第一步,设置轮播器区域car ...

  5. 第二百五十二节，Bootstrap项目实战-首页

    Bootstrap项目实战-首页 html <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...

  6. 第三百二十四节，web爬虫，scrapy模块介绍与使用

    第三百二十四节,web爬虫,scrapy模块介绍与使用 Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架. 其可以应用在数据挖掘,信息处理或存储历史数据等一系列的程序中.其最初是为了 ...

  7. 大白话5分钟带你走进人工智能-第十四节过拟合解决手段L1和L2正则

                                                                               第十四节过拟合解决手段L1和L2正则 第十三节中, ...

  8. 第三百八十四节，Django+Xadmin打造上线标准的在线教育平台—路由映射与静态文件配置以及会员注册

    第三百八十四节,Django+Xadmin打造上线标准的在线教育平台—路由映射与静态文件配置以及会员注册 基于类的路由映射 from django.conf.urls import url, incl ...

  9. 第三百七十四节，Django+Xadmin打造上线标准的在线教育平台—创建课程app，在models.py文件生成4张表，课程表、课程章节表、课程视频表、课程资源表

    第三百七十四节,Django+Xadmin打造上线标准的在线教育平台—创建课程app,在models.py文件生成4张表,课程表.课程章节表.课程视频表.课程资源表 创建名称为app_courses的 ...

随机推荐

  1. es5 - array - join

    /** * join描述:将数组(或类数组对象)的所有元素连接到一个字符串中并返回此字符串. * join语法:arr .join([ separator]) * join参数:指定用于分隔数组的每对 ...

  2. IOS8 Playground介绍

    一.Playground介绍 Playground是Xcode6中自带的Swift代码开发环境.俗话说"功欲善其事,必先利其器".曾经在Xcode5中编写脚本代码,比如编写JS,其 ...

  3. no matching function for call to 'make_pair(std::string&, size_t&)'

    rtl->push_back(make_pair<string, int>(str, pos)); 在redhat6上编译无问题,在centos7上编译出现错误: no matchi ...

  4. 【转发】MVC Log4net

    1.引用log4net库类 2.写配置,我一般是写在web.config <configSections> <section name="log4net" typ ...

  5. java面试题（开发框架）

    博客分类: java基础 面试Java多线程编程设计模式          java基础面试题目,以备不时之需 俗话说 细节决定成败.      就算很简单,很小的问题,我们还是要注意一下的.     ...

  6. SIFT 、Hog 、LBP 了解

    SIFT.HOG.LBP,这三者都属于局部特征. 一.三者原理上的区别 1.SIFT:Scale-Invariant Feature Taransform,尺度不变特征变换. 尺度空间的极值检测:搜索 ...

  7. Java数据结构和算法（一）：简介

    本系列博客我们将学习数据结构和算法,为什么要学习数据结构和算法,这里我举个简单的例子. 编程好比是一辆汽车,而数据结构和算法是汽车内部的变速箱.一个开车的人不懂变速箱的原理也是能开车的,同理一个不懂数 ...

  8. 【转】在MAC下配置MySQL 5.7 数据库的编码问题

    1.MySQL 5.7 for MAC 默认没有my.cnf文件 ,首先 新建my.cnf文件: 2.在my.cnf文件追加 1 2 3 4 5 6 7 8 [mysqld] character-se ...

  9. Debian8.0 搭建leanote

    参考了官方wiki以及中文博客 https://github.com/leanote/leanote/wiki http://leanote.leanote.com/post/Leanote-manu ...

  10. oracle ORA-12545:因目标主机或对象不存在

    解决方法: 1.首先从最基本的入手,这里打开计算机右击,选择管理 2. 找到里面的服务和应用程序,打开服务 3.找到: OracleOraDb11g_home1TNSListener OracleSe ...