bootstrap使用案例

最新推荐文章于 2020-07-06 17:19:43 发布
最新推荐文章于 2020-07-06 17:19:43 发布
阅读量374 收藏 2
点赞数
文章标签： bootstrap html5 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45216853/article/details/106037846
版权

bootstrap布局

css
.col-xs-2{
    width: 20%;
    text-align: center;
    padding: 10px 0px;
}

<!-- container-fluid 100% 宽度 -->
<div class="container-fiuid">
    <!-- 行（row） -->
    <div class="row">
        <!-- col-xs-2 列 列宽是2个单元格宽度 xs 表示布局以移动设备布局每行共12个单元格宽度 -->
        <div class="col-xs-2">
            <img src="./img/pic11.png" alt="">
            <p>美食</p>
        </div>
        <div class="col-xs-2">
            <img src="./img/pic12.png" alt="">
            <p>猫眼电影</p>
        </div>
        <div class="col-xs-2">
            <img src="./img/pic13.png" alt="">
            <p>酒店</p>
        </div>
        <div class="col-xs-2">
            <img src="./img/pic14.png" alt="">
            <p>休闲娱乐</p>
        </div>
        <div class="col-xs-2">
            <img src="./img/pic15.png" alt="">
            <p>外卖</p>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-2">
            <img src="./img/pic16.png" alt="">
            <p>KTV</p>
        </div>
        <div class="col-xs-2">
            <img src="./img/pic17.png" alt="">
            <p>周边游</p>
        </div>
        <div class="col-xs-2">
            <img src="./img/pic18.png" alt="">
            <p>丽人</p>
        </div>
        <div class="col-xs-2">
            <img src="./img/pic19.png" alt="">
            <p>小吃快餐</p>
        </div>
        <div class="col-xs-2">
            <img src="./img/pic20.png" alt="">
            <p>机票/火车票</p>
        </div>
    </div>
</div>
列表
<!-- 无样式列表 内联列表放置于同一行 -->
<ul class="list-unstyled list-inline" >
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
表格
<!-- 添加 .table-bordered 类为表格和其中的每个单元格增加边框 -->
<table class="table table-bordered text-center">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

<!-- 通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式 -->
<!-- 通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应 -->
<!-- 通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半 -->
<!-- 
    状态类
    .active	鼠标悬停在行或单元格上时所设置的颜色
    .success 标识成功或积极的动作
    .info 标识普通的提示信息或动作
    .warning 标识警告或需要用户注意
    .danger	 标识危险或潜在的带来负面影响的动作
-->
<table class="table table-striped table-hover text-center table-condensed">
    <tr class="success">
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr class="info">
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr class="danger">
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>
表单
bootstrap登入验证
css
<style>
    .glyphicon-search.form-control-feedback
    {
        left:15px;
    }
    #search
    {
        padding-left: 30px;
        padding-right: 10px;
    }
</style>

<div class="col-xs-4 col-xs-offset-4">
    <form class="form-horizontal">
        <div class="form-group has-feedback">
            <label for="user" class="control-label col-xs-3">user:</label>
            <div class="col-xs-9"><input type="text" id="user" class="form-control"><span class="glyphicon form-control-feedback"></span></div>
        </div>
        <div class="form-group has-feedback">
            <label for="password" class="control-label col-xs-3">password:</label>
            <div class="col-xs-9"><input type="password" id="password" class="form-control"><span class="glyphicon form-control-feedback"></span></div>
        </div>
        <div class="form-group has-feedback">
            <label for="password" class="control-label col-xs-3">tel:</label>
            <div class="col-xs-9"><input type="text" id="tel" class="form-control"><span class="glyphicon form-control-feedback"></span></div>
        </div>
        <div class="form-group">
            <label for="search" class="control-label col-xs-3">search:</label>
            <div class="col-xs-9"><input type="text" id="search" class="form-control"><span class="form-control-feedback glyphicon glyphicon-search"></span></div>
        </div>
        <div class="row">
            <div class="col-xs-2 col-xs-offset-4"><button type="submit" class="btn btn-primary">提交</button></div>
            <div class="col-xs-2 col-xs-offset-3"><button type="button" class="btn btn-default">注册</button></div>
        </div>
    </form>
