概述

  • 概念：一个前端开发的框架，Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。

    • 框架：一个半成品软件，开发人员可以在框架的基础上，再进行开发，简化编码。
    • 好处：
      1. 定义了很多 css 式和 js 插件。我们开发人员可以直接使用这些样式和插件得到丰富的页面效果。
      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 101 Template</title>

    <!-- Bootstrap -->

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

</head>

<body>

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

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

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

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

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

</body>

</html>

响应式布局

  • 同一套页面可以兼容不同分辨率的设备
  • 实现：依赖于栅格系统：将一行平均分成12个格子，可以指定元素占几个格子。
  • 步骤：
    1. 定义容器。相当于之前的 table

      • 容器分类：

        1. container：两边留白
        2. container-fluid：每一种设备都是 100% 宽度
    2. 定义行。相当于之前的 tr 样式：row
    3. 定义元素。指定该元素在不同的设备上，所占的格子数目。 样式：col-设备代号-格子数目
      • 设备代码：

        1. xs：超小屏幕 手机 (<768px)
        2. sm：小屏幕 平板 (≥768px)
        3. md：中等屏幕 桌面显示器 (≥992px)
        4. lg：大屏幕 大桌面显示器 (≥1200px)

注意：

  1. 一行中如果格子的数目超过 12，则超出部分会自动换行。
  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 栅格</title>

    <!-- Bootstrap -->

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

    <style>

        .inner {

            border: 1px solid red;

        }

    </style>

</head>

<body>

    <!--1.定义容器-->

    <div class="container">

        <!--2.定义行-->

        <div class="row">

            <!--3.定义元素

                在大显示器上一行12个格子

                在pad上一行6个格子

            -->

            <div class="col-lg-1 col-md-2 inner">栅格</div>

            <div class="col-lg-1 col-md-2 inner">栅格</div>

            <div class="col-lg-1 col-md-2 inner">栅格</div>

            <div class="col-lg-1 col-md-2 inner">栅格</div>

            <div class="col-lg-1 col-md-2 inner">栅格</div>

            <div class="col-lg-1 col-md-2 inner">栅格</div>

            <div class="col-lg-1 col-md-2 inner">栅格</div>

            <div class="col-lg-1 col-md-2 inner">栅格</div>

            <div class="col-lg-1 col-md-2 inner">栅格</div>

            <div class="col-lg-1 col-md-2 inner">栅格</div>

            <div class="col-lg-1 col-md-2 inner">栅格</div>

            <div class="col-lg-1 col-md-2 inner">栅格</div>

        </div>

    </div>

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

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

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

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

</body>

</html>

CSS样式和JS插件

全局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"

组件

  • 导航条
  • 分页条

插件

  • 轮播图

案例:黑马旅游网

