bootstrap基本标签总结2

[布局]bootstrap基本标签总结2

 

缩略图

<div class="container">

    <div class="row">

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

            <a href="#" class="thumbnail">

                <img src="http://img.mukewang.com/5434eba100014fe906000338.png" style="height: 180px; width: 100%; display: block;" alt="">

            </a>

        </div>

    …

    </div>

</div>

还可以添加标题、说明、按钮，添加caption容器。

<div class="container">

    <div class="row">

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

            <a href="#" class="thumbnail">

                <img src="http://a.hiphotos.baidu.com/image/w%3D400/sign=c56d7638b0b7d0a27bc9059dfbee760d/3b292df5e0fe9925d46873da36a85edf8cb171d7.jpg" style="height: 180px; width: 100%; display: block;" alt="">

            </a>

            <div class="caption">

                <h3>Bootstrap框架系列教程</h3>

                <p>Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p>

                <p>

                    <a href="##" class="btn btn-primary">开始学习</a>

                    <a href="##" class="btn btn-info">正在学习</a>

                </p>

            </div>

        </div>

    …

    </div>

</div>

警示框

  1、成功警示框：告诉用用户操作成功，在“alert”样式基础上追加“alert-success”样式，具体呈现的是背景、边框和文本都是绿色；

  2、信息警示框：给用户提供提示信息，在“alert”样式基础上追加“alert-info”样式，具体呈现的是背景、边框和文本都是浅蓝色；

  3、警告警示框：提示用户小心操作（提供警告信息），在“alert”样式基础上追加“alert-warning”样式，具体呈现的是背景、边框、文本都是浅黄色；

  4、错误警示框：提示用户操作错误，在“alert”样式基础上追加“alert-danger”样式，具体呈现的是背景、边框和文本都是浅红色。

<div class="alert alert-success" role="alert">恭喜您操作成功！</div>

进度条

提供了两个容器，外容器使用“progress”样式，子容器使用“progress-bar”样式。其中progress用来设置进度条的容器样式，而progress-bar用于限制进度条的进度。

<div class="progress">

       <div class="progress-bar" style="width:40%"></div>

</div>

媒体对象

<div class="media">

    <a class="pull-left" href="#">

        <img class="media-object" src="http://img.mukewang.com/52e1d29d000161fe06000338-300-170.jpg" alt="...">

    </a>

    <div class="media-body">

        <h4 class="media-heading">系列：十天精通CSS3</h4>

        <div>全方位深刻详解CSS3模块知识，经典案例分析，代码同步调试，让网页穿上绚丽装备！</div>

    </div>

</div>

列表组

<ul class="list-group">

    <li class="list-group-item">揭开CSS3的面纱</li>

    <li class="list-group-item">CSS3选择器</li>

    <li class="list-group-item">CSS3边框</li>

    <li class="list-group-item">CSS3背景</li>

    <li class="list-group-item">CSS3文本</li>

</ul>

在列表项的任何区域都可点击

.list-group-item中可以包括：.list-group-text, .list-group-heading

.list-group-item可以设置：.active .disabled .list-group-item-success

<div class="list-group">

    <a href="##" class="list-group-item">图解CSS3</a>

    <a href="##" class="list-group-item"><span class="badge">220</span>Sass教程</a>

    <a href="##" class="list-group-item">玩转Bootstrap</a>

</div>

面板

<h3>面板中嵌套列表组（一）</h3>

<div class="panel panel-default">

    <div class="panel-heading">图解CSS3</div>

    <div class="panel-body">

        <p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性

        </p>

        <ul class="list-group">

            <li class="list-group-item">我是列表项</li>

            <li class="list-group-item">我是列表项</li>

            <li class="list-group-item">我是列表项</li>

        </ul>

    </div>

    <div class="panel-footer">作者：大漠</div>

</div>

弹出框

modal

1.button触发

<!-- 触发模态弹出窗的元素 -->

<button type="button" data-toggle="modal" data-target="#mymodal" class="btn btn-primary">点击我会弹出模态弹出窗</button>

<!-- 模态弹出窗 -->

<div class="modal fade" id="mymodal">

    <div class="modal-dialog">

        <div class="modal-content">

        <!-- 模态弹出窗内容 -->

    <div class="modal-header">

    <h4>对话框</h4>

</div>

<div class="modal-body"><p>对话框内容</p></div>

<div class="modal-footer">

    <button class="btn btn-default" data-dismiss="modal">关闭</button>

    <button class="btn btn-primary" data-dismiss="modal">完成</button>

</div>

        </div>

    </div>

</div>

2.绑定javascript事件

<!-- 触发模态弹出窗元素 -->

<button class="btn btn-primary" type="button">点击我</button>

<!-- 模态弹出窗内容 -->

<div class="modal" id="mymodal">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>

                <h4 class="modal-title">模态弹出窗标题</h4>

            </div>

            <div class="modal-body">

                <p>模态弹出窗主体内容</p>

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

                <button type="button" class="btn btn-primary">保存</button>

            </div>

        </div><!-- /.modal-content -->

    </div><!-- /.modal-dialog -->

</div><!-- /.modal -->

$(function(){

  $(".btn").click(function(){

    $("#mymodal").modal();

  });

});

 

分类: 布局