</div>

(function($){
    $.fn.verify=function(){
        var arr=["user","password","tel"];
        // 判断数组里面是否包含id，return出去
        // if(!(["user","password"].includes(this.prop("id")))) return
        if(arr.indexOf(this.prop("id"))<0) return;
        // input事件
        this.on("input",e=>{
            if(this.data("ids"))return;
            var ids=setTimeout(()=>{
                clearTimeout(this.data("ids"));
                this.data("ids",false);
                if(verifyReg(this.prop("id"),this.val())){
                    this.next("span").removeClass("glyphicon-remove")
                    .addClass("glyphicon-ok")
                    .parents(".has-feedback")
                    .removeClass("has-error")
                    .addClass("has-success");
                }else{
                    this.next("span")
                    .removeClass("glyphicon-ok")
                    .addClass("glyphicon-remove")
                    .parents(".has-feedback")
                    .removeClass("has-success")
                    .addClass("has-error");;
                }
            },500)
            this.data("ids",ids)
        })
    };
    // 判断内容是否正确
    function verifyReg(id,text){
        switch (id){
            case "user":
                return /^\w{8,16}$/.test(text);
            case "password":
                return /^(?=\D+\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,16}$/.test(text);
            case "tel":
                return /^1\d{10}$/.test(text);    
        }
    }
})($);

$("#user").verify();
$("#password").verify();
$("#tel").verify();
按钮
<!-- btn btn-default 按钮默认样式 -->
<!-- btn-lg 大按钮 -->
<!-- :active 激活状态 -->
<button class="btn btn-default btn-lg active">按钮</button>
<button class="btn btn-primary " disabled="disabled">按钮</button>
<div  class="btn btn-danger">按钮</div>
<a href="#"  class="btn btn-success">按钮</a>
<span  class="btn btn-danger">按钮</span>
<button class="btn btn-link">超链接</button>
图片
<!-- 图片形状 -->
<img src="./img/pic11.png" class="img-rounded">
<img src="./img/pic12.png" class="img-circle">
<img src="./img/pic13.png" class="img-thumbnail">
文本
<!-- 文本背景 -->
<div class="text-danger bg-primary">文本</div>
<!-- 关闭按钮 -->
<span class="close">&times;</span>
<!-- 三角符号 -->
<span class="caret"></span>
快速浮动
<div class="clearfix">
    <div class="pull-left">1</div>
    <div class="pull-left">1</div>
    <div class="pull-left">1</div>
    <div class="pull-left">1</div>
</div>
显示或隐藏内容
<div class="show">显示</div>
<div class="hidden">隐藏</div>

<!-- 鼠标滑过隐藏 -->
$("div").hover(function(){
    $(this).toggleClass("hidden");
})
组合按钮
<!-- glyphicon glyphicon-search 搜索字体图标 -->
<button class="btn btn-danger"><span class="glyphicon glyphicon-search"></span>搜索</button>

<!-- 把一组 <div class="btn-group"> 组合进一个 <div class="btn-toolbar"> 中就可以做成更复杂的组件 -->
<!-- 字体图标左中右两端 -->
<!-- glyphicon glyphicon-align-left -->
<!-- glyphicon glyphicon-align-center -->
<!-- glyphicon glyphicon-align-right -->
<!-- glyphicon glyphicon-align-justify -->
<div class="btn-toolbar">
    <div class="btn-group">
        <button class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
        <button class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
        <button class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button>
        <button class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></button>
    </div>
    <div class="btn-group">
        <button class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
        <button class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
        <button class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button>
        <button class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></button>
    </div>
    <div class="btn-group">
        <button class="btn btn-default"><span class="glyphicon glyphicon-align-left"></span></button>
        <button class="btn btn-default"><span class="glyphicon glyphicon-align-center"></span></button>
        <button class="btn btn-default"><span class="glyphicon glyphicon-align-right"></span></button>
        <button class="btn btn-default"><span class="glyphicon glyphicon-align-justify"></span></button>
    </div>
