Ywc's blog

前端框架之Bootstrap学习

Word count: 758 / Reading time: 2 min
2020/10/13 Share

学习记录

标签 name=”viewport” 详解

排版

Bootstrap概述

  在前端世界,有个叫Bootstrap的家伙,,是twitter 开源出来的一套前端框架,利用Ta可以快速开发网站界面,它的特点就是比自己从头写简单,直观,方便,快捷,省劲。

  凡是使用过Bootstrap的开发者,都不在乎做这么两件事情:复制and粘贴。哈哈~,是的使用Bootstrap非常简单,但是在复制粘贴之前,需要先对Bootstrap的用法一一熟悉之后我们才开始干活!

  Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap是基于HTML,CSS,JavaScript的前端框架,它简洁灵活,使得Web开发更加快捷。它由Twitter的设计师Mark Otto 和 Jacob Thornton 合作开发,是一个CSS / HTML 框架。Bootstrap提供了优雅的 HTML 和CSS规范,它是由动态的CSS语言Less写成的。

它用于开发响应式布局、移动设备优先的 WEB 项目。

 我们去bootcdn (https://www.bootcdn.cn/ )。会发现Bootstrap是星最多的前端框架之一。

特性

  • 响应式设计
  • 栅格布局
  • 完整的类库
  • jQuery插件
  • 不同的使用场景

包含文件

​ Bootstrap 提供了两种形式的压缩包,在下载下来的压缩包内可以看到以下目录和文件,这些文件按照类别放到了不同的目录内,并且提供了压缩与未压缩两种版本。

  • 【预编译版】

  下载压缩包之后,将其解压缩到任意目录即可看到以下(压缩版的)目录结构:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.css.map
│ ├── bootstrap.min.css
│ ├── bootstrap.min.css.map
│ ├── bootstrap-theme.css
│ ├── bootstrap-theme.css.map
│ ├── bootstrap-theme.min.css
│ └── bootstrap-theme.min.css.map
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
├── glyphicons-halflings-regular.woff
└── glyphicons-halflings-regular.woff2

​ 上面展示的就是 Bootstrap 的基本文件结构:预编译文件可以直接使用到任何 web 项目中。提供了编译好的 CSS 和 JS (bootstrap.*) 文件,还有经过压缩的 CSS 和 JS (bootstrap.min.*) 文件。同时还提供了 CSS 源码映射表 (bootstrap.*.map) ,可以在某些浏览器的开发工具中使用。同时还包含了来自 Glyphicons 的图标字体,在附带的 Bootstrap 主题中使用到了这些图标。

Bootstrap排版——HTML元素的样式重定义

 Bootstrap表格

  Bootstrap表单

 Bootstrap图像

Bootstrap栅格系统

  Bootstrap辅助类

组件

Bootstrap图标

## Bootstrap下拉菜单

## Bootstrap按钮组

##  Bootstrap按钮式下拉菜单

##  Bootstrap输入框组

##  Bootstrap导航

##  Bootstrap导航条

##  Bootstrap分页

##  Bootstrap提示信息(标签、徽章、巨幕和页头)

##  Bootstrap缩略图

##  Bootstrap警告框

##  Bootstrap进度条

##  Bootstrap媒体对象

##  Bootstrap列表组

##  Bootstrap面板

##  Bootstrap洼地

js插件

## Bootstrap插件概述

## Bootstrap模态弹出框

##  Bootstrap滚动监控器

##  Bootstrap选项卡

##  Bootstrap提示框

##  Bootstrap弹出框

##  Bootstrap按钮插件  

##  Bootstrap手风琴效果

##  Bootstrap图片轮播

##  Bootstrap自动定位浮标

Reference

Bootstrap学习记录

https://www.cnblogs.com/wj-1314/p/9551426.html

CATALOG
  1. 1. 学习记录
  • 排版
    1. 1. Bootstrap概述
      1. 1.1. 特性
      2. 1.2. 包含文件
    2. 2. Bootstrap排版——HTML元素的样式重定义
    3. 3.  Bootstrap表格
    4. 4.   Bootstrap表单
    5. 5.  Bootstrap图像
    6. 6. Bootstrap栅格系统
    7. 7.   Bootstrap辅助类
  • 组件
    1. 1. Bootstrap图标
  • js插件
  • Reference