码迷,mamicode.com
首页 > 其他好文 > 详细

Bootstrap

时间:2019-06-04 22:38:18      阅读:131      评论:0      收藏:0      [点我收藏+]

标签:插件   sas   模态框   优先   响应式布局   ext   htm   hover   live   

## 一、Bootstrap简介

### 1. Bootstrap是什么?

? Bootstrap是Twitter推出的一个开源的前端开发框架

? 基于HTML、CSS、JavaScript,代码简洁、视觉优美,用来快速开发基于PC及移动端的Web页面,更迅速、简单

? Bootstrap官网:http://getbootstrap.com/

? 中文网:http://www.bootcss.com/

? 版本:v3.0、v4.0

### 2. 特点

- 跨设备、跨浏览器

兼容所有主流浏览器,包括IE7、IE8等

- 响应式布局

支持PC端、移动端(手机、PAD),移动设备优先

- 丰富的组件

表单、下拉菜单、导航、标签、徽章、面板等

- 内置jQuery插件
模态框、工具提示、弹出框、轮播图等

- 支持动态样式

LESS、SASS,可以使用变量、嵌套、混合等,编写样式更快、更灵活

## 二、起步

### 1. 下载

? CDN:Content Delivery Network,内容分发网络,提供稳定、快速的资源访问服务。

? **Bootstrap依赖于jQuery库**

### 2. 基本模板

? HTML5文档类型

? 移动设备优先

? 基本的全局样式

```css
font-size: 14px;
line-height: 20px;
color: #333;
a{color: #337ab7; text-decoration: none;}
a:hover{color: #23527c;text-decoration: underline;}
```

? 布局容器

```html
.container类 固定宽度,支持响应式布局的容器
.container-fluid类 100%宽度,占据整个窗口的容器

Bootstrap

标签:插件   sas   模态框   优先   响应式布局   ext   htm   hover   live   

原文地址:https://www.cnblogs.com/hamao/p/10976356.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!