BootStrap简介

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

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

简单，直观，强悍的前端开发框架，让web开发更迅速

优点: 快速，简单，灵活的栅格系统，小而强大，响应式布局，跨平台等

为什么使用BootStrap?

  • 移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。

  • 浏览器支持：所有的主流浏览器都支持 Bootstrap。

  • 容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。

  • 响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。

  • 它为开发人员创建接口提供了一个简洁统一的解决方案。

  • 它包含了功能强大的内置组件，易于定制。

  • 它还提供了基于 Web 的定制。

  • 它是开源的。

Bootstrap包的内容

  • 基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。

  • CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。

  • 组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。

  • JavaScript 插件: Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件

  • 定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

BootStrap环境安装

我们可以再下面地址下载bootstarp相应版本

bootstrap下载地址 https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip

使用文档 https://getbootstrap.com/docs/4.4/components/navbar/

国内可以使用CDN上的库

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

国际推荐使用：https://cdnjs.com/

文件结构

如上图所示，可以看到已编译的 CSS 和 JS（bootstrap.），以及已编译压缩的 CSS 和 JS（bootstrap.min.）。同时也包含了 Glyphicons 的字体，这是一个可选的 Bootstrap 主题。

Bootstrap使用

Example1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link type="text/css" href="../bootstrap.min.css" rel="stylesheet">
</head>
<body>
<a class="btn btn-primary" href="#" role="button">Button按钮</a>
<button class="btn btn-success" type="submit">Button</button>
<input class="btn btn-warning" type="button" value="Input">
</body>
</html>

Example2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<table border="1" class="table table-bordered table-hover table-striped">
    <thead>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>幽梦</td>
        <td>18</td>
    </tr>
    <tr>
        <td>渐渐</td>
        <td>18</td>
    </tr>
    <tr>
        <td>无奈</td>
        <td>18</td>
    </tr>
    </tbody>
</table>
</body>
</html>

Example3

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link type="text/css" rel="stylesheet" href="bootstrap.min.css">
​
    <style>
        .row {
            margin-bottom: 20px;
        }
​
        .row .row {
            margin-top: 10px;
            margin-bottom: 0px;
        }
​
        [class*="col-"] {
            padding-top: 15px;
            padding-bottom: 15px;
            background-color: #eee;
            background-color: rgba(86, 61, 124, .15);
            border: 1px solid #dddddd;
            border: 1px solid rgba(86, 61, 124, .2);
        }
    </style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1">
                <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="#">Project name</a>
        </div>
​
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <form class="navbar-form navbar-right" role="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Email">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Password">
                </div>
                <button type="submit" class="btn btn-success">Sign in</button>
            </form>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>
<div class="jumbotron">
    <div class="container">
        <h1>Hello, world!</h1>
​
        <p>This is a template for a simple marketing or informational website. It includes a large callout called a
            jumbotron and three supporting pieces of content. Use it as a starting point to create something more
            unique.</p>
​
        <p><a class="btn btn-primary btn-lg" role="button">Learn more &raquo;</a></p>
    </div>
</div>
​
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <h2>Heading</h2>
​
            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
                condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis
                euismod. Donec sed odio dui.</p>
​
            <p><a class="btn btn-default btn-lg" role="button">View details &raquo;</a></p>
        </div>
​
        <div class="col-md-4">
            <h2>Heading</h2>
​
            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
                condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis
                euismod. Donec sed odio dui.</p>
​
            <p><a class="btn btn-default btn-lg" role="button">View details &raquo;</a></p>
        </div>
        <div class="col-md-4">
            <h2>Heading</h2>
​
            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
                condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis
                euismod. Donec sed odio dui.</p>
​
            <p><a class="btn btn-default btn-lg" role="button">View details &raquo;</a></p>
        </div>
    </div>
    <hr/>
    <footer>
        <p>&copy;Company 2014</p>
    </footer>
</div>
</body>
</html>

BootStrapCSS

