极限资讯 - 文章、资讯、攻略、教程随你看!
您的位置:极限软件园网页制作HTML/Xhtml → bootstrap怎么使用 bootstrap入门教程

bootstrap怎么使用 bootstrap入门教程

发表时间:17-05-09     作者:不详     阅读:次     评论:0字体大小:A- A+

本文导读:Bootstrap是Twitter推出的一个用于前端开发的开源工具包,它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架,今天极限为大家带来了bootstrap入门教程。

电脑版

HTML5后台界面6套bootstrap后台模板打包 免费版 bootstrap后台模板类型:网络编程
大小:16.2M
版本:简体中文


获得编译后和最小化的 CSS,JS还有图像文件是最快速的启动方法。不包含文档和原始代码文件。

获得所有 CSS 和 JavaScript 原始文件,另外还包含一个说明文档的本地版本,可以直接在 GitHub 中下载最新的版本。


2. 文件结构

在下载里你可以找到下面这些文件和内容,按类型分了组,提供了编译之后和最小化两个版本。

下载编译之后的压缩包,解压以后你会得到下面这些文件:

bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css ├── js/ │ ├── bootstrap.js │ ├── bootstrap.min.js └── img/ ├── glyphicons-halflings.png └── glyphicons-halflings-white.png

这是 Bootstrap 最基础的东西:编译后的这些文件可以快速地用在所有 Web 项目上。我们提供了编译后的 CSS 和 JS (bootstrap.*),另外还有编译后并最小化的 CSS 和 JS (bootstrap.min.*)。图像使用了 ImageOptim 进化压缩。这是用在 Mac 上的压缩 PNG 图像的软件。

要注意的是,所有 JavaScript 插件都需要用到 jQuery。

3. 包含的东西

Bootstrap 有很多东西,了解它们可以参阅 Bootstrap 使用说明。

文档章节

布局

布局的网格系统的使用

基础

基础的 HTML 元素的样式,比如文字排版,代码,表格,表单,按钮,还包含一个来自 Glyphicons 的图标集。

组件

常用界面组件的基本样式,比如像选项卡,导航栏,警示,页面标题等等。

JavaScript 插件

与组件类似,工具提示,对话框等等。

组件列表

组件 和 JavaScript 插件 提供了下面这些界面元素:

按钮组

带下拉菜单的按钮

选项卡

导航栏

标签

徽章

页头与 hero 单元。

缩略图

警示

进度条

对话框

下拉菜单

工具提示

Popovers

手风琴

旋转木马

Typeahead

在以后的说明文档里,我们会详细的逐个介绍。在此之前,你可以查看这个文档来学习如何使用和定制它们。

4. 基础 HTML 模板

想要使用 Bootstrap,可以基于这个简单的 HTML 模板,这里面包含了我们在 文件结构 里提到的所有东西。

下面是一个典型的 html 文件:

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap 101 Template</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>

<h1>Hello, world!</h1>

<script src="http://code.jquery.com/jquery.js"></script>

</body>

</html>

把它变成 Bootstrap 模板,只需要包含合适的 CSS 和 JS 文件:

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap 101 Template</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Bootstrap -->

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

</head>

<body>

<h1>Hello, world!</h1>

<script src="http://code.jquery.com/jquery.js"></script>

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

</body>

</html>

哈,成功! 用这两个添加的文件,你就可以开发基于Bootstrap的应用了。

阅读本文后您有什么感想? 已有 1 人给出评价!

  • 0

    欢迎
  • 0

    白痴
  • 0

    拜托
  • 0

    惊讶
  • 0

    加油
  • 0

    鄙视
相关资讯
相关软件
最新评论
(您的评论需要经过审核才能显示)0人参与,0条评论
140

极限软件园 - 所有软件均来自网络如有版权问题请联系我们 - 蜀ICP备 05031544号
Copyright © 2004-2016 www.mxde.com online services. All rights reserved.