在前端开发使用Bootstrap框架

什么是Bootstrap

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

Bootstrap环境配置

  1. 在官网上选择下载对应的文件 Bootstrap

    • 已编译完成文件:最快速的开始方式、获得已编译和压缩版本的CSS, JS和图像. 没有文档和原文件。
      在前端开发使用Bootstrap框架_第1张图片
    • 源文件:直接从 from 上得到最新的 Bootstrap LESS 和 JavaScript 源代码。
      在前端开发使用Bootstrap框架_第2张图片
  2. 文件结构

    • 预编译的Bootstrap:这就是Bootstrap的基本结构:编译后的文件可以快速应用于任何web项目。
      在前端开发使用Bootstrap框架_第3张图片
    • 源代码
      在前端开发使用Bootstrap框架_第4张图片

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文件。


<html>
  <head>
    <title>Bootstrap 101 Templatetitle>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <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框架)