web前端-Bootstrap_web前端 bootstrap-CSDN博客

本文链接：https://blog.csdn.net/jinchenpeng/article/details/107177838

1.什么是Bootstrap？

Bootstrap是一组来自 Twitter，对HTML、CSS和JAVASCRIPT进行了封装的前端框架。Bootstrap对HTML、CSS和JAVASCRIPT进行了封装，使它们使用起来更方便。我们只需要使用它已经设定好的类，或规则，即可快速应用它提供的功能。

响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。

2.Bootstrap的组成

全局 CSS 样式

bootstrap提供了很多具有特殊含义的类，基本的 HTML 元素均可以通过使用这些类，来获得bootstrap的增强效果（栅格系统）

组件

bootstrap提供了很多封装好的具有特定功能的模块。这些模块被叫做【组件】。无数可复用的组件让bootstrap对前端开发的支持性变得更好。（组件包括包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。）

javascript插件

javascript插件为 Bootstrap 的组件赋予了“生命”。可以简单地一次性引入所有插件，或者逐个引入到你的页面中。

3.Bootstrap的使用

a.下载

点击bootstrap3中文文档，点击下载bootstrap3

b.下载“用于生产环境的”

下载完后它有如右三个文件夹

c.在html文档中引入bootstrap

a) bootstrap.min.css

b) bootstrap.min.js

c) 引入jquery代码

引入css中的“bootstrap.min.css”和js文件夹下的bootstrap.min.js。由于bootstrap是基于jquery的，所以在引入”bootstrap.min.js”前，要先引入jquery代码。并且js和jquery要放在body的最底部。

d. 使用html5的文档类型声明

<!doctype html>，bootstrap用到了h5，所以它包含一个html5版本的DOCTYPE

e. 添加适用于移动端的meta标签

f.官网找到基本模板拷贝

4.Bootstrap的栅格系统

<div class="container">      //容器
   <div class="row">    //栅格中的行
      <div class="col-*-*"></div>     //行下的直接元素列
      <div class="col-*-*"></div>      
   </div> 
</div>

web前端-Bootstrap

1.什么是Bootstrap？

2.Bootstrap的组成

3.Bootstrap的使用

4.Bootstrap的栅格系统

5.更多控件