bootStrap

# 今日内容

1. Bootstrap

## Bootstrap：

1. 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。

* 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。

* 好处：

1. 定义了很多的css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。

2. 响应式布局。

* 同一套页面可以兼容不同分辨率的设备。

2. 快速入门

1. 下载Bootstrap

2. 在项目中将这三个文件夹复制

3. 创建html页面，引入必要的资源文件

<!DOCTYPE html>

<html lang="zh-CN">

<head>

? ? <meta charset="utf-8">

? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">

? ? <meta name="viewport" content="width=device-width, initial-scale=1">

? ? <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

? ? <title>Bootstrap HelloWorld</title>

? ? <!-- Bootstrap -->

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

? ? <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->

? ? <script src="js/jquery-3.2.1.min.js"></script>

? ? <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->

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

</head>

<body>

<h1>你好，世界！</h1>

</body>

</html>

## 响应式布局

* 同一套页面可以兼容不同分辨率的设备。

* 实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子

* 步骤：

1. 定义容器。相当于之前的table、

* 容器分类：

1. container：两边留白

2. container-fluid：每一种设备都是100%宽度

2. 定义行。相当于之前的tr? 样式：row

3. 定义元素。指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目

* 设备代号：

1. xs：超小屏幕 手机 (<768px)：col-xs-12

2. sm：小屏幕 平板 (≥768px)

3. md：中等屏幕 桌面显示器 (≥992px)

4. lg：大屏幕 大桌面显示器 (≥1200px)

* 注意：

1. 一行中如果格子数目超过12，则超出部分自动换行。

2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。

3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值，会一个元素沾满一整行。

## CSS样式和JS插件

1. 全局CSS样式：

* 按钮：class="btn btn-default"

* 图片：

*? class="img-responsive"：图片在任意尺寸都占100%

*? 图片形状

*? <img src="..." alt="..." class="img-rounded">：方形

*? <img src="..." alt="..." class="img-circle"> ： 圆形

*? <img src="..." alt="..." class="img-thumbnail"> ：相框

* 表格

* table

* table-bordered

* table-hover

* 表单

* 给表单项添加：class="form-control"

2. 组件：

* 导航条

* 分页条

3. 插件：

* 轮播图

## 案例

<!DOCTYPE html>

<html lang="zh-CN">

<head>

? ? <meta charset="utf-8">

? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">

? ? <meta name="viewport" content="width=device-width, initial-scale=1">

? ? <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

? ? <title>Bootstrap HelloWorld</title>

? ? <!-- Bootstrap -->

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

? ? <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->

? ? <script src="js/jquery-3.2.1.min.js"></script>

? ? <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->

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

? ? <style>

? ? ? ? .paddtop{

? ? ? ? ? ? padding-top: 10px;

? ? ? ? }

? ? ? ? .search-btn{

? ? ? ? ? ? float: left;

? ? ? ? ? ? border:1px solid #ffc900;

? ? ? ? ? ? width: 90px;

? ? ? ? ? ? height: 35px;

? ? ? ? ? ? background-color:#ffc900 ;

? ? ? ? ? ? text-align: center;

? ? ? ? ? ? line-height: 35px;

? ? ? ? ? ? margin-top: 15px;

? ? ? ? }

? ? ? ? .search-input{

? ? ? ? ? ? float: left;

? ? ? ? ? ? border:2px solid #ffc900;

? ? ? ? ? ? width: 400px;

? ? ? ? ? ? height: 35px;

? ? ? ? ? ? padding-left: 5px;

? ? ? ? ? ? margin-top: 15px;

? ? ? ? }

? ? ? ? .jx{

? ? ? ? ? ? border-bottom: 2px solid #ffc900;

? ? ? ? ? ? padding: 5px;

? ? ? ? }

? ? ? ? .company{

? ? ? ? ? ? height: 40px;

? ? ? ? ? ? background-color: #ffc900;

? ? ? ? ? ? text-align: center;

? ? ? ? ? ? line-height:40px ;

? ? ? ? ? ? font-size: 8px;

? ? ? ? }

? ? </style>

</head>

