bootstrap 总体学习笔记

经过几天的学习,虽然不全面,但bootstrap已经完全会用了,将学习的笔记按运行方式和源码方式放在这,供自己以后使用。

因为学习的并不全,所以想看详细的请参看:

bootstrap全局CSS样式介绍:http://v3.bootcss.com/css/
bootstrap插件介绍:http://v3.bootcss.com/components/

所有需要的基本上里面都能找到,勤练习,会非常熟练的运用的。




上面代码是可以完美运行的,我做的笔记是比较乱的,估计大多数人看不明白,建议看上面给出网址的两个手册。

下面是笔记代码,这样可以一边看演示页面,一边看代码:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <!-- 内容与设备保持1:1比例,user-scalable=no禁止用户缩放或双击放大 -->
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>响应式页面设计</title>
    <!-- 引入bootstrap的CSS文件 bootstrap.css 和bootstrap.min.css 内容一样,一个是未压缩,一个是压缩过的 -->
    <link rel="stylesheet" href="/skin/plugins/bootstrap/css/bootstrap.min.css">
    <!-- 只要在下方引入新CSS文件,则可对bootstrap.css进行样式覆盖 -->
    <link rel="stylesheet" href="/skin/plugins/bootstrap/css.css">
    <!-- jQuery文件,要在bootstrap.min.js 之前引入 -->
    <script src="/skin/plugins/bootstrap/js/jquery.js"></script>
    <!-- 再引入bootstrap.min.js文件  里面也有bootstrap.js和bootstrap.min.js ,内容也同样是一样的 -->
    <script src="/skin/plugins/bootstrap/bootstrap.min.js"></script>
    <!-- 引入上面三个文件后,bootstrap环境就算搭建成了 -->
</head>
<body>
<div class="container-fluid">

<div class="container" style="background-color: #ff8c46;">
    container的固定宽度1170px
