Bootstrap前端框架

时间：2016-7-20 17:31

——Bootstrap介绍
Bootstrap是Twitter公司的两名前段设计师设计的，基于html css javascript的前段框架。

——Bootstrap特点
简单易学，学习了html css javascript就可以学习Bootstrap。
Bootstrap以移动开发优先。
Bootstrap所有的主流浏览器都支持，解决了浏览器的兼容问题。

——Bootstrap的环境
http://v3.bootcss.com
从以上网站下载Bootstrap
下载后解压看到三个文件夹

js文件夹中必须有jquery.main.js文件，可以通过下面的网址来下载。

——引入Bootstrap环境（二）
在head标签中添加如下代码：

——以移动设备窗口优先
在head标签中添加如下代码：
      
      <meta name="viewport" content="width-device-width,initial-scale=1,user-scalable=no">
      name="viewport"：视窗窗口
      content="width=device-width：宽度与移动设备宽度一致
      initial-scale=1：初始界面效果为一比一
      user-scalable=no：禁止用户缩放

——Bootstrap布局容器
    <div class="container"> //固定宽度 1170px
      内容
</div>

<div class="container-fluid"> //固定宽度为100%
      内容
</div>

——排版标签
<h1></h1>
...
<h6></h6>

class="page-header"
      设置页头，给标题加一个分割线
<small></small>
      副标题，小一号
<big></big>
      副标题，大一号
<strong></strong>
      加粗
<em></em>
      倾斜
<die></dle>
      删除线

——文本对齐方式
class="text-left"
      左对齐
class="text-center"
      居中对齐
class="text-right"
      右对齐
class="text-uppercase"
      英文大写
class="text-lowercase"
      英文小写
class="text-capitalize"
      首字母大写

——列表
class="list-unstyled"
      去掉列表之前的符号和原有格式
class="list-inline"
      将纵向排列的列表改为横向排列

自定义列表：
      class="dl-horizontal"
          设置变层横向排列
      <dl class="dl-horizontal">
          <dt>标题</dt>
          <dd>内容</dd>
      </dl>

——表格
class="table"
      表格的一个基类，其他样式必须在.table的基础上进行添加
class="table-bordered"
      给表格加外边框
class="table-hover"
      鼠标悬停效果，当鼠标移动到行或单元格中的时候，行会变色
class="table-striped"
      “斑马线”效果，表格的单元格隔行换色
class="table-condensed"
      单元格缩小，padding值减半

——响应式表格
class="table-responsive"
      给table的父元素加上该属性
      以移动设备显示为优先，如果内容不能完全显示，会出现响应式的滚动条

——表格状态颜色
class="active"
      鼠标悬停在行或单元格上时所设置的颜色
class="success"
      标识成功或积极的动作（绿色）
class="info"
      标识普通的提示信息或动作（蓝色）
class="warning"
      标识警告或需要用户注意的动作（黄色）
class="danger"
      标识危险的动作（红色）

——响应式图片
class="img-responsive"
      使图片跟随窗口大小变化而变化
  class="img-circle"
      将图片变为圆形
  class="img-rounded"
      将图片四个角变为圆角
  class="img-thumbnail"
      给图片外部加一个圆角的边框

——栅格系统
栅格系统一定要放在容器中
<div class="container"></div>
<div class="container-fluid"></div>

Bootstrap提供了一套响应式，移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
栅格系统用于通过一系列的行（row）与列（col）d额组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

——栅格参数

以下代码达到了在不同设备中相应不同栅格的效果：

——栅格偏移
偏移：offset
注意：只能向右偏移
语法：col-xs/sm/md/lg-offset-偏移量
例如：col-md-offset-2 //PC中等屏幕向右偏移2列
当偏移量超出本行剩余长度时，会另起一行，从0开始计算偏移量。

——栅格排序
语法：
        col-xs/sm/md/lg-pull：向左偏移
        col-xs/sm/md/lg-push：向右偏移

——辅助类
——情景文本颜色
.text-primary
      初始颜色
.text-muted
      柔和
.text-success
      成功
.text-info
      信息
.text-waring
      警告
.text-danger
      危险

——背景文本颜色
.bg-success
      成功
.bg-info
      信息
.bg-primary
      初始（蓝色）
.bg-danger
      危险
.bg-waring
      警告

——其他类
下拉三角
      <span class="caret"> </span>
快速浮动
      .pull-left：左浮动
      .pull-right：
清除浮动
      .clearfix
      给父盒子加该属性，相当于<div style=clear:both"> </div>

——表单
label标签
      通过for将标签与表单关联起来
.form-group
      将表单分组，使其之间有距离感
.form-control
      美化表单框