05 . 前端之BootStrap的更多相关文章

  1. 前端框架Bootstrap

    前端框架Bootstrap http://www.bootcss.com/ Bootstrap 编码规范 http://codeguide.bootcss.com/

  2. 06 前端之Bootstrap框架

    目录 前端之Bootstrap框架 一.简介 二.引入方式 本地引入(最完整的) CDN引入 三.布局容器 四.栅格系统 五.列偏移 六.表格与表单 6.1表格 6.2表单form 七.按钮 预定义样 ...

  3. 前端框架 bootstrap 的使用

    内容概要 前端框架 bootstrap 简介 引入方式 布局容器 栅格系统 图标 内容详细 简介 网址:https://v3.bootcss.com/ 版本: 2.X 3.X 4.X 推荐使用3.X版 ...

  4. 前端框架——BootStrap学习

    BootStrap简单总结下:1.栅格系统,能够很好的同时适应手机端和PC端(及传说中的响应式布局) 2.兼容性好 接下来是对BootStrap学习的一些基础案例总结和回顾: 首先引入:bootstr ...

  5. 前端利器---Bootstrap

    看着那么多大神在博客上都有自己的心得和分享,我虽然工作不久,但也想做一下自己的笔记起码对自己是一次积累和锻炼的过程.所以心血来潮今天就注册了博客. 我今天想说一下Bootstrap,学前台的大概对Bo ...

  6. [后端人员耍前端系列]Bootstrap篇：30分钟快速掌握Bootstrap

    一.引言 很久没有写过博客了,但是最近这段时间都没有闲着,接触了很多方面.比如一些前端框架和组件.还有移动开发React-Native.以及对.NET框架设计的一些重新认识.这些内容在接下来的时间都会 ...

  7. 前端开发框架Bootstrap和KnockoutJS

    江湖中那场异常惨烈的厮杀,如今都快被人遗忘了.当年,所有的武林同道为了同一个敌人都拼尽了全力,为数不多的幸存者心灰意冷,隐姓埋名,远赴他乡,他们将唯一的希望寄托给时间.少年子弟江湖老,红颜少女的鬓边也 ...

  8. 前端技术Bootstrap的hello world

    ----对于用户来说,界面就是程序本身.那么一个漂亮的web一定是你继续使用这个应用的前题. 这一节我们来一起写个Bootstrap的hello wrold. Bootstrap Bootstrap  ...

  9. 推荐一个优秀的前端框架——Bootstrap

    Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架.Bootstra ...

随机推荐

  1. ArcMap 0 （ArcGIS10.2安装）

    一如GIS深似海,从此相逢是故人(这句话适合初步接触GIS的,我算是初窥门径.还是道行太浅,只是多了感慨) 前言: 1. 本人GIS专业,对于ArcGIS较为熟悉.由于专业和其它经历需要,接触过不少各 ...

  2. 数据库——数据库SQL语句大全，最常用的SQL语句

    检索数据 检索单个列: SELECT pname FROM product 检索多个列: SELECT pname,market_price,is_hot FROM product 检索所有列: SE ...

  3. 前端【JS】，深拷贝与浅拷贝的区别及详解！

    我是前端小白一枚,为了巩固知识和增强记忆,开始整理相关的知识,方便以后复习和面试的时候看看.OK,让我们进入正题~ 先说说浅拷贝和深拷贝的理解吧,个人是这样理解的:两个对象A.B, A有数据B为空,B ...

  4. 【HBase】协处理器是什么？又能干什么？怎么用？

    目录 简单了解 官方帮助文档 协处理器出现的原因 协处理器的分类 Observer Endpoint Phoenix 协处理器的使用 加载方式 静态加载 动态加载 协处理器的卸载 协处理器Observ ...

  5. NFS服务器搭建-共享PC与ARM主板文件

    NFS服务器搭建-共享PC与ARM主板文件 在搭建好交叉编译环境之后需要实现目标板与宿主机的文件共享,在这里选择NFS,由于资料较多.需要注意的以下几点: 目标板与宿主机需要连接在同一个网段内. 宿主 ...

  6. Power BI：社保、公积金增减

    本月和上月比较,社保.公积金有增减,拓展开来,每两个相邻月份比较,社保.公积金有增减. 数据放在SQL Server Express,有公司.姓名.分类.个人缴费金额.单位缴费金额.年月等字段,uni ...

  7. Linux安装tomcat并部署JavaWeb项目

    前提条件: 安装tomcat前请确认一下信息: 系统安装了JDK,且JDK版本应与javaWeb所使用的JDK一致,具体操作可参见Linux下安装JDK. 打包了javaWeb的.war 文件,具体操 ...

  8. 【跟我一起读 linux 源码 01】boot

    计算机启动流程在我的上一个学习计划<自制操作系统>系列中,已经从完全不知道,过渡到了现在的了如指掌了,虽然有些夸张,但整个大体流程已经像过电影一样在我脑海里了,所以在看 linux 源码的 ...

  9. 基于VUE实现的h5网页Web出库单入库单打印设计

    经过将近一个月的研发,初步实现了打印单据的自定义设计,样子还有点丑陋,但是功能基本都实现了,实现了以下功能: 1.表头表尾支持动态添加行.添加列.合并单元格(可多行多列合并). 2.表头表尾分别布局, ...

  10. python之Python内置函数一览表

    Python 解释器自带的函数叫做内置函数,这些函数可以直接使用,不需要导入某个模块. 如果你熟悉 Shell 编程,了解什么是 Shell 内置命令,那么你也很容易理解什么是 Python 内置函数 ...