</div>

    <div style="background-color: #9CAEC1;">
        <h1><small>以后所有的内容都必须在container-fluid中写,bootstrap已经为我们写好所有的东西,我们只要引用类名就可以了。</small></h1>
        <h1><small>下面中标注为标签的,说明是直接使用标签即可出现效果,标注为类的,指在标签中引用类名即可。</small></h1>
        <h1>H1标签:字体大小36px</h1>
        <h2>H2标签:字体大小30px</h2>
        <h3>H3标签:字体大小24px</h3>
        <h4>H4标签:字体大小18px</h4>
        <h5>H5标签:字体大小14px,除h5不是与6有关的,其它的全都是按6相加</h5>
        <h6>H6标签:字体大小12px</h6>
    </div>

    <div style="background-color: #a3d7ff;">
        <h1 class="page-header">page-header类:用于正文低部增加了横线</h1>
        <h2>small标签:内容中用来增加小标题,<small>这处是小标题效果</small>,必须放在h1~h6中使用</h2>
        <h2>big标签:内容中用来增加大标题,<big>这处是大标题效果</big>,必须放在h1~h6中使用</h2>
        <strong>strong标签:使用加粗<br></strong>
        <em>em标签:使用的<br></em>
        <del>del标签:使用的删除线</del>
    </div>

    <div style="background-color: #ff8c46;">
        <h2 class="text-right">text-right类:内容右对齐</h2>
        <h2 class="text-left">text-right类:内容左对齐</h2>
        <h2 class="text-center">text-center类:内容居中</h2>
    </div>

    <div>
        <p>文章内容要放在p标签里面,字体大小是14px,margin下方为10px。</p>
        <p class="text-uppercase">text-uppercase类:所有英文大写,这个english和fish本来是小写的,会变成大写。</p>
        <p class="text-lowercase">text-lowercase类:所有英文小写,这个ENGLISH和FISH本来是大写的,会变成小写。</p>
        <p class="text-capitalize">text-capitalize类:所有英文首字母大写,这个english和fish本来首字母是小写的,会变成首字母大写。</p>
    </div>

    <div style="background-color: #9f88ff;">
        <h3 class="page-header">列表去除格式</h3>
        <ul class="list-unstyled">
            <li>list-unstyled类:LI标签去除默认的黑点和原有LI格式,直接在ul标签中用list-unstyled</li>
        </ul>
        <h3 class="page-header">列表纵向变横向</h3>
        <ul class="list-inline">
            <li>list-inline:纵向变横向,同样是放在UL中使用</li>
            <li>横向二</li>
            <li>横向三</li>
            <li>横向四</li>
        </ul>
        <h3 class="page-header">自定义列表</h3>
        <dl class="dl-horizontal">
            <dt>dl-horizontal类</dt>
            <dd>直接入在DL中使用dl-horizontal,然后内嵌dt和dd即可以</dd>
            <dt>标题</dt>
            <dd>这两行都是相同显示效果</dd>
        </dl>
    </div>

    <div class="table-responsive">
        <h4>table-responsive类:用于table响应式显示。在table外加一个DIV层,放入该类,则table能响应式显示,记住一个table要加一个这种层,如果多个table放在同一个div层中,只有最后一个table起作用(其实就是在手机浏览器中如果table内容过长,则table下方加一个滚动条)见下图。</h4>
        <img src="/skin/plugins/bootstrap/image/tablexys.png">
        <table class="table">
            <tr>
                <td>名称</td>
                <td>作用</td>
            </tr>
            <tr>
                <td>table使用</td>
                <td>table类:是表格的一个基础类,加在table里面,如果加其它的样式,都需要在这个基础上加。</td>
            </tr>
        </table>
        <table class="table table-bordered">
            <tr>
                <td>名称</td>
                <td>作用</td>
            </tr>
            <tr>
                <td>table加边框</td>
                <td>table-bordered类:用于给表格加边框;注意:上面说了加其它的样式,都要使用table,所以这个类调用时变成class="table table-bordered",否则不起作用。</td>
            </tr>
        </table>
        <table class="table table-bordered table-condensed">
            <tr>
                <td>名称</td>
                <td>作用</td>
            </tr>
            <tr>
                <td>table的tr行高</td>
                <td>table-condensed类:默认tr的行高太高的话,可以使用这个类,会让行高小一些。</td>
            </tr>
        </table>
        <table class="table table-bordered table-hover">
            <tr>
                <td>名称</td>
                <td>作用</td>
            </tr>
            <tr>
                <td>table鼠标悬停变色</td>
                <td>table-hover类:鼠标移到tr上后整行变色。</td>
            </tr>
            <tr>
                <td>悬停变色</td>
                <td>悬停变色</td>
            </tr>
            <tr>
                <td>悬停变色</td>
                <td>悬停变色</td>
            </tr>
        </table>
        <table class="table table-bordered table-striped">
            <tr>
                <td>名称</td>
                <td>作用</td>
            </tr>
            <tr>
                <td>table使用</td>
                <td>table-striped类:使用后tr行会隔行换色,也就是斑马线效果。</td>
            </tr>
            <tr>
                <td>斑马线效果</td>
                <td>斑马线效果</td>
            </tr>
            <tr>
                <td>斑马线效果</td>
                <td>斑马线效果</td>
            </tr>
        </table>
        <table class="table table-bordered table-striped">
            <tr>
                <td>名称</td>
                <td>作用</td>
            </tr>
            <tr class="active">
                <td>tr行颜色</td>
                <td>为每个TR行设置不同的背景色。</td>
            </tr>
            <tr class="active">
                <td>tr类使用</td>
                <td>active类:背景颜色:#F5F5F5;鼠标悬停在行或单元格上时所设置的颜色。</td>
            </tr>
            <tr class="success">
                <td>tr类使用</td>
                <td>success类:背景颜色:#F5F5F5;标识成功或积极的颜色</td>
            </tr>
            <tr class="info">
                <td>tr类使用</td>
                <td>info类:背景颜色:#F5F5F5;标识普通的提示信息或动作</td>
            </tr>
            <tr class="danger">
                <td>tr类使用</td>
                <td>danger类:背景颜色:#F5F5F5;标识危险或潜在的带来负面影响的动作</td>
            </tr>
            <tr class="warning">
                <td>tr类使用</td>
                <td>warning类:背景颜色:#F5F5F5;标识警告或需要用户注意</td>
            </tr>
        </table>
    </div>

    <div style="background-color: #C7C78F;">
        <h4><strong>响应式图片,下面的类要放在img标签中使用</strong></h4>
        <h4><strong>img-responsive类:让图片变成响应式</strong></h4>
        <h4><strong>img-circle类:如果是正方形图片,则图片变成圆型特效;如果是长方形图片,图片变成椭圆形图片。</strong></h4>
        <h4><strong>img-rounded类:让图片的四个角变为圆角。</strong></h4>
        <h4><strong>img-thumbnail类:让图片的外面加一个白色圆角边框。</strong></h4>
        <img src="/skin/plugins/bootstrap/image/xyspro.jpg" class="img-responsive img-thumbnail">
    </div>

    <div>
        <h2><strong>栅格系统</strong></h2>
        <h4><strong>栅格系统一定要放入容器:class="container"或class="container-fluid"中使用。</strong></h4>
        <h4><strong>栅格系统,是由行row和列col组成。最多自动分配12列内容;是因为它为每个class属性分配了width: 8.33333333%大小的空间。当超出12个后,便会自动显示为下一行。</strong></h4>
        <h4><strong>col-md-1类,共有col-md-1到col-md-12组成,col-md-1为当前类占一列;col-md-12,为当前类占12列,即width:100%。</strong></h4>
        <h3 style="color:red">下方为一行显示12个,超出换行案例</h3>
        <div class="row" style="background-color: #F5F5F5">
            <div class="col-md-1">col-1</div>
            <div class="col-md-1">col-2</div>
            <div class="col-md-1">col-3</div>
            <div class="col-md-1">col-4</div>
            <div class="col-md-1">col-5</div>
            <div class="col-md-1">col-6</div>
            <div class="col-md-1">col-7</div>
            <div class="col-md-1">col-8</div>
            <div class="col-md-1">col-9</div>
            <div class="col-md-1">col-10</div>
            <div class="col-md-1">col-11</div>
            <div class="col-md-1">col-12</div>
            <div class="col-md-1">col-13</div>
            <div class="col-md-1">col-14</div>
        </div>
        <h3>栅格系统一行显示三个图片实用方法</h3>
        <div class="row">
        <div class="col-md-4">
            <img src="/skin/plugins/bootstrap/image/xyspro.jpg" class="img-responsive img-rounded">
            <h3 class="page-header">栅格系统简单易用</h3>
            <p>别的不说,bootstrap的这个栅格系统确实好用,省下了程序人员写大量复杂代码。</p>
        </div>
        <div class="col-md-4">
            <img src="/skin/plugins/bootstrap/image/xyspro.jpg" class="img-responsive img-rounded">
            <h3 class="page-header">栅格系统简单易用</h3>
            <p>别的不说,bootstrap的这个栅格系统确实好用,省下了程序人员写大量复杂代码。</p>
        </div>
        <div class="col-md-4">
            <img src="/skin/plugins/bootstrap/image/xyspro.jpg" class="img-responsive img-rounded">
            <h3 class="page-header">栅格系统简单易用</h3>
            <p>别的不说,bootstrap的这个栅格系统确实好用,省下了程序人员写大量复杂代码。</p>
        </div>
        </div>
        <h2>让栅格系统适应各个屏幕设备</h2>
        <h4>超小屏幕 手机 (<768px)用:.col-xs-</h4>
        <h4>小屏幕 平板 (≥768px)用:.col-sm-</h4>
        <h4>中等屏幕 桌面显示器 (≥992px)用:.col-md-</h4>
        <h4>大屏幕 大桌面显示器 (≥1200px)用:.col-lg-</h4>
        <h4><strong>以上4个类可以放在一个容器中设定,以便于对各个屏幕设备使用</strong></h4>
        <h3 style="color:red">下方为上面三图的自适应案例</h3>
        <h3 style="color:red">电脑和平板上是一行三个图,手机则一行一个图</h3>

        <div class="row">
            <!-- 下面意思是在桌面显示器上一行三个图,在平板上也是一行三个图,在手机上显示为一行一个图 -->
            <div class="col-md-4 col-sm-4 col-xs-12">
                <img src="/skin/plugins/bootstrap/image/xyspro.jpg" class="img-responsive img-rounded">
                <h3 class="page-header">栅格系统简单易用</h3>
                <p>别的不说,bootstrap的这个栅格系统确实好用,省下了程序人员写大量复杂代码。</p>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-12">
                <img src="/skin/plugins/bootstrap/image/xyspro.jpg" class="img-responsive img-rounded">
                <h3 class="page-header">栅格系统简单易用</h3>
                <p>别的不说,bootstrap的这个栅格系统确实好用,省下了程序人员写大量复杂代码。</p>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-12">
                <img src="/skin/plugins/bootstrap/image/xyspro.jpg" class="img-responsive img-rounded">
                <h3 class="page-header">栅格系统简单易用</h3>
                <p>别的不说,bootstrap的这个栅格系统确实好用,省下了程序人员写大量复杂代码。</p>
            </div>
        </div>

        <h3 style="color:red">栅格两个之间的间距,只能向右进行间距测算</h3>
        <h3 style="color:grey">语法:col-xs/sm/md/lg -offset,完整使用时,如PC屏幕向右偏移两个列(注:偏移单位为列):col-md-offset-2</h3>
        <h3 style="color:grey">为方便我们用12格子演示</h3>
        <style>
            .row-py [class*="col-md"]
            {
                border:1px solid blue;
            }
        </style>
        <div class="row row-py">
            <div class="col-md-1">col-1</div>
            <div class="col-md-1">col-2</div>
            <div class="col-md-1">col-3</div>
            <div class="col-md-1">col-4</div>
            <div class="col-md-1">col-5</div>
            <div class="col-md-1">col-6</div>
            <div class="col-md-1">col-7</div>
            <div class="col-md-1">col-8</div>
            <div class="col-md-1">col-9</div>
            <div class="col-md-1">col-10</div>
            <div class="col-md-1">col-11</div>
            <div class="col-md-1">col-12</div>
        </div>
        <div class="row row-py">
            <div class="col-md-1">col-1</div>
            <div class="col-md-1 col-md-offset-2">向右偏移两列</div>
        </div>
        <h3 style="color:grey">我们可以看到,中间出现两列的空白,因为如右进行了两利偏移</h3>

        <h3 style="color:red">排序:除偏移外另一种方式</h3>
        <h3 style="color:grey">语法:<br>col-xs/sm/md/lg-pull 向左偏移<br>
        col-xs/sm/md/lg-push 向右偏移<br>
        完整示例:col-md-push-4</h3>

        <div class="row row-py">
            <div class="col-md-1">col-1</div>
            <div class="col-md-1">col-2</div>
            <div class="col-md-1">col-3</div>
            <div class="col-md-1">col-4</div>
            <div class="col-md-1">col-5</div>
            <div class="col-md-1">col-6</div>
            <div class="col-md-1">col-7</div>
            <div class="col-md-1">col-8</div>
            <div class="col-md-1">col-9</div>
            <div class="col-md-1">col-10</div>
            <div class="col-md-1">col-11</div>
            <div class="col-md-1">col-12</div>
        </div>
        <div class="row row-py">
            <div class="col-md-4">本行正常占4列-1</div>
            <div class="col-md-3 col-md-push-4">本行占2列,用排序方式向右偏移4列</div>
        </div>
    </div>

    <div style="background-color: #e2b709;">
        <h3>文本颜色类 -- 辅助类别里面</h3>
        <h3>与背景差不多的颜色,类分别是:text-muted;text-primary;text-success;text-info;text-warning;text-danger;</h3>
        <p class="text-muted">这儿是一行内容</p>
        <p class="text-primary">这儿是一行内容</p>
        <p class="text-success">这儿是一行内容</p>
        <p class="text-info">这儿是一行内容</p>
        <p class="text-warning">这儿是一行内容</p>
        <p class="text-danger">这儿是一行内容</p>
    </div>


    <div>
        <h3>下拉小三角 - span元素</h3>
        <span class="caret"></span>
    </div>

    <style>
        .top { border:1px solid #0a6999;}
        .pull-left { width:20%; background-color: #EE0000}
        .pull-right { width:20%; background-color: #EE0000}
    </style>
    <div style="background-color:#ff8888;">
        <h3>pull-left类:左浮动;pull-right类:右浮动;clearfix类:清除浮动</h3>
        <div class="top clearfix">
            <div class="pull-left">左边内容</div>
            <div class="pull-right">右边内容</div>
        </div>
    </div>

    <div><h1 style="color:blue">bootstrap图标</h1>
        <h4>bootstrap图标:<a href="http://v3.bootcss.com/components/#media" target="_blank">图标地址</a><br>
            这儿有一些bootstrap给的扁平化图标,以及一些其它组件。如下方用的搜索图标就是这里面的。
        </h4>

        <h3 style="color:red">表单</h3>
        <h4>form-control类:input表单框为圆角,选中后边框边蓝</h4>
        <h4 style="color:grey">form-group类:增加两个input之间的间距(注:这个并不只用在这,其它地方一样可以增加间距),css代码是:margin-bottom:15px;</h4>
        <form>
            <div class="form-group">
                <label for="cemail">邮箱</label>
                <input type="email" name="cemail" id="cemail" class="form-control">
            </div>
            <div class="form-group">
                <label for="pwd">密码</label>
                <input type="password" name="pwd" id="pwd" class="form-control">
            </div>

            <h3 style="color:red">复选框</h3>
            <h4>checkbox-inline类:优化复选框美化度<br>
                disabled类:加在lable中,文字禁止选中;在input里面不是类,直接是这个名称,框口禁止被选中
            </h4>
            <div>
                <label class="checkbox-inline"><input type="checkbox" name="hobby">唱歌</label>
                <label class="checkbox-inline"><input type="checkbox" name="hobby">旅游</label>
                <label class="checkbox-inline disabled"><input type="checkbox" name="hobby" disabled>睡觉</label>
            </div>

            <h3 style="color:red">单选框</h3>
            <h4>
                radio-inline类:美化单选按钮<br>
                disabled类:与上面使用一样
            </h4>
            <label class="radio-inline"><input type="radio" name="sex" value="男">男</label>
            <label class="radio-inline disabled"><input type="radio" name="sex" value="女" disabled>女</label>

            <h3 style="color:red">textarea</h3>
            <h4>form-control类:依然可以用这个美化。</h4>
            <textarea class="form-control"></textarea>

            <h3 style="color:red">输入框组</h3>
            <h4>input-group类:让输入框和左侧文字(或右侧文字)由上下两行变成一行平行显示。文字或图标处要加上input-group-addon类,才能实现。<br>
            input-group-addon类:输入框左侧文字优化;
            </h4>
            <div class="input-group form-group">
                <span class="input-group-addon glyphicon glyphicon-search"></span>
                <input type="search" name="sc" id="sc" class="form-control">
            </div>
            <div class="input-group">
                <input type="search" name="sc" id="sc" class="form-control">
                <div class="input-group-addon">查询内容</div>
            </div>
        </form>

        <h3 style="color:red">响应式表单</h3>
        <h4>响应式,必须给form表单加上:form-horizontal类<br>
            变成响应式效果,必须结合栅格式才能适合真正的响应式<br>
            input-group-addon类和响应式的类有样式冲突<br>
            输入框不能使用栅格系统,所以输入框外需用div包起来<br>
            所以响应式表单,并没有响应式图文好用。
        </h4>
        <form class="form-horizontal">
            <div class="row">
            <div class="form-group input-group">
                <label for="pwd" class="col-sm-4 col-md-4 col-xs-4 text-right">密码</label>

            <div class="col-sm-8 col-md-8 col-xs-8">
                <input type="password" name="pwd" id="pwd" class="form-control">
            </div>
            </div>
        </form>
    </div>

    <div style="background-color: #DFF0D8;">
        <h3 style="color:red">按钮</h3>
        <h4>btn类:是其它样式的基础类,使用其它样式必须先加上它</h4>
        <h4>按钮样式类:右侧这几个都是样式类的名称btn-primary;btn-default;btn-danger;btn-warning;btn-success</h4>
        <h4>按钮辅助类:<br>
            active类,在已有样式上加入后,会对当前按钮颜色加深<br>
            btn-lg类:让按钮比普通大一号;btn-sm类:让按钮比普通小一号;btn-xs类:超小按键一枚。
        </h4>
        <button class="btn btn-primary">删除</button>
        <input type="button" value="修改" class="btn btn-default">
        <a href="" class="btn btn-danger">修改内容</a>
        <a href="" class="btn btn-warning">修改内容</a>
        <a href="" class="btn btn-success">修改内容</a>
        <a href="" class="btn btn-success active btn-lg">原有颜色加深</a>
        <a href="" class="btn btn-success btn-sm">修改内容</a>
        <a href="" class="btn btn-success btn-xs">修改内容</a>

        <h3 style="color:red">按钮组</h3>
        <h4>多个按钮并排放在一起,无缝</h4>
        <div class="btn-group">
        <a class="btn btn-primary">查询</a>
        <a class="btn btn-primary">修改</a>
        <button class="btn btn-primary">删除</button>
        </div>

    </div>

    <div>
        <h3 style="color:red">综合应用练习</h3>
        <h4>thumbnail类:加一个圆角边框;caption类:padding:9px和color:#000;属性,即增加上下左右间距</h4>
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
                <div class="thumbnail">
                    <img src="/skin/plugins/bootstrap/image/col3.jpg" class="img-responsive">
                    <div class="caption">
                        <h3 class="bg-info x-h3">这是标题</h3>
                        <p class="text-muted">
                            这是一篇文章的内容,在这里进行显示,用栅格做这种模块真是很简单,而且效果很不错哟。
                        </p>
                    </div>
                    <div class="text-left">
                        <button class="btn btn-primary btn-xs">查看原文</button>
                        <button class="btn btn-default btn-xs">购买</button>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
                <div class="thumbnail">
                    <img src="/skin/plugins/bootstrap/image/col3.jpg" class="img-responsive">
                    <div class="caption">
                        <h3 class="bg-info x-h3">这是标题</h3>
                        <p class="text-muted">
                            这是一篇文章的内容,在这里进行显示,用栅格做这种模块真是很简单,而且效果很不错哟。
                        </p>
                    </div>
                    <div class="text-left">
                        <button class="btn btn-primary btn-xs">查看原文</button>
                        <button class="btn btn-default btn-xs">购买</button>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
                <div class="thumbnail">
                    <img src="/skin/plugins/bootstrap/image/col3.jpg" class="img-responsive">
                    <div class="caption">
                        <h3 class="bg-info x-h3">这是标题</h3>
                        <p class="text-muted">
                            这是一篇文章的内容,在这里进行显示,用栅格做这种模块真是很简单,而且效果很不错哟。
                        </p>
                    </div>
                    <div class="text-left">
                        <button class="btn btn-primary btn-xs">查看原文</button>
                        <button class="btn btn-default btn-xs">购买</button>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
                <div class="thumbnail">
                    <img src="/skin/plugins/bootstrap/image/col3.jpg" class="img-responsive">
                    <div class="caption">
                        <h3 class="bg-info x-h3">这是标题</h3>
                        <p class="text-muted">
                            这是一篇文章的内容,在这里进行显示,用栅格做这种模块真是很简单,而且效果很不错哟。
                        </p>
                    </div>
                    <div class="text-left">
                        <button class="btn btn-primary btn-xs">查看原文</button>
                        <button class="btn btn-default btn-xs">购买</button>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
                <div class="thumbnail">
                    <img src="/skin/plugins/bootstrap/image/col3.jpg" class="img-responsive">
                    <div class="caption">
                        <h3 class="bg-info x-h3">这是标题</h3>
                        <p class="text-muted">
                            这是一篇文章的内容,在这里进行显示,用栅格做这种模块真是很简单,而且效果很不错哟。
                        </p>
                    </div>
                    <div class="text-left">
                        <button class="btn btn-primary btn-xs">查看原文</button>
                        <button class="btn btn-default btn-xs">购买</button>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
                <div class="thumbnail">
                    <img src="/skin/plugins/bootstrap/image/col3.jpg" class="img-responsive">
                    <div class="caption">
                        <h3 class="bg-info x-h3">这是标题</h3>
                        <p class="text-muted">
                            这是一篇文章的内容,在这里进行显示,用栅格做这种模块真是很简单,而且效果很不错哟。
                        </p>
                    </div>
                    <div class="text-left">
                        <button class="btn btn-primary btn-xs">查看原文</button>
                        <button class="btn btn-default btn-xs">购买</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div style="background-color: #B8E834; height:220px;">
        <h3 style="color:red">下拉列表</h3>
        <h4>要知道几大要素:<br>
            1、dropdown类:放在父类标签中,像点击铵钮和下拉列表都放在这个父类标签中<br>
            2、在按钮处用data-toggle="dropdown" 触发按钮点击<br>
            3、dropdown-menu类,将该类放在下拉列表的框中标签中<br>
            4、divider类:下拉列表专属分隔线,想让拉表中哪两个之间有分隔线,直接放上一个空的li,里面的类是divider即可<br>
            注:父标签dropdown类,如果用dropdown open,则下拉列表不隐藏,为展开形式<br>
            再次声明:下方的button,完全可以换成a标签及其它标签,就能做成导航下拉框等样式
        </h4>
        <div class="dropdown">
            <button class="btn btn-default" data-toggle="dropdown">登陆<span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
                <li><a href="">QQ登陆</a></li>
                <li><a href="">微信登陆</a></li>
                <li class="divider"></li>
                <li><a href="">邮箱登陆</a></li>
                <li><a href="">手机登陆</a></li>
            </ul>
        </div>
    </div>

    <div>
        <h3 style="color:red">标签页</h3>
        <h4>nav是基类:使用其它类之前必须先使用它。<br>
            tab横向样式类:nav-tabs类;nav-pills类;nav-pills navbar-static-top横向组合类。nav-justified类:大标签<br>
            tag纵向样式类:nav-divider类;<br>
            active类,放在哪个标签上,默认就是选中状态
        </h4>

        <h5>标签页一</h5>
        <ul class="nav nav-tabs">
            <li class="active"><a href="">Home</a></li>
            <li><a href="">Profile</a></li>
            <li><a href="">Messages</a></li>
        </ul>
        <h5>标签页二</h5>
        <ul class="nav nav-pills">
            <li class="active"><a href="">Home</a></li>
            <li><a href="">Profile</a></li>
            <li><a href="">Messages</a></li>
        </ul>
        <h5>标签页三</h5>
        <ul class="nav nav-justified">
            <li><a href="">Home</a></li>
            <li><a href="">Profile</a></li>
            <li><a href="">Messages</a></li>
        </ul>

        <h3 style="color:red">导航栏</h3>
        <h3 style="color:red">能够一直显示在页面顶部或底部的导航条效果就是这个了。</h3>
        <h4>
            navbar类:导航的一个基类,放在nav里面<br>
            navbar-default类:导航栏默认样式<br>
            navbar-inverse类:导航栏背景取反<br>
            navbar-fixed-top;navbar-fixed-bottom类:导航栏固定在顶部或底部<br>
            container类:布局容器。<br><br>

            collapse类:是折叠导航栏的样式基类。列表ul父元素加。<br>
            navbar-collapse:折叠导航栏样式,列表UL的父元素加。<br>
            navbar-nav:导航栏的链接样式。<br>
            navbar-left或navbar-right:组件排列方式。
        </h4>
        <nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
           <div class="container">
               <div class="navbar-header">
                   <a href=""><img src="/skin/plugins/bootstrap/image/logo.png" height="50"></a>
               </div>
               <div class="collapse navbar-collapse">
                   <ul class="nav navbar-nav">
                   <li class="active"><a href="">首页</a></li>
                   <li><a href="">文化</a></li>
                   <li><a href="">IT</a></li>
                   <li><a href="">生活</a></li>
                   <li><a href="">娱乐</a></li>
                   </ul>
               </div>
           </div>
        </nav>
    </div>

    <div style="background-color: #0a6999; height:220px;">
        <h3 style="color:red">分页</h3>
        <h4>
            pagination类:放在UL里面,UL里放LI,直接会出现列表样式
        </h4>
        <div class="">
            <ul class="pagination">
                <li><a href="">&laquo;</a></li>
                <li class="active"><a href="">1</a></li>
                <li><a href="">2</a></li>
                <li><a href="">3</a></li>
                <li><a href="">4</a></li>
                <li><a href="">&raquo;</a></li>
            </ul>
        </div>

    </div>
</div>
</body>
</html>

评论

大侠名号:   验证码: 点击我更换图片  

修远兮

在这里记录每一点自己需要的知识

添加创始人微信,一起交流心得

推荐文章RECOMMEND