zoukankan      html  css  js  c++  java
  • Bootstrap框架

    Bootstrap(一)

    1、框架简介

    Bootstrap是目前最流行的前端开发框架,由twitter的两位前员工Mark Otto和Jacob Thornton 在2010年8月创建。它包含了很多常用的css和js,jquery集合。

    Bootstrap优势:

    1)支持响应式开发。

    2)丰富的组件。

    3)界面美观大方。
     

    2、新手入门

    1)下载Bootstrap

    http://www.bootcss.com/

    2)html标准模版

    <!DOCTYPEhtml>

    <htmllang="zh-cn">

      <head>

    <metacharset="utf-8">

    <!--用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式-->

    <metahttp-equiv="X-UA-Compatible" content="IE=edge">

    <!--默认情况下,ui布局和宽度和移动设备的宽度一致,缩放大小为原始大小(Mobile first)-->

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

        <title>Bootstrap基础模版 </title>

        <!-- Bootstrap -->

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

        <!—以下两个插件适用于在ie8支持html5元素和媒体查询的,如果不用可移除-->

        <!--[if lt IE 9]>

          <scriptsrc="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>

          <scriptsrc="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

        <![endif]-->

      </head>

      <body>

        <h1>你好,世界!</h1>

        <!—jquery类库文件-->

        <scriptsrc="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>

        <!—Bootstrap的js插件-->

        <scriptsrc="js/bootstrap.min.js"></script>

      </body>

    </html>

    3、Bootstrap里面用到的css语法

    1)属性选择器

    选择器

    用法

    [attr=value]

    该属性有指定的确切值

    [attr~=value]

    该属性值必须是多个用空格隔开的值,比如class=”title featured home”,而且这些值中的一个必须是指定的值”value”

    [attr|=value]

    属性的值是”value”或者以“value”开始并立即跟上一个”-”字符,也就是”value-”,譬如:lang=”zh-cn”

    [attr^=value]

    以…开头

    [attr$=value]

    以….结束

    [attr*=value]

    包含

    2)子选择器

    .table>tr>td

    3)兄弟选择器

    .nav>li+li{margin-left:2px;} /*导航条里面设置相连的li之间的间距*/

    .article h1~p /*h1后面的p兄弟节点*/

    4)常用的伪类

    属性

    描述

    :hover

    鼠标划过的状态

    :focus

    元素拥有焦点的状态

    :first-child

    指定某一个元素的第一个子元素

    :last-child

    指定某一个元素的最后子元素

    :nth-child

    指定某个元素的一个或多个特定的子元素,可以传入数字,也可以传入even(偶数)或者odd(奇数)

    Bootstrap(二)

    1、基本排版

    1)bootstrap对h1~h6的重新定义

    元素

    字体大小

    其他

    h1

    36px

    margin-top:20px;

    margin-bottom:10px;

    h2

    30px

    h3

    24px

    h4

    18px

    margin-top:10px;

    margin-bottom:10px;

    h5

    14px

    h6

    12px

    2)bootstrap对body的默认设置

    font-size:14px;

    line-height:20px;

    color:#333;

    3)bootstrap在abbr元素上实现了缩略词的功能

    <abbr title=”中华人民共和国”>PRC</abbr>

    4)地址元素(将line-height:20px;margin-bottom:20px;)

    <address>

            <strong>电话</strong>

            022-2323232

        </address>

        <address>

            <strong>山姆大叔</strong>

            <a href="mailto:#">dasds@163.com</a>

    </address> 

    5)引用

    <blockquote class="pull-right">

            <p>不愤不启,不悱不发,举一隅不以三隅反,则吾不复也。</p>

            <small>出自<cite title="论语述而">论语</cite></small>

    </blockquote>

    * cite标签通常表示它所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题。

    6)列表

    普通列表(bootstrap在margin和行间距做了一个微调,设置了margin-bottom:10px)

    <ul>

      <li>…</li>

    </ul>

    有序列表

    <ol>

      <li>…</li>

    </ol>

    去点列表

      <ulclass="list-unstyled">

            <li>钟山风雨起苍黄</li>

            <li>百万雄师过大江</li>

    </ul> 

    内联列表

      <ulclass="list-inline">

            <li>钟山风雨起苍黄</li>

            <li>百万雄师过大江</li> 

    </ul>

    7)代码

    <code>&lt;body&gt;&lt;/body&gt;</code> <!—内联代码,显示单行内联代码-->

    <pre>&lt;body&gt;&lt;/body&gt;</pre> <!—多行代码,元素新生多行代码块--> 

    <kbd>&lt;body&gt;&lt;/body&gt;</kbd> <!—元素显示用户输入代码--> 

    8)表格

    table的css属性

    <table class="table table-striped table-bordered table-hovertable-condensed">

            <tr><th>姓名</th><th>学号</th><th>性别</th><th>班级</th></tr>

            <tr><td>张三</td><td>001</td><td>男</td><td>一班</td></tr>

            <tr><td>张三</td><td>001</td><td>男</td><td>一班</td></tr>

            <tr><td>张三</td><td>001</td><td>男</td><td>一班</td></tr>

            <tr><td>张三</td><td>001</td><td>男</td><td>一班</td></tr>

            <tr><td>张三</td><td>001</td><td>男</td><td>一班</td></tr>

        </table>

    说明:

    属性

    说明

    table

    基础样式

    table-striped

    隔行换色

    table-bordered

    加表格边框

    table-hover

    鼠标移动行的时候换色

    table-condensed

    紧凑型表格,默认情况下table的padding是8,紧凑型的table设置的是5px

    相应式表格

    <div class="table-responsive">

        <tableclass="table">

            …

        </table>

     </div>

    * table在小屏幕设备上(小余768px像素)就会水平滚动哦那个,屏幕大于768px像素宽度时,水平滚动条消失。

    Bootstrap(三)

    1、表单

    1)基础表单

    Bootstrap对基础表单未做太多的定制化效果设计,默认都是使用全局设置,只是对表单内的fieldset,legend,labe标签进行了设定。

    <fieldset>

                <legend>用户登陆</legend>

              <!—form-group样式提供了一个margin-bottom:15px的外间距-->

               <divclass="form-group">

                   <label>用户登陆</label>

                   <!--.form-control显示的宽度会变成100%-->

                   <input type="email"class="form-control" placeholder="请输入你的用户名或email" />

               </div>

                  <divclass="form-group">

                   <label>密码</label>

                   <input type="email"class="form-control" placeholder="请输入你的密码" />

               </div>

                <divclass="checkbox">

                    <label><inputtype="checkbox" />记住密码</label>

                </div>

                <input type="submit"class="btn btn-default" value="登陆"/>

            </fieldset>

    2)内联表单 

    <formclass="form-inline">

              <divclass="form-group">

                   <label>用户登陆</label>

                   <input type="email"class="form-control" placeholder="请输入你的用户名或email" />

               </div>

               <divclass="form-group">

                   <label>密码</label>

                   <input type="email"class="form-control" placeholder="请输入你的密码" />

               </div>

                <divclass="checkbox">

                    <label><inputtype="checkbox" />记住密码</label>

                </div>

            <input type="submit"class="btn btn-default" value="登陆"/>

        </form>
     

    3)表单控件

    Bootstrap对html5里面的input都进行了支持。

    input 元素

    <inputtype="text" placeholder="文本输入框"/>

    checkbox和radio

    <divclass="checkbox">

            <label><inputtype="checkbox" value="" />是否想赚大钱?</label>

    </div>

    <divclass="checkbox">

            <label><inputtype="checkbox" value="" />是否想赚大钱?</label>

        </div>

        <div class="radio">

            <label><inputtype="radio" name="optionR" value="female" checked="checked" />请确保你喜欢女人?</label>

        </div>

         <div class="radio">

            <label><inputtype="radio" name="optionR" value="male" />请确保你喜欢男人?</label>

    </div>

    <!--内联方式-->

        <labelclass="checkbox-inline">

            <input type="checkbox"value="体育" id="d1" />体育

        </label>

         <labelclass="checkbox-inline">

            <input type="checkbox"value="音乐" id="d2" />音乐

        </label>

          <labelclass="radio-inline">

            <input type="radio"value="男" id="d3"/>男

        </label>

        <labelclass="radio-inline">

            <input type="radio"value="女" id="d4"/>女

    </label>

    控件状态

    焦点状态

    <inputtype="email" class="form-control" placeholder="请输入你的密码" />

    禁用状态

    <inputtype="text" placeholder="disable input here" disabled />
     验证提示状态

    Bootstrap提供了.has-warning , .has-error,.has-success三种样式用于分别表示警告(黄色)、错误(红色)、成功(绿色)语境的内容。‘

    <divclass="form-group has-warning">

            <labelclass="control-label" for="inputWarning">输入的长度不够</label>

            <input type="text"class="form-control" id="text1" />

        </div>

        <div class="form-grouphas-error">

            <labelclass="control-label" for="inputError">输入不符合要求</label>

            <input type="text"class="form-control" id="text2" />

        </div>

        <div class="form-grouphas-success">

            <label class="control-label"for="inputSuccess">输入文本符合要求</label>

            <input type="text"class="form-control" id="text3" />

    </div>

    控件大小

    <inputclass="input-lg form-control" type="text"placeholder="较大" />

        <input class="form-control"type="text" placeholder="正常"/>

    <inputclass="input-sm form-control" type="text"placeholder="较小" />

    * input-lg input-sm 不仅适用于input,也适用于select和textarea元素
     

    2、按钮
     

    1)按钮样式
     

       <input type="button"  class="btn btn-default"  value="default"/>

        <input type="button"  class="btn btn-primary"  value="primary"/>

        <input type="button"  class="btn btn-success"  value="success"/>

        <input type="button"  class="btn btn-info"  value="info"/>

         <input type="button"  class="btn btn-warning"  value="warning"/>

        <input type="button"  class="btn btn-danger"  value="danger"/>

    <inputtype="button"  class="btnbtn-link" value="link"/>
     

    3、图像
     

    <imgclass="img-rounded" src="image/104.jpg" />

        <img class="img-circle"src="image/104.jpg" />

        <img class="img-thumbnail"src="image/104.jpg" />
     

    4、辅助样式
     

    文本样式

    <pclass="text-muted">柔和灰</p>

        <p class="text-primary">主要蓝</p>

     <p class="text-success">成功绿</p>

         <p class="text-info">信息蓝</p>

        <p class="text-warning">警告黄</p>

    <pclass="text-danger">危险红</p>

  • 相关阅读:
    1026 Table Tennis (30)
    1029 Median
    1025 PAT Ranking (25)
    1017 Queueing at Bank (25)
    1014 Waiting in Line (30)
    1057 Stack (30)
    1010 Radix (25)
    1008 Elevator (20)
    字母大小写转换
    Nmap的基础知识
  • 原文地址:https://www.cnblogs.com/admi88/p/4979435.html
Copyright © 2011-2022 走看看