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
    下载后解压看到三个文件夹
    

    <!-- 新 Bootstrap 核心 CSS 文件 -->

    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

 

    <!-- 可选的Bootstrap主题文件（一般不用引入） -->

    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

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

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->

    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

 

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

 

——引入Bootstrap环境（二）
    在head标签中添加如下代码：
    <!-- 新 Bootstrap 核心 CSS 文件 -->

    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

 

    <!-- 可选的Bootstrap主题文件（一般不用引入） -->

    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->

    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

 

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->

    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

——以移动设备窗口优先
    在head标签中添加如下代码：
        <!-- 界面大小和设备的屏幕大小一致，初始大小为1:1，禁止用户缩放 -->
        <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>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

    <!-- 引入外部的bootstrap中的css文件 -->

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

    <!-- jQuery文件，必须在bootstrap.min.js之前引入 -->

    <script type="text/javascript" src="js/jquery.min.js"></script>

    <!-- 再引入bootstrap。min.js文件 -->

    <script type="text/javascript" src="js/bootstrap.min.js"></script>

</head>

<body>

<div class="container" style="background:#e6e6e6;">

    <form>

        <div class="row">

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

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

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

                        <input type="email" name="cemain" id="cemail" class="form-control">

                </div>

            </div>

        </div>

        <div class="row">

            <div class="col-lg-offset-8 col-sm-offset-8">

                <div class="form-group">

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

                        <input type="password" name="pwd" id="pwd" class="form-control">

                </div>

            </div>

        </div>

        <div class="row">

            <div class="col-lg-offset-8 col-sm-offset-8">

                <div class="form-group">

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

                        <input type="text" name="tel" id="tel" class="form-control">

                </div>

            </div>

        </div>

        <div class="row">

            <div class="col-lg-offset-8 col-sm-offset-8">

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

                    <label class="checkbox-inline">

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

                </label>

                <label class="checkbox-inline">

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

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

                <label class="checkbox-inline disabled">

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

                </label>

            </div>

        </div>

    </div>

    <div class="row">

        <div class="col-lg-offset-8 col-sm-offset-8">

            <div class="form-group">

                <label class="checkbox-inline">

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

                </label>

                <label class="checkbox-inline">

                    <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>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

<!-- 引入外部的bootstrap中的css文件 -->

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

<!-- jQuery文件，必须在bootstrap.min.js之前引入 -->

<script type="text/javascript" src="js/jquery.min.js"></script>

<!-- 再引入bootstrap。min.js文件 -->

<script type="text/javascript" src="js/bootstrap.min.js"></script>

</head>

<body>

<div class="container" style="background:#e6e6e6;">

<form>

<div class="form-group">

<div class="input-group">

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

<input type="search" name="sc" id="sc" class="form-control">

</div>

</div>

 

<div class="form-group">

<div class="input-group">

<input type="search" name="se" id="se" class="form-control">

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

</div>

</div>

 

<div class="input-group">

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

<span class="glyphicon glyphicon-user"></span>

</span>

<input type="text" name="username" class="form-control">

</div>

</form>

<span class="glyphicon glyphicon-search"></span>

<span class="glyphicon glyphicon-heart"></span>

</div>

</body>

</html>

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


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

<!DOCTYPE html>

<html>

<head>

    <title>Document</title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

    <!-- 引入外部的bootstrap中的css文件 -->

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

    <!-- jQuery文件，必须在bootstrap.min.js之前引入 -->

    <script type="text/javascript" src="js/jquery.min.js"></script>

    <!-- 再引入bootstrap。min.js文件 -->

    <script type="text/javascript" src="js/bootstrap.min.js"></script>

</head>

<body>

<div class="container" style="background:#e6e6e6;">

<form class="form-horizontal">

    <div class="form-group">

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

            <div class="col-md-10 col-sm-10 col-xs-10">

                <input type="text" name="username" id="username" class="form-control">

            </div>

        </div>

 

        <div class="for-group">

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

                <div class="col-md-10 col-sm-10 col-xs-10">

                    <input type="password" name="pwd" id="pwd" class="form-control">

                </div>

            </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>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

<!-- 引入外部的bootstrap中的css文件 -->

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

<!-- jQuery文件，必须在bootstrap.min.js之前引入 -->

<script type="text/javascript" src="js/jquery.min.js"></script>

<!-- 再引入bootstrap。min.js文件 -->

<script type="text/javascript" src="js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

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

<input class="btn" type="button" name="change" value="change">

<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>

 

<div class="btn-group">

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

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

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

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

</div>

</div>

 

</body>

</html>

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


——缩略图

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

<!-- 引入外部的bootstrap中的css文件 -->

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

<!-- jQuery文件，必须在bootstrap.min.js之前引入 -->

<script type="text/javascript" src="js/jquery.min.js"></script>

<!-- 再引入bootstrap。min.js文件 -->

<script type="text/javascript" src="js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

<div class="row">

<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">

<div class="thumbnail">

<img src="1.jpg" class="img-responsive">

<div class="caption">

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

<p class="text-muted">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>

</div>

<div class="text-right">

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

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

</div>

</div>

</div>

</div>

</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>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

<!-- 引入外部的bootstrap中的css文件 -->

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

<!-- jQuery文件，必须在bootstrap.min.js之前引入 -->

<script type="text/javascript" src="js/jquery.min.js"></script>

<!-- 再引入bootstrap。min.js文件 -->

<script type="text/javascript" src="js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

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

<div class="dropdown">

<button class="btn btn-default" data-toggle="dropdown">

Login<span class="caret"></span>

</button>

<ul class="dropdown-menu">

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

<li class="divider"></li>

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

</ul>

</div>

</div>

 

</body>

</html>

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

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

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

<!-- 引入外部的bootstrap中的css文件 -->

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

<!-- jQuery文件，必须在bootstrap.min.js之前引入 -->

<script type="text/javascript" src="js/jquery.min.js"></script>

<!-- 再引入bootstrap。min.js文件 -->

<script type="text/javascript" src="js/bootstrap.min.js"></script>

</head>

<body>

<div class="container" style="background:#e6e6e6;">

<h2>Tag1</h2>

<ul class="nav nav-tabs nav-stacked">

<li class="active"><a href="">Home</a></li>

<li><a href="">Home</a></li>

<li><a href="">Home</a></li>

</ul>

 

<h2>Tag1</h2>

<ul class="nav nav-pills">

<li class="active"><a href="">Home</a></li>

<li><a href="">Home</a></li>

<li><a href="">Home</a></li>

</ul>

 

<ul class="nav nav-pills nav-stacked">

<li class="active"><a href="">Home</a></li>

<li><a href="">Home</a></li>

<li><a href="">Home</a></li>

</ul>

 

</div>

</body>

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

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