<!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 黑马旅游网</title>

    <!-- Bootstrap -->

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

    <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;

        }

        /*搜索框*/

        .serach-input {

            float: left;

            border: 2px solid #ffc900;

            width: 400px;

            height: 35px;

            padding-left: 8px;

            margin-top: 15px;

        }

        /*小图标*/

        .img_icon {

            width: 50px;

            height: 50px;

        }

        /*精选*/

        .selected {

            border-bottom: 2px solid #ffc900;

            padding: 5px;

        }

        /*头像*/

        .img_touxiang {

            width: 400px;

            height: 550px;

        }

        /*公司简介*/

        .company {

            background-color: #ffc900;

            height: 40px;

            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 type="text" placeholder="请输入线路" class="serach-input">

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

        </div>

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

            <img src="img/logo.jpg" 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>

                        <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/banner2.jpg" alt="...">

                    <div class="carousel-caption">

                    </div>

                </div>

                <div class="item">

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

                    <div class="carousel-caption">

                    </div>

                </div>

                <div class="item">

                    <img src="img/banner4.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>

    </div>

</header>

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

<div class="container">

    <div class="row selected">

        <img src="img/icon_1.jpg" class="img_icon">

        <span>景点精选</span>

    </div>

    <div class="row paddtop">

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

            <div class="thumbnail">

                <img src="img/selected_1.jpg">

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

                <font color="red">￥ 699</font>

            </div>

        </div>

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

            <div class="thumbnail">

                <img src="img/selected_2.jpg">

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

                <font color="red">￥ 699</font>

            </div>

        </div>

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

            <div class="thumbnail">

                <img src="img/selected_3.jpg">

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

                <font color="red">￥ 699</font>

            </div>

        </div>

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

            <div class="thumbnail">

                <img src="img/selected_4.jpg">

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

                <font color="red">￥ 699</font>

            </div>

        </div>

    </div>

    <div class="row selected">

        <img src="img/icon_1.jpg" class="img_icon">

        <span>国内游</span>

    </div>

    <div class="row paddtop">

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

            <img src="img/touxiang1.jpeg" class="img_touxiang">

        </div>

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

            <div class="row">

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

                    <div class="thumbnail">

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

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

                        <font color="red">￥ 699</font>

                    </div>

                </div>

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

                    <div class="thumbnail">

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

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

                        <font color="red">￥ 699</font>

                    </div>

                </div>

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

                    <div class="thumbnail">

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

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

                        <font color="red">￥ 699</font>

                    </div>

                </div>

            </div>

            <div class="row">

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

                    <div class="thumbnail">

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

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

                        <font color="red">￥ 699</font>

                    </div>

                </div>

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

                    <div class="thumbnail">

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

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

                        <font color="red">￥ 699</font>

                    </div>

                </div>

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

                    <div class="thumbnail">

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

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

                        <font color="red">￥ 699</font>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

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

<div class="container-fluid">

    <div class="row">

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

    </div>

    <div class="row company">

        江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2019, All Rights Reserved 技术支持 360网站安全检测平台 苏ICP备16007882 苏公网安备

        32132202000574号

    </div>

</div>

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

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

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

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

</body>

</html>

Bootstrap初识的更多相关文章

  1. （22）bootstrap 初识 + Font Awesome(字体图标库)

    bootstrap作用就是简化布局 bootstrap是基于JQ的,所以内部代码使用的是jq语法 所以要使用bs,必须先倒入 1.head标签内倒入bs的css文件  <link rel=&qu ...

  2. Python之旅Day15 Bootstrap与Django初识

    Bootstrap初识 Bootstrap简介 Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目.(官网http://www.boo ...

  3. 【读书笔记《Bootstrap 实战》】1.初识Bootstrap

    作为Web前端开发框架,Bootstrap为大多数标准的UI设计常见提供了用户友好.扩浏览器的解决方案. 1.下载Bootstrap 打开官方网址 http://getbootstrap.com/ 进 ...

  4. 【Bootstrap】1.初识Bootstrap

    作为Web前端开发框架,Bootstrap为大多数标准的UI设计常见提供了用户友好.扩浏览器的解决方案. 1.下载Bootstrap 打开官方网址 http://getbootstrap.com/ 进 ...

  5. 装饰器的初识,基于bootstrap的前端开发

    1装饰器的初识 概念:不改变函数原来的调用方式,动态地给函数添加功能 开放封闭的原则:1>对添加的新功能是开放的,32>不要在元代码进行修改(封闭) 1.1>函数的定义:对代码块和功 ...

  6. 第一篇:初识bootstrap

    Bootstrap是一款目前非常流行的前端框架,简单的说,就是html,css,javascript的工具集,我们可以用bootstrap搭建出简洁,清新的网站或软件界面,有了bootstrap这个利 ...

  7. Bootstrap 我的学习记录2 栅格系统初识

    以下理论内容copy自bootstrap中文网(一个不错的bootstrap学习网站). 栅格系统 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport) ...

  8. bootstrap学习起步篇：初识bootstrap之表单验证（二）

    学习bootstrap是个过程,它提供给我们的文档上有很详细的说明.包括常用的栅栏布局.页面元素等,这里就不啰嗦了,今天,我就来说下结合jquery的表单验证. 最开始不借助插件,我们需要自己去编写验 ...

  9. bootstrap学习起步篇：初识bootstrap之html5语法构建hello篇（一）

    目前选择使用bootstrap作为前端页面模板,是件很省心的事情.官网上给出的实例和教程也很多.在实际使用过程中,我们也许还要借助文档去了解它的元素和样式.但也不能减少我们使用他的兴趣. 我准备将其整 ...

随机推荐

  1. java 代码执行cmd 返回值异常 （关于JAVA Project.waitfor()返回值是1）

    关于JAVA Project.waitfor()返回值是1   0条评论 Project.waitfor()返回值是1,找了很久从网上没有发现关于1的说明. 这时对源代码调试了一下,发现Project ...

  2. Thinking in Java,Fourth Edition(Java 编程思想,第四版)学习笔记(十二)之Error Handling with Exceptions

    The ideal time to catch an error is at compile time, before you even try to run the program. However ...

  3. 多线程高并发编程(5) -- CountDownLatch、CyclicBarrier源码分析

    一.CountDownLatch 1.概念 public CountDownLatch(int count) {//初始化 if (count < 0) throw new IllegalArg ...

  4. cucumber学习索引

    Cucumber(1) —— 环境配置 Cucumber(2)——目录结构以及基本语法 Cucumber(3)——命令以及日志 Cucumber(4)——jenkins的集成

  5. 计算机系统基础学习笔记(1)-基本GCC，objdump，GBD命令的使用

    基本GCC命令的使用 GCC是一套由GNU项目开发的编程语言编译器,可处理C语言. C++.Fortran.Pascal.Objective-C.Java等等.GCC通常是 跨平台软件的编译器首选.g ...

  6. MySQL使用mysqldump+binlog完整恢复被删除的数据库

    (一)概述 在日常的MySQL数据库运维过程中,可能会遇到用户误删除数据,常见的误删除数据操作有: 用户执行delete,因为条件不对,删除了不应该删除的数据(DML操作): 用户执行update,因 ...

  7. tensorflow1.0 变量加法

    import tensorflow as tf state = tf.Variable(0,name='counter') print(state.name) one = tf.constant(1) ...

  8. java算法-二分法查找实现

    什么是二分法查找 首先,使用二分法查找的前提是:被查找的数组已排好序 具体实现: 假如有一组数为3,12,24,36,55,68,75,88要查给定的值24.可设三个变量front,mid,end分别 ...

  9. iOS重构项目之路

    iOS重构项目之路 1.整理目录 按照功能模块对整个工程的目录进行分类,比如 2.整理资源文件 删除多余的图片文件,资源文件 图片资源尽量添加到Assets.xcassets中 删除项目中未引用的图片 ...

  10. php内置函数call_user_func()

    <?php //call_user_func(callback,name,age) //第一个参数callback作为回掉函数使用,其余的参数是他的参数 function now($a,$b) ...