</div>
下拉菜单
将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里加入组成菜单的 HTML 代码
dropdown-toggle 下拉菜单切换
dropdown-menu 下拉菜单
divider 分割线
把任意一个按钮放入 .btn-group 中，然后加入适当的菜单标签，就可以让按钮作为菜单的触发器

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        <span>北京</span> 
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li class="dropdown-header">首都</li>
        <li><a href="#">北京</a></li>
        <li class="divider"></li>
        <li class="dropdown-header">直辖市</li>
        <li><a href="#">上海</a></li>
        <li><a href="#">深圳</a></li>
        <li><a href="#">武汉</a></li>
        <li class="disabled"><a href="#">广州</a></li>
        <li><a href="#">杭州</a></li>
    </ul>
</div>
按钮式下拉菜单
<!-- 把任意一个按钮放入 .btn-group 中，然后加入适当的菜单标签，就可以让按钮作为菜单的触发器 -->
<div class="dropdown btn-group">
    <button class="btn btn-default dropdown-toggle">
        <span>北京</span> 
    </button>
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li class="dropdown-header">首都</li>
        <li><a href="#">北京</a></li>
        <li class="divider"></li>
        <li class="dropdown-header">直辖市</li>
        <li><a href="#">上海</a></li>
        <li><a href="#">深圳</a></li>
        <li><a href="#">武汉</a></li>
        <li class="disabled"><a href="#">广州</a></li>
        <li><a href="#">杭州</a></li>
    </ul>
</div>
<script>
    // 点击菜单或者超链接显示点击的文本内容
    $(".dropdown-menu a").click(function(){
        $(".dropdown span:first").text(this.textContent);
    })
</script>

组件

输入框组
<!-- 
    为 .input-group 赋予 .input-group-addon 或 .input-group-btn 类，
    可以给 .form-control 的前面或后面添加额外的元素 
-->
<div class="col-xs-4">
    <div class="input-group">
        <input type="text" class="form-control">
        <span class="input-group-btn">
            <button class="btn btn-default">GO!</button>
        </span>
    </div>
</div>

导航

标签页
<ul class="nav nav-tabs">
    <li class="active"><a href="#">首页</a></li>
    <li><a href="#">新手问答</a></li>
    <li><a href="#">游戏简介</a></li>
    <li><a href="#">英雄攻略</a></li>
    <li><a href="#">游戏下载</a></li>
</ul>
<script>
    $("li").click(function(){
        // 当前元素添加active样式，其它兄弟元素中是active的删除
        $(this).addClass("active").siblings(".active").removeClass("active");
    })
</script>
胶囊式标签页
<ul class="nav nav-pills">
    <li class="active"><a href="#">首页</a></li>
    <li><a href="#">新手问答</a></li>
    <li><a href="#">游戏简介</a></li>
    <li><a href="#">英雄攻略</a></li>
    <li><a href="#">游戏下载</a></li>
</ul>
<script>
    $("li").click(function(){
        // 当前元素添加active样式，其它兄弟元素中是active的删除
        $(this).addClass("active").siblings(".active").removeClass("active");
    })
