在前端开发使用Bootstrap框架

最新推荐文章于 2024-04-24 15:41:29 发布

Guohenghenghaha

最新推荐文章于 2024-04-24 15:41:29 发布

阅读量2.1k

点赞数 2

文章标签： bootstrap bootstrap javascript html css

本文链接：https://blog.csdn.net/Guohenghenghaha/article/details/73078442

版权

什么是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>

Guohenghenghaha

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
在前端开发使用Bootstrap框架

什么是BootstrapBootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。网站：Bootstrap环境配置在官网上选择下载对应的文件 Bootstrap已编译完成文件：最
复制链接

扫一扫