BootstrapBootstrap前端框架

 

时间: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 1

    <!– 新 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 2 

——引入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额组合来创设页面布局,你的始末就足以放入这几个创立好的布局中。

Bootstrap 3

——栅格参数

Bootstrap 4

以下代码达到了在差别装备中相应分歧栅格的意义:

Bootstrap 5

——栅格偏移
    偏移: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不可能被入选

Bootstrap 6
Bootstrap 7

——单选框
Bootstrap 8

<!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
        给父元素加上该属性

Bootstrap 9

Bootstrap 10

<!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“
    输入框无法一直动用栅格系统,必须给外层的父标签加栅格系统。

Bootstrap 11

Bootstrap 12

<!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
        只好给按钮的父元素加。

Bootstrap 13

Bootstrap 14

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

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

——缩略图

Bootstrap 15

Bootstrap 16

<!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>之间不可能有内容

Bootstrap 17

Bootstrap 18

<!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加,默许激活该标签 

Bootstrap 19

Bootstrap 20

<!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
        导航栏底部样式

相关文章