</script>
导航添加下拉菜单
<!-- nav-justified 两端对齐 -->
<ul class="nav nav-tabs nav-justified">
    <li class="active"><a href="#">首页</a></li>
    <li><a href="#">新手问答</a></li>
    <li><a href="#">游戏简介</a></li>
    <li><a href="#">英雄攻略</a></li>
    <li><a href="#">游戏下载</a></li>
    <li class="dropdown btn-group">
        <a class="btn btn-default dropdown-toggle">
            <span>北京</span> 
        </a>
        <a class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li class="dropdown-header">首都</li>
            <li><a href="#">北京</a></li>
            <li class="divider"></li>
            <li class="dropdown-header">直辖市</li>
            <li><a href="#">上海</a></li>
            <li><a href="#">深圳</a></li>
            <li><a href="#">武汉</a></li>
            <li class="disabled"><a href="#">广州</a></li>
            <li><a href="#">杭州</a></li>
        </ul>
    </li>
</ul>
   
<script>
    $("li").click(function(){
        // 当前元素添加active样式，其它兄弟元素中是active的删除
        $(this).addClass("active").siblings(".active").removeClass("active");
    })
</script>
分页
<!-- 禁用和激活状态 给当前页添加 .active 类 -->
<!-- 实现翻页效果 -->
<ul class="pagination" id="page1" data-active="2">
    <li data-toggle="prev"><a href="#">«</a></li>
    <li><a href="#">1</a></li>
    <li class="active"><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">7</a></li>
    <li><a href="#">8</a></li>
    <li><a href="#">9</a></li>
    <li data-toggle="next"><a href="#">»</a></li>
</ul>

​

$("li").click(function (e) {
    var ul=$(".pagination");
    var li;
    if($(this).attr("data-toggle")==="prev"){
         if(ul.attr("data-active")==="1")return;
        li=$(".pagination>.active").removeClass("active").prev().addClass("active");
        ul.attr("data-active",li.text());
    }else if($(this).attr("data-toggle")==="next"){
        if(ul.attr("data-active")==ul.children().length-2)return;
        li=$(".pagination>.active").removeClass("active").next().addClass("active");
        ul.attr("data-active",li.text());
    }else {
        $(this)
            .addClass("active")
            .siblings(".active")
            .removeClass("active")
            .parent().attr("data-active",$(this).text());
    }
})

// 封装
(function(){
    $.fn.pageInit=function(){
        var li;
        this.children().click(e=>{
            if($(e.currentTarget).attr("data-toggle")=="prev"){
                if(this.attr("data-active")==="1") return;
                li=this.children(".active")
                	.removeClass("active")
                	.prev().addClass("active");
                this.attr("data-active",li.text());
            }else if($(e.currentTarget).attr("data-toggle")=="next"){
                if(this.attr("data-active")==this.children().length-2) return;
                li=this.children(".active")
                    .removeClass("active")
                    .next().addClass("active");
                this.attr("data-active",li.text());
            }else{
                $(e.currentTarget)
                .addClass("active")
                .siblings(".active")
                .removeClass("active")
                .parent().attr("data-active",e.currentTarget.text());
            }
        })
    }
})();

$("#page1").pageInit()

<!-- 标签 -->
<span class="label label-danger">Danger</span>
<!-- 徽章 -->
<button class="btn btn-primary" type="button">
    Messages <span class="badge">4</span>
</button>
模态框
<!-- 
    点击下面的按钮即可通过 JavaScript 启动一个模态框。
    此模态框将从上到下、逐渐浮现到页面前 
-->
<button class="btn btn-default"  data-target="#myModal" data-toggle="modal">打开</button>

<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title text-centent">弹出窗标题</h4>
            </div>
            <div class="modal-body">
                <input type="text" id="msg">
                <pre>
Overflowing text to show scroll behavior
Cras mattis consectetur purus sit amet fermentum. 
Cras justo odio, dapibus ac facilisis in, egestas eget quam.
                </pre>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal">关闭</button>
                <button class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>
<div id="msgs"></div>

// 模态框初始化之后就立即显示出来
$('#myModal').modal({
    show: true
})

// 监听并执行自己的代码
$("#myModal").on("hide.bs.modal",function(e){
    $("#msgs").text($("#msg").val())
})
提示信息
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<script>
    $(function () {
        $('[data-toggle="tooltip"]').tooltip()
    })
