在前端开发使用Bootstrap框架

来源：互联网发布：西蒙斯面补数据编辑：程序博客网时间：2024/05/17 02:50

什么是Bootstrap

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。
Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。
网站：

Bootstrap环境配置

在官网上选择下载对应的文件 Bootstrap
- 已编译完成文件：最快速的开始方式、获得已编译和压缩版本的CSS, JS和图像. 没有文档和原文件。
- 源文件：直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码。
文件结构
- 预编译的Bootstrap：这就是Bootstrap的基本结构：编译后的文件可以快速应用于任何web项目。
- 源代码

Bootstrap的包含内容

Bootstrap为各式各样的东西配备有HTML, CSS和JS, 但它们可以被概括成少数几个在Bootstrap 文档顶部可见的类别.

文档章节
- 框架：全局性的样式文件，用于重置背景、链接样式、栅格系统等，并包含两个简单的布局结构。
- 基本CSS样式：常见的HTML元素, 如排版, 代码, 表格, 表单, 和按钮等样式。
- 组件：常见界面组件, 如标签和圆角, 导航, 警示, 页面标题等基本样式。
- Javascript插件：和组件类似，这些Javascript插件用来实现提示(tooltip)、弹出框(popover)、模态对话框(modal)等具有交互性的组件。
组件列表
- 按钮组 / Button groups
- 按钮下拉菜单 / Button dropdowns
- 导航, 标签, 圆角, 和列表 / Navigational tabs, pills, and lists
- 导航条 / Navbar
- 标签 / Labels
- 标记 / Badges
- 排版组件和主角单元 / Page headers and hero unit
- 缩略图 / Thumbnails
- 警告对话框 / Alerts
- 进度条 / Progress bars
- 对话框 / Modals
- 下拉菜单 / Dropdowns
- 工具提示 / Tooltips
- 弹出提示 / Popovers
- 折叠 / Accordion
- 轮播 / Carousel
- 输入提醒 / Typeahead

Bootstrap模板

在典型的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>

阅读全文

0 0