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

相关文章