Bootstrap
  • [Bootstrap]Bootstrap 教程
  • [Bootstrap]Bootstrap 简介
  • [Bootstrap]Bootstrap 环境安装
  • [Bootstrap]Bootstrap CSS 概览
  • [Bootstrap]Bootstrap 网格系统
  • [Bootstrap]Bootstrap 排版
  • [Bootstrap]Bootstrap 代码
  • [Bootstrap]Bootstrap 表格
  • [Bootstrap]Bootstrap 表单
  • [Bootstrap]Bootstrap 按钮
  • [Bootstrap]Bootstrap 图片
  • [Bootstrap]Bootstrap 辅助类
  • [Bootstrap]Bootstrap 响应式实用工具
  • [Bootstrap]Bootstrap 字体图标(Glyphicons)
  • [Bootstrap]Bootstrap 下拉菜单(Dropdowns)
  • [Bootstrap]Bootstrap 按钮组
  • [Bootstrap]Bootstrap 按钮下拉菜单
  • [Bootstrap]Bootstrap 输入框组
  • [Bootstrap]Bootstrap 导航元素
  • [Bootstrap]Bootstrap 导航栏
  • [Bootstrap]Bootstrap 面包屑导航Breadcrumbs
  • [Bootstrap]Bootstrap 分页
  • [Bootstrap]Bootstrap 标签
  • [Bootstrap]Bootstrap 徽章 Badges
  • [Bootstrap]Bootstrap 超大屏幕 Jumbotron
  • [Bootstrap]Bootstrap 页面标题 Page Header
  • [Bootstrap]Bootstrap 缩略图
  • [Bootstrap]Bootstrap 警告 Alerts
  • [Bootstrap]Bootstrap 进度条
  • [Bootstrap]Bootstrap 多媒体对象(Media Object)
  • [Bootstrap]Bootstrap 列表组
  • [Bootstrap]Bootstrap 面板Panels
  • [Bootstrap]Bootstrap Well
  • [Bootstrap]Bootstrap 插件概览
  • [Bootstrap]Bootstrap 过渡效果 Transition插件
  • [Bootstrap]Bootstrap 模态框 Modal插件
  • [Bootstrap]Bootstrap 下拉菜单(Dropdown)插件
  • [Bootstrap]Bootstrap 滚动监听 Scrollspy 插件
  • [Bootstrap]Bootstrap 标签页 Tab插件
  • [Bootstrap]Bootstrap 提示工具Tooltip插件
  • [Bootstrap]Bootstrap 弹出框 Popover插件
  • [Bootstrap]Bootstrap 警告框 Alert 插件
  • [Bootstrap]Bootstrap 按钮 Button 插件
  • [Bootstrap]Bootstrap 折叠 Collapse 插件
  • [Bootstrap]Bootstrap 轮播 Carousel 插件
  • [Bootstrap]Bootstrap 附加导航 Affix 插件
  • [Bootstrap]Bootstrap UI 编辑器(开发工具)
  • [Bootstrap]Bootstrap HTML编码规范
  • [Bootstrap]Bootstrap CSS编码规范
  • [Bootstrap]Bootstrap Web框架
  • 直达腾讯云服务器
    腾讯云服务器,数据库,短信等热销产品限量秒杀;新购爆款3折起;
    腾讯云数据库MySQL入门机型仅12元/月
    腾讯云云服务器新购特惠,最低2折起,1核1G3年仅794.73元,即0.73元/日。
    腾讯云国际顶级CA机构SSL证书8.8折,云解析买一年最高送半年!
    腾讯云为数百万企业和开发者提供安全、稳定的云服务器、云数据库、CDN等云服务
    腾讯云服务器安全可靠高性能,多种配置供您选择
    腾讯云数据库性能卓越稳定可靠,为您解决数据库运维难题
    阿里云服务器入口
    180天免费用腾讯云服务器马上领取
    您当前位置:狗鱼MySQL教程 >> HTML >> Bootstrap >> Bootstrap 简介
    Bootstrap 简介
    更新日期: 2017年07月19日 来源: 本站原创 作者: 佚名 阅读:
    上一篇Bootstrap 教程 下一篇:Bootstrap 环境安装

    bootstrap 简介

    什么是 Bootstrap?

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

    历史

    Bootstrap 是由 TwitterMark OttoJacob Thornton 开发的。Bootstrap 是 2011 年八月在 gitHub 上发布的开源产品。

    为什么使用 Bootstrap?

    • 移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式。
    • 浏览器支持:所有的主流浏览器都支持 Bootstrap。

      Bootstrap 简介 Bootstrap 简介 Bootstrap 简介 Bootstrap 简介 Bootstrap 简介

    • 容易上手:只要您具备 HTML 和 CSS 的基础知识,您就可以开始学习 Bootstrap。
    • 响应式设计:Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见 Bootstrap 响应式设计。

      Bootstrap 简介

    • 它为开发人员创建接口提供了一个简洁统一的解决方案。
    •  
    • 它包含了功能强大的内置组件,易于定制。
    •  
    • 它还提供了基于 Web 的定制。
    •  
    • 它是开源的。
    •  

    Bootstrap 包的内容

    • 基本结构:Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。
    •  
    • CSS:Bootstrap 自带以下特性:全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class,以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。
    •  
    • 组件:Bootstrap 包含了十几个可重用的组件,用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件 部分详细讲解。
    •  
    • javaScript 插件:Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件,也可以逐个包含这些插件。这将在 Bootstrap 插件 部分详细讲解。

       

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

       


    在线实例

    本站的 Bootstrap 教程包含了上百个实例。

    你可以使用我们的在线编辑器在线编辑代码,并点击运行按钮查看结果。

    Bootstrap 实例

    <div class="container">
    <div class="jumbotron">
    <h1>我的第一个 Bootstrap 页面</h1>
    <p>重置窗口大小,查看响应式效果!</p>
    </div>
    <div class="row">
    <div class="col-sm-4">
    <h3>Column 1</h3>
    <p>学的不仅是技术,更是梦想!</p>
    <p>再牛逼的梦想,也抵不住你的坚持!</p> </div>
    <div class="col-sm-4">
    <h3>Column 2</h3>
    <p>学的不仅是技术,更是梦想!</p>
    <p>再牛逼的梦想,也抵不住你的坚持!</p> </div>
    <div class="col-sm-4">
    <h3>Column 3</h3>
    <p>学的不仅是技术,更是梦想!</p>
    <p>再牛逼的梦想,也抵不住你的坚持!</p>
    </div>
    </div>
    </div>

    源代码如下:

    <!DOCTYPE html>
    <html>
    <head>
      <title>Bootstrap 实例</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>

    <div class="container">
      <div class="jumbotron">
        <h1>我的第一个 Bootstrap 页面</h1>
        <p>重置窗口大小,查看响应式效果!</p> 
      </div>
      <div class="row">
        <div class="col-sm-4">
          <h3>第一列</h3>
          <p>学的不仅是技术,更是梦想!</p>
          <p>再牛逼的梦想,也抵不住你傻逼似的坚持!</p>
        </div>
        <div class="col-sm-4">
          <h3>第二列</h3>
          <p>学的不仅是技术,更是梦想!</p>
          <p>再牛逼的梦想,也抵不住你傻逼似的坚持!</p>
        </div>
        <div class="col-sm-4">
          <h3>第三列</h3>        
          <p>学的不仅是技术,更是梦想!</p>
          <p>再牛逼的梦想,也抵不住你傻逼似的坚持!</p>
        </div>
      </div>
    </div>

    </body>
    </html>

    运行结果:
     

    我的第一个 Bootstrap 页面

    重置窗口大小,查看响应式效果!

    第一列

    学的不仅是技术,更是梦想!

    再牛逼的梦想,也抵不住你傻逼似的坚持!

    第二列

    学的不仅是技术,更是梦想!

    再牛逼的梦想,也抵不住你傻逼似的坚持!

    第三列

    学的不仅是技术,更是梦想!

    再牛逼的梦想,也抵不住你傻逼似的坚持!

     

    更多实例

    Bootstrap 实例2

    <div class="table-responsive">
    <table class="table table-striped table-bordered">
    <thead>
    <tr> <th>#</th>
    <th>Name</th>
    <th>Street</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>1</td>
    <td>Anna Awesome</td>
    <td>Broome Street</td> </tr>
    <tr>
    <td>2</td>
    <td>Debbie Dallas</td>
    <td>Houston Street</td>
    </tr>
    <tr> <td>3</td>
    <td>John Doe</td>
    <td>Madison Street</td>
    </tr>
    </tbody>
    </table>
    </div>

     

    点击 "尝试一下" 按钮查看它是如何工作的。

     

    感觉本站内容不错,读后有收获?

    我要小额赞助,鼓励提供更好的内容教程

    上一篇Bootstrap 教程 下一篇:Bootstrap 环境安装
    Copyright 2013-2017 Powered by 狗鱼MySQL教程,All Rights Reserved.
    广州相如计算机科技有限有限公司 版权所有 粤ICP备08130661号-4
    售前咨询:020-38667011 手机:13711588918