.checkbox-inline
      美化复选框
.disabled
      设置label不能被选中

——单选框

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

</head>

<body>

<form>

<div class="col-lg-offset-8 col-sm-offset-8">
//为输入框分组

<div class="form-group">
//for属性将label和input关联到一起

<label for="cemail">Email</label>
//form-control美化输入框

</div>

<label for="pwd">Password</label>

</div>

<label for="tel">Telephone</label>

</div>

<div class="form-group">
//checkbox美化浮选按钮的label

<input type="checkbox" name="hobby">Basketball

</label>

<input type="checkbox" name="hobby">Football

</label>
//设置不可编辑

<input type="checkbox" name="hobby" disabled>Sleep

</label>

</div>

<input type="radio" name="sex" id="sex" value="male">male

</label>

<input type="radio" name="sex" id="sex" value="female">female

</label>

</div>

</div>
</div>

</form>

</div>

</body>

</html>

====================================================================================================

——输入框组
.input-group-addon
给需要被组合的标签加上该属性
.input-group
给父元素加上该属性

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

</head>

<body>

<form>

<span class="input-group-addon">Search</span>

</div>

<div class="input-group-addon">Search Content</div>

</div>

</span>

</div>

</form>

</div>

</body>

</html>

==============================================================================================

——响应式表单
.form-horizontal
使表单具备响应式效果，前提是必须介个栅格系统进行操作。
如果在表单中使用栅格系统，则可以省略行”row“
输入框不能直接使用栅格系统，必须给外层的父标签加栅格系统。

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

</head>

<body>

<label for="username" class="col-md-2 col-sm-2 col-xs-2 text-right">Account</label>

</div>

<label for="pwd" class="col-xs-2 col-sm-2 col-md-2 text-right">Password</label>

</div>

</form>

</div>

</body>

</html>

================================================================================================

——按钮
可以加按钮效果的有哪些标签？
      <input type="button" value="按钮" />
      <button>按钮</button>
      <a href="#">按钮</a>

.btn是按钮样式的基类（也就是说在使用其他样式之前必须使用btn基类）

.btn-primary
.btn-default
.btn-success
.btn-warning
.btn-danger
.active
      激活状态
.btn-lg
      大按钮
.btn-sm
      中等按钮
.btn-xs
      小按钮

——按钮组
.btn-group
      只能给按钮的父元素加。

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

</head>

<body>

<button class="btn">Confirm delete?</button>

<a class="btn btn-success btn-lg" href="#">change</a>

<a class="btn btn-danger btn-sm" href="#">change</a>

<a class="btn btn-default btn-xs" href="#">change</a>

<a class="btn btn-primary" href="#">change</a>

<a class="btn btn-warning active" href="#">change</a>

<button class="btn btn-success">Search</button>

<button class="btn btn-success">Change</button>

<button class="btn btn-success">Remove</button>

</div>

</body>

</html>

==========================================================================================

——缩略图

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

</head>

<body>

<h3 class="bg-info">Image 01</h3>

<p class="text-muted">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>

</div>

<button class="btn btn-success btn-sm">Button01</button>

<button class="btn btn-info btn-sm">Button02</button>

</div>

</body>

</html>

===================================================================================

——下拉菜单

.dropdown-menu
      给下拉列表中的内容，也就是给ul加样式
.dropdown
      给父元素，也就是包含触发的按钮和下拉列表加样式。
data-toggle
      按钮的触发器，给按钮加。
      触发器：点谁给谁加。
.dropdown-menu-left
      下拉列表左对齐
.dropdown-menu-right
      下拉列表右对齐
.divider
      给li加，增加一条分割线
      <li>和</li>之间不能有内容

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

</head>

<body>

<h2 class="page-header">xialaliebiao</h2>

</button>

<li><a href="#">QQLogin</a></li>

<li><a href="#">WechatLogin</a></li>

</ul>

</div>

</body>

</html>

==========================================================================================

——标签页
.nav
      是标签页的一个基类，给ul加
.nav-tabs
      普通的标签页
.nav-pills
      胶囊标签
.nav-stacked
      给li加，使标签纵向排列
.active
      给li加，默认激活该标签

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

</head>

<body>

</ul>

</ul>

</ul>

</div>

</body>

</html>
===========================================================================================

——导航栏
.navbar
      导航栏的基类，用于nav元素
.navbar-default
      导航栏默认样式，用于nav元素
.container
      是nav的子元素，导航栏内容都放入其中
.navbar-header
      导航栏头部样式

posted @ 2017-02-07 17:30 WWWYC 阅读(281) 评论(0) 编辑收藏举报

WWWYC

Bootstrap前端框架

公告