</script>
手风琴效果
<div class="panel-group col-xs-6" id="accordion" >
    <div class="panel panel-default">
        <div class="panel-heading"  id="headingOne">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" >
                    Collapsible Group Item #1
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in">
            <div class="panel-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading"  id="headingTwo">
            <h4 class="panel-title">
                <a class="collapsed"  data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" >
                    Collapsible Group Item #2
                </a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse"  >
            <div class="panel-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading"  id="headingThree">
            <h4 class="panel-title">
                <a class="collapsed"  data-toggle="collapse" data-parent="#accordion" href="#collapseThree" >
                    Collapsible Group Item #3
                </a>
            </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse" >
            <div class="panel-body">
                Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
            </div>
        </div>
    </div>
</div>
轮播图效果
<!-- css -->
.carousel-indicators li{
    width: 20px;
    height: 20px;
}
.carousel-indicators .active
{
    width: 22px;
    height: 22px;
}
.carousel-control.left {
    background-image:none;
    filter:none;
}
.carousel-control.right {
    background-image:none;
    filter:none;
}

<div class="col-xs-12">
    <div class="carousel slide" id="myCarousel">
        <ul class="carousel-indicators">
            <li class="active" data-target="#myCarousel" data-slide-to="0"><a href="#"></a></li>
            <li data-target="#myCarousel" data-slide-to="1"><a href="#"></a></li>
            <li data-target="#myCarousel" data-slide-to="2"><a href="#"></a></li>
            <li data-target="#myCarousel" data-slide-to="3"><a href="#"></a></li>
            <li data-target="#myCarousel" data-slide-to="4"><a href="#"></a></li>
        </ul>
        <div class="carousel-inner">
            <div class="item active">
                <img src="img/a.png">
                <h3 class="carousel-caption">图片1</h3>
            </div>
            <div class="item">
                <img src="img/b.png">
                <h3 class="carousel-caption">图片2</h3>
            </div>
            <div class="item">
                <img src="img/c.png">
                <h3 class="carousel-caption">图片3</h3>
            </div>
            <div class="item">
                <img src="img/d.png">
                <h3 class="carousel-caption">图片4</h3>
            </div>
            <div class="item">
                <img src="img/e.png">
                <div class="carousel-caption">图片5</div>
            </div>
        </div>
        <a class="carousel-control left" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
    </div>