<body>

? <!-- 1.页眉部分-->

? <header class="container-fluid">

? ? ? <div class="row">

? ? ? ? ? <img src="img/top_banner.jpg" class="img-responsive">

? ? ? </div>

? ? ? <div class="row paddtop">

? ? ? ? ? <div class="col-md-3">

? ? ? ? ? ? ? <img src="img/logo.jpg" class="img-responsive">

? ? ? ? ? </div>

? ? ? ? ? <div class="col-md-5">

? ? ? ? ? ? ? <input class="search-input" placeholder="请输入线路名称">

? ? ? ? ? ? ? <a class="search-btn" href="#">搜索</a>

? ? ? ? ? </div>

? ? ? ? ? <div class="col-md-4">

? ? ? ? ? ? ? <img src="img/hotel_tel.png" class="img-responsive">

? ? ? ? ? </div>

? ? ? </div>

? ? ? <!--导航栏-->

? ? ? <div class="row">

? ? ? ? ? <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="#">Link <span class="sr-only">(current)</span></a></li>

? ? ? ? ? ? ? ? ? ? ? ? ? <li><a href="#">Link</a></li>

? ? ? ? ? ? ? ? ? ? ? ? ? <li><a href="#">Link</a></li>

? ? ? ? ? ? ? ? ? ? ? ? ? <li><a href="#">Link</a></li>

? ? ? ? ? ? ? ? ? ? ? ? ? <li><a href="#">Link</a></li>

? ? ? ? ? ? ? ? ? ? ? ? ? <li><a href="#">Link</a></li>

? ? ? ? ? ? ? ? ? ? ? </ul>

? ? ? ? ? ? ? ? ? </div><!-- /.navbar-collapse -->

? ? ? ? ? ? ? </div><!-- /.container-fluid -->

? ? ? ? ? </nav>

? ? ? </div>

? ? ? <!--轮播图-->

? ? ? <div class="row">

? ? ? ? ? <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="img/banner_1.jpg" alt="...">

? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? ? <div class="item">

? ? ? ? ? ? ? ? ? ? ? <img src="img/banner_2.jpg" alt="...">

? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? ? <div class="item">

? ? ? ? ? ? ? ? ? ? ? <img src="img/banner_3.jpg" alt="...">

? ? ? ? ? ? ? ? ? </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>

? ? ? </div>

? </header>

? <!-- 2.主体部分-->

? <div class="container">

? ? ? ? <div class="row jx">

? ? ? ? ? ? <img src="img/icon_5.jpg">

? ? ? ? ? ? <span>黑马精选</span>

? ? ? ? </div>

? ? ? <div class="row paddtop">

? ? ? ? ? <div class="col-md-3">

? ? ? ? ? ? ? ? <div class="thumbnail">

? ? ? ? ? ? ? ? ? ? <img src="img/jiangxuan_3.jpg" alt="">

? ? ? ? ? ? ? ? ? ? <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>

? ? ? ? ? ? ? ? ? ? <font color="red">&yen; 699</font>

? ? ? ? ? ? ? ? </div>

? ? ? ? ? </div>

? ? ? ? ? <div class="col-md-3">

? ? ? ? ? ? ? <div class="thumbnail">

? ? ? ? ? ? ? ? ? <img src="img/jiangxuan_3.jpg" alt="">

? ? ? ? ? ? ? ? ? <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>

? ? ? ? ? ? ? ? ? <font color="red">&yen; 699</font>

? ? ? ? ? ? ? </div>

? ? ? ? ? </div>

? ? ? ? ? <div class="col-md-3">

? ? ? ? ? ? ? <div class="thumbnail">

? ? ? ? ? ? ? ? ? <img src="img/jiangxuan_3.jpg" alt="">

? ? ? ? ? ? ? ? ? <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>

? ? ? ? ? ? ? ? ? <font color="red">&yen; 699</font>

? ? ? ? ? ? ? </div>

? ? ? ? ? </div>

? ? ? ? ? <div class="col-md-3">

? ? ? ? ? ? ? <div class="thumbnail">

