文档章节

Bootstrap 简介

我有答案
 我有答案
发布于 2016/01/25 12:38
字数 614
阅读 55
收藏 2

什么是 Bootstrap?

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

历史

Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的。Bootstrap 是 2011 年八月在 GitHub 上发布的开源产品。

为什么使用 Bootstrap?

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

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

    Internet ExplorerFirefoxOperaGoogle ChromeSafari

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

  • 响应式设计:Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。更多有关响应式设计的内容详见 Bootstrap 响应式设计

    响应式设计

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

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

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

  • 它是开源的。

Bootstrap 包的内容

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

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

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

  • JavaScript 插件:Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件,也可以逐个包含这些插件。这将在 Bootstrap 插件 部分详细讲解。

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


在线实例

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

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

<div class="container">
  <p>Create a responsive table with alternating cell background color:</p> 
  
  <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>

</div>

原文地址:http://www.phplearn.cn/bootstrap/bootstrap-intro.html

本文转载自:http://www.phplearn.cn/bootstrap/bootstrap-intro.html

上一篇: Bootstrap 环境安装
下一篇: Bootstrap 教程
我有答案
粉丝 6
博文 170
码字总数 943
作品 0
郑州
程序员
私信 提问
swagger-bootstrap-ui 1.7.8发布,Swagger前端UI实现

swagger-bootstrap-ui 1.7.8 发布了。swagger-bootstrap-ui 是 Swagger 的前端 UI 实现,目的是替换 Swagger 默认的 UI 实现 Swagger-UI,使文档更友好一点儿 swagger-bootstrap-ui 1.7.8 主...

八一菜刀
2018/08/03
1K
5
Bootstrap Table简单例子学习

1、Bootstrap Table简介 Bootstrap Table是基于Bootstrap的轻量级表格插件,只需要简单的配置就可以实现强大的支持固定表头、单复选、排序、分页、搜索以及自定义表头等功能。 2、所需要的库...

Elven_Xu
2015/12/31
4.3K
2
Web前端 — Bootstrap(1)

Bootstrap本次知识点: 1.Bootstrap简介 2.什么是Bootstrap 3.为什么使用Bootstrap 4.Bootstrap的结构 5.BootStrap的基本模板 1.Bootstrap简介 Bootstrap,来自Twitter(全国最大的微博 )的两...

凤囚凰丶
2018/06/01
0
0
(十二)Flask 学习 —— 换装

换装 简介 如果你一直追随着 microblog 应用程序,你可能发现我们并没有在应用程序的外观上花很多的时间。到目前为止,我们使用的模板是基本的,并且没有风格而言。这也是有帮助的,当我们编...

水果糖
2016/02/26
113
0
Bootstrap Material 0.2.1 发布

Bootstrap Material 0.2.1 已经发布,是个Bug修复版本。 Bootstrap Material 不是个新的项目,它自从今年8月以来就一直在活跃发展中。 最新的版本号为0.2.1,于2014年12月5日发布。 官方简介...

Fang2hou
2014/12/13
4.3K
5

没有更多内容

加载失败,请刷新页面

加载更多

vue 2打包注意点

使用npm run build打包之后往往直接本地运行,路径类似这样:http://127.0.0.1:5500/xa/dist/index.html 或者http://127.0.0.1:5500/dist/index.html。然后页面打开是空白的,打开控制台查看...

牧云橙
17分钟前
4
0
归并排序

1.原理图 2.代码 public static void merge(int []a,int left,int mid,int right){ int []tmp=new int[a.length];//辅助数组 int p1=left,p2=mid+1,k=left;//p1、p2是检测......

wen123
21分钟前
4
0
css实现透明的两种方法

一、opacity:0~1 值越高,透明度越低: div{opacity:0.5 } 选择器匹配到的节点们,包括节点们的孩子节点,都会实现%50透明,另 0.5 可直接写成 .5 二、rgba(0~255,0~255,0~255,0~1) r...

Bing309
24分钟前
4
0
Tomcat 配置访问路径

此处只是部署完成后idea打开的默认路径,并非项目部署路径, 此处才是项目实际部署路径,可以有多个项目部署路径,idea可以配置默认打开一个

Aeroever
27分钟前
4
0
将ApiBoot Logging采集的日志上报到Admin

通过ApiBoot Logging可以将每一条请求的详细信息获取到,在分布式部署方式中,一个请求可能会经过多个服务,如果是每个服务都独立保存请求日志信息,我们没有办法做到统一的控制,而且还会存...

恒宇少年
28分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部