</div>
_Wz_
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html栅格系统显示边框,Bootstrap整体框架之CSS12栅格系统
weixin_29870587的博客
06-20 1227
1.整体架构BootStrap框架公共六个部分：(css组件和js插件是其表现形式，其余的是基础支撑平台)表现形式CSS组件JS插件基础支撑平台CSS12栅格系统基础布局组件jQuery响应式设计1.1 CSS12栅格系统12栅格系统是BootStrap的核心功能，也是响应式设计核心理念的一个实现方式。1.1.1 实现原理栅格布局原理：定义容器大小，平分12分，在调整内外边距，最后结合媒体查询，制...
bootstrap入门案例
weixin_46083166的博客
03-25 363
1.准备工作 下载bootstarp文档：用于生产环境的 Bootstrap把下载的文件全部导入到项目的相应位置 在起步引入代码： <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="../css/bootstrap.css" /> <!-- 需要引用JQuery --> ...
bootstrap里面col-xs , col-sm ,col-md,col-lg的使用
热门推荐
Jason
05-10 2万+
col-lg一般用于大屏设备，(min-width:1200px);col-md一般用于中屏设备，(min-width：992px);col-sm一般用于小屏设备，(min-width：768px);col-xs用于超小型设备，(max-width：768px);后面跟数字是几，也就是占几份,比如是4，也就是一行可以显示3个;或者12，就是一行可以显示1个。关于使用，一般设置的话四个属性都用到会比...
bootstrap里col-xs , col-sm ,col-md,col-lg的区别
weixin_38383877的博客
07-28 5997
前言         对于一些初学boostrap的同学来说，肯定也像我一样傻傻的搞不懂col-××-*都是要怎么使用吧，我刚开始也表示一脸懵逼，后来查阅了这篇文章才搞懂了他们之间的区别，我整理了一下供大家一起学习。 摘要: bootstrap栅栏系统css中的col-xs-*、col-sm-*、col-md-* 、col-lg-*的意义： .col-xs-* 超小屏幕 手机 (&lt;76...
【jQuery】案例代码+思路解析
丧心病狂Loli控的博客
07-06 364
  ❶ 排他性 $("button").click(function() { $(this).siblings().css("backgroundColor", ""); $(this).css("backgroundColor", "tomato"); })   ❷ 隐藏下拉菜单 $(".nav>li").mouseover(function() { // 鼠标经过，ul显示 $(this).children("ul").show(); }) $(".
BootStrap TreeView使用实例详解
08-28
主要为大家详细介绍了BootStrap TreeView使用实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Bootstrap对话框使用实例讲解
09-01
主要为大家详细介绍了Bootstrap对话框使用实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
bootstrap入门实例
12-24
一个简单的bootstrap实例，帮助人理解和体验bootstrap代码的真实效果
JS组件Bootstrap Table使用实例分享
10-22
主要为大家详细介绍了JS组件Bootstrap Table分页使用方法，具有一定的实用性，感兴趣的小伙伴们可以参考一下
bootstrapTable使用示例.rar
04-14
bootstrapTable组件的使用示例，里面包含父子表、treegrid以及结合knockoutjs的使用示例。博客园博主本人资源，有问题可以联系。
Bootstrap Table+日期选择框实例（可以直接用与项目）
05-07
Bootstrap Table+日期选择框实例，可配合Ajax直接用于实际项目开发，亲测可用
bootstrap实例
01-11
bootstrap，自动适应屏幕大小，再移动开发和网页开发中经常用到！
框架首页easyui,bootstrap例子展示。
09-29
框架首页easyui,bootstrap例子展示。 框架首页easyui,bootstrap例子展示。
Bootstrap Table 跨页选择
02-01
Bootstrap Table 跨页选择，用于后台分页的表格，保存非当前页的勾选行数据，翻回去又可以自动勾选，又可通过函数获取勾选的全部数据。
bootstrap4 中文用例demo
11-22
bootstrap4 最后一次预览版的中文demo，尚有一些功能不全，后期有空会放出bootstrap4 正式版的demo
jQuery_学习笔记，家中常备
Chill Lyn
11-28 196
最最最基本的使用 获得/更改双标记标签中的内容 $("span").text(); $("span").text("abc"); 获得/更改单标记标签中内容 $("input").val(); $("input").val("abc"); 数组的each遍历 var arr=$(...); arr.each(function(){ //each one does something... }...
【JS】jquery-3.4.0实现点击不同的li,切换到对应的div内容
Ning+
10-21 1140
HTML： <ul class="tabItems"> <li class="active">1</li> <li>2</li> <li>3</li> </ul> <div class="content"> <div>1</div&gt...
jQuery学习三
晨曦天下
10-03 421
现在看看选择触发事件,还是看代码OK点           $(function(){ // 绑定一个事件控件    jQuery("#btn").click(         function(){             alert("你小子点了个
Bootstrap 表单例子
qazwsx_edc1的博客
07-20 1234
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt;     &lt;meta charset="UTF-8"&gt;     &lt;meta name="viewport" content="width=device-width,initial-scale=1.0"/&gt;
bootstrap项目实例
最新发布
12-21
以下是一个使用Bootstrap的项目实例： ```html <!DOCTYPE html> , initial-scale=1.0"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/dist/css/bootstrap.min.css"> <title>...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值