BootStrap学习笔记

        前言:BootStrap设计的页面可以在不同的设备上正常访问,比如:手机,pad,电脑上都可以浏览这个网页,而不影响正常的浏览的方式. 这个开发模式称为响应式页面开发

BootStrap官网:

http://www.bootcss.com

  使用方式:

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" >

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">

此处还需引入jQuery库文件
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>

BootStrap的全局CSS

BootStrap的框架提供了一系列的CSS的样式.这些样式可以直接使用.

设置全局 CSS 样式；基本的 HTML 元素均可以通过 class 设置样式并得到增强效果；还有先进的栅格系统。

 布局容器：

.container 固定宽度并支持响应式布局的容器

<div class="container ">

.container -fluid 100%宽度

栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

使用.row样式定义栅格的行.

定义列：.col-lg-n.col-md-n  .col-sm-n   .col-xs-n

组件

无数可复用的组件，包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。