Bootstrap简介
Bootstrap是一个用于快速开发Web应用程序和网站的前端框架。是基于 HTML、CSS、JAVASCRIPT 的由 Twitter 的 Mark Otto 和 Jacob Thornton 开发。与 2011 年八月在 GitHub 上发布的开源产品。
Bootstrap常用的基本语法
容器样式：
(1).container：响应式的，指定宽度的容器~随着浏览器的尺寸变化自动变化宽度。
(2).container-fluid：铺满浏览器窗口的流式容器浏览器有多宽这个样式就有多宽
注意：不能嵌套使用。
目的：标记一个区域，这个区域中，就可以使用栅格系统布局。
在容器样式中可以定义行样式与列样式。
(1).行样式：row 表示声明一行
(2).列样式：col-md-n 表示声明一列占用n个标准列的位置。
(3).列偏移：col-md-offset-n 从左至右偏移的列数。
在Bootstrap中网页尺寸的定义有四种，分别适用于不同的屏幕尺寸。
lg:屏幕尺寸大于1170px情况下使用
md:屏幕尺寸大于970px情况下使用
sm:屏幕尺寸大于768px情况下使用
xs:屏幕尺寸小于768px情况下使用
.hidden-md:表示让修饰的元素标签在md尺寸下隐藏，其他三种尺寸下显示
.visible-md:表示让修饰的元素标签在md尺寸下显示，其他三种尺寸下隐藏 。
全局样式
关于文本：
(1). text-left 文本左对齐
(2). text-right 文本右对齐
(2). text-center 文本居中对齐。
文本颜色与背景颜色
<div class="row">
<div class="col-md-12">
<h1>文本颜色操作</h1>
<p>文本颜色同样根据bs中提供的主要色调进行确定</p>
<p class="text-muted">文本颜色同样根据bs中提供的主要色调进行确定</p>
<p class="text-primary">文本颜色同样根据bs中提供的主要色调进行确定</p>
<p class="text-success">文本颜色同样根据bs中提供的主要色调进行确定</p>
<p class="text-info">文本颜色同样根据bs中提供的主要色调进行确定</p>
<p class="text-warning">文本颜色同样根据bs中提供的主要色调进行确定</p>
<p class="text-danger">文本颜色同样根据bs中提供的主要色调进行确定</p>
<p>背景颜色的处理，根据不同的场景定义不同颜色操作</p>
<p class="bg-primary">背景颜色的处理，根据不同的场景定义不同颜色操作</p>
<p class="bg-success">背景颜色的处理，根据不同的场景定义不同颜色操作</p>
<p class="bg-info">背景颜色的处理，根据不同的场景定义不同颜色操作</p>
<p class="bg-warning">背景颜色的处理，根据不同的场景定义不同颜色操作</p>
<p class="bg-danger">背景颜色的处理，根据不同的场景定义不同颜色操作</p>
</div>
</div>
Bootstrap中提供了不同的按钮样式
<div class="row">
<div class="col-md-12">
<h1>按钮样式</h1>
<button>原始按钮</button>
<button class="btn btn-default">默认按钮</button>
<button class="btn btn-primary">蓝色按钮</button>
<button class="btn btn-success">绿色按钮</button>
<button class="btn btn-info">淡蓝色按钮</button>
<button class="btn btn-warning">黄色按钮</button>
<button class="btn btn-danger">红色按钮</button>
</div>
</div>
网友评论