? ? ? ? ? ? ? ? ? <img src="img/jiangxuan_3.jpg" alt="">

? ? ? ? ? ? ? ? ? <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>

? ? ? ? ? ? ? ? ? <font color="red">&yen; 699</font>

? ? ? ? ? ? ? </div>

? ? ? ? ? </div>

? ? ? </div>

? ? ? <div class="row jx">

? ? ? ? ? <img src="img/icon_6.jpg">

? ? ? ? ? <span>国内游</span>

? ? ? </div>

? ? ? <div class="row paddtop">

? ? ? ? ? <div class="col-md-4">

? ? ? ? ? ? ? <img src="img/guonei_1.jpg">

? ? ? ? ? </div>

? ? ? ? ? <div class="col-md-8">

? ? ? ? ? ? ? <div class="row">

? ? ? ? ? ? ? ? ? <div class="col-md-4">

? ? ? ? ? ? ? ? ? ? ? <div class="thumbnail">

? ? ? ? ? ? ? ? ? ? ? ? ? <img src="img/jiangxuan_3.jpg" alt="">

? ? ? ? ? ? ? ? ? ? ? ? ? <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>

? ? ? ? ? ? ? ? ? ? ? ? ? <font color="red">&yen; 699</font>

? ? ? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? ? <div class="col-md-4">

? ? ? ? ? ? ? ? ? ? ? <div class="thumbnail">

? ? ? ? ? ? ? ? ? ? ? ? ? <img src="img/jiangxuan_3.jpg" alt="">

? ? ? ? ? ? ? ? ? ? ? ? ? <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>

? ? ? ? ? ? ? ? ? ? ? ? ? <font color="red">&yen; 699</font>

? ? ? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? ? <div class="col-md-4">

? ? ? ? ? ? ? ? ? ? ? <div class="thumbnail">

? ? ? ? ? ? ? ? ? ? ? ? ? <img src="img/jiangxuan_3.jpg" alt="">

? ? ? ? ? ? ? ? ? ? ? ? ? <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>

? ? ? ? ? ? ? ? ? ? ? ? ? <font color="red">&yen; 699</font>

? ? ? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? <div class="row">

? ? ? ? ? ? ? ? ? <div class="col-md-4">

? ? ? ? ? ? ? ? ? ? ? <div class="thumbnail">

? ? ? ? ? ? ? ? ? ? ? ? ? <img src="img/jiangxuan_3.jpg" alt="">

? ? ? ? ? ? ? ? ? ? ? ? ? <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>

? ? ? ? ? ? ? ? ? ? ? ? ? <font color="red">&yen; 699</font>

? ? ? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? ? <div class="col-md-4">

? ? ? ? ? ? ? ? ? ? ? <div class="thumbnail">

? ? ? ? ? ? ? ? ? ? ? ? ? <img src="img/jiangxuan_3.jpg" alt="">

? ? ? ? ? ? ? ? ? ? ? ? ? <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>

? ? ? ? ? ? ? ? ? ? ? ? ? <font color="red">&yen; 699</font>

? ? ? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? ? <div class="col-md-4">

? ? ? ? ? ? ? ? ? ? ? <div class="thumbnail">

? ? ? ? ? ? ? ? ? ? ? ? ? <img src="img/jiangxuan_3.jpg" alt="">

? ? ? ? ? ? ? ? ? ? ? ? ? <p>上海直飞三亚5天4晚自由行(春节预售+亲子/蜜月/休闲游首选+豪华酒店任选+接送机)</p>

? ? ? ? ? ? ? ? ? ? ? ? ? <font color="red">&yen; 699</font>

? ? ? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? </div>

? ? ? ? ? </div>

? ? ? </div>

? </div>

? <!-- 3.页脚部分-->

? <footer class="container-fluid">

? ? ? <div class="row">

? ? ? ? ? <img src="img/footer_service.png" class="img-responsive">

? ? ? </div>

? ? ? <div class="row company">

? ? ? ? ? 江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2018, All Rights Reserved 苏ICP备16007882

? ? ? </div>

? </footer>

</body>

</html>

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

推荐阅读更多精彩内容