BootStrap入门

Bootstrap 是目前最流行的一套前端开发框架,集成了 HTML、CSS 和 JavaScript 技术,为网页快速开发提供了包括布局、网格、表格、按钮、表单、导航、提示、分页、表格等组件。
即使你只会html和css和js,也可以轻轻松松做出简单美丽的布局。

Bootstrap 是最受欢迎的 Web 前端框架之一,用于开发响应式布局、移动设备优先的 Web 项目。

为什么这么受欢迎呢?

  1. Bootstrap 出自 Twitter
    由大公司发布,并且完全开源,自然久经考验,减少了测试的工作量。这也就是我们经常说到的站在巨人的肩膀上,不重复造轮子。

  2. Bootstrap 代码有着良好的规范
    在使用 Bootstrap 时也有助于我们养成良好的编码习惯,在 Bootstrap 的基础之上创建项目,日后代码的维护也变得异常简单清晰。

  3. Bootstrap 是基于 Less 打造的
    Bootstrap 也有 Sass 版本。Less/Sass 是 CSS 的预处理技术,正因如此,它一经推出就包含了一个非常实用的 Mixin 库供用户调用,使得开发者在开发过程中对 CSS 的处理更加简单。

  4. 响应式开发
    Bootstrap 响应式的网格系统(Grid System)非常先进,它已经帮用户搭建好了实现响应式设计的基础框架,并且非常容易修改,如果你是一个新手,Bootstrap 可以帮助你在非常短的时间内上手响应式布局的设计。

  5. 丰富的组件与插件
    Bootstrap 的 HTML 组件和 JavaScript 组件非常丰富,并且代码简洁,非常易于修改,如果你觉得它设计的样子不是自己所想要的,你完全可以在其基础之上修改成自己想要的任何样子。由于 Bootstrap 的火爆,又出现了不少围绕 Bootstrap 而开发的 JavaScript 插件,这就使得开发的工作效率得到极大提升。

不止于此,
Bootstrap 是目前最好的前端开发工具包之一,它拥有以下特色。

  1. 支持响应式设计
    从 Bootstrap 2 开始,提供完整的响应式特性。所有的组件都能根据分辨率和设备灵活缩放,从而提供一致性的用户体验。
  2. 适应各种技术水平
    Bootstrap 适应不同技术水平的从业者,无论是设计师,还是程序开发人员,不管是骨灰级别的大牛,还是刚入门槛的菜鸟,使用 Bootstrap 既能开发简单的小东西,也能构造更为复杂的应用。
  3. 跨设备、跨浏览器
    最初设想的 Bootstrap 只支持现代浏览器,不过新版本已经能支持所有主流浏览器,甚至包括 IE 7。从 Bootstrap 2 开始,提供对平板和智能手机的支持。
  4. 提供 12 列网格布局
    网格系统不是万能的,不过在应用的核心层有一个稳定和灵活的网格系统可以让开发变得更简单。
  5. 样式化的文档
    与其他前端开发工具包不同,Bootstrap 优先设计了一个样式化的使用指南,不仅可以用来介绍特性,更可以用来展示最佳实践、应用以及代码示例。
  6. 不断完善的代码库
    尽管经过 gzip 压缩后,Bootstrap 只有 10KB 大小,但是它却仍是最完备的前端工具包之一,提供了几十个全功能的随时可用的组件。
  7. 可定制的 jQuery 插件
    任何出色的组件设计,都应该提供易用、易扩展的人机界面。Bootstrap 为此提供了定制的 jQuery 内置插件。
  8. 选用 LESS 构建动态样式
    当传统的枯燥 CSS 写法止步不前时,LESS 技术横空出世。LESS 使用变量、嵌套、操作、混合编码,帮助用户花费很少的时间成本,编写更快、更灵活的 CSS。
  9. 支持HTML 5
    Bootstrap 支持 HTML 5 标签和语法,可在 HTML 5 文档类型基础上进行设计和开发。
  10. 支持CSS 3
    Bootstrap 支持 CSS 3 所有属性和标准,逐步改进组件以达到最终效果。
  11. 提供开源代码
    Bootstrap 全部托管于GitHub,完全开放源代码,并借助 GitHub 平台实现社区化开发和共建。

Bootstrap 的使用越来越广泛,而且越来越多的人为 Bootstrap 开发各种扩展插件来增强 Bootstrap 的功能,下面是一些常用的插件。

  1. Font Awesome
插件地址:http://fontawesome.dashgame.com/

Font Awesome 提供可缩放的矢量图标,Font Awesome 是一套专为 Bootstrap 设计的图标字体,几乎囊括了网页中可能用到的所有图标,可以使用 CSS 所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其他任何支持的效果。
2) Flat UI

插件地址:http://www.bootcss.com/p/flat-ui/

Flat UI 由 Designmodo 提供。Flat UI 包含了许多 Bootstrap 提供的组件,外观上更加漂亮,所以 Flat UI 迅速普及开来。
3) Bsie

插件地址:http://www.bootcss.com/p/bsie/

Bsie 弥补了 Bootstrap 对 IE 6 的不兼容。目前,Bsie 能在 IE 6 上支持大部分 Bootstrap 的特性,但还有一些无法支持。
4) Sco.js

插件地址:http://www.bootcss.com/p/sco.js/

Sco.js 创造的起因是为了增强 Bootstrap 中现有的 JavaScript 组件,并且也为了满足项目的特定需求。
5) jQuery-UI-Bootstrap

插件地址:http://www.bootcss.com/p/jquery-ui-bootstrap/

jQuery-UI-Bootstrap 将 Bootstrap 应用到了 jQuery UI 控件上,让用户在使用 jQuery UI 控件时也能充分利用 Bootstrap 的样式,而且不会出现样式不统一的情况。
6) HTML 5 Boilerplate

插件地址:http://www.bootcss.com/p/html5boilerplate/

HTML 5 Boilerplate 是最流行的 Web 开发前端模板,可以快速构建健壮、适应性强的 App 或网站。
7) Metro UI CSS

插件地址:http://www.bootcss.com/p/metro-ui-css/

Metro UI CSS 是一套用来创建类似于 Windows 8 Metro UI 风格网站的样式。
8) Chart.js

插件地址:https://chartjs.bootcss.com/

Chart.js 是一个简单、灵活的 JavaScript 图表工具,是专门为设计和开发人员准备的。

好的开发工具:

  1. Layoutit
    Layoutit(http://www.bootcss.com/p/layoutit/添加链接描述))是一个在线工具,它可以简单而又快速地搭建 Bootstrap 响应式布局,操作基本是使用拖动方式来完成的,而元素都是基于 Bootstrap 框架集成的,所以这个工具很适合网页设计师和前端开发人员使用。
  2. ibootstrap
    ibootstrap(http://www.ibootstrap.cn/)也是一个在线工具,和 Layoutit 工具类似。ibootstrap 适配了很多浏览器,同时可以简单可视化编辑和生成,有基本的布局设置、基本的 CSS 布局、工具组件和 JavaScript 工具,操作基本上是使用拖动方式来完成的。

Bootstrap 4 提供的Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大插件系统,能够快速开发出原型或者构建整个 App。

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/bootstrap5/css/bootstrap.min.css" >
  <title>第一次bootstrap</title>
  <script src="/bootstrap5/js/bootstrap.bundle.min.js"ref="stylesheet" ></script>
</head>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值