Bootstrap样式代码预览(全)

最新推荐文章于 2022-04-30 11:24:10 发布
最新推荐文章于 2022-04-30 11:24:10 发布
阅读量573 收藏
点赞数
分类专栏： html/css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZHXT__/article/details/98850211
版权

对于bootstrap的使用说实话,一直以来有点是懂非懂的感觉,估计可能练得时间太少了,

导致对一些功能,无法做到手到心到,故特此加以记录,唯有孰能生巧

几乎涵盖所有默认样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>样式预览</title>
</head>

<body>
    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <!-- 这里开始的内容 -->


                <a id="modal-722692" href="#modal-container-722692" role="button" class="btn"
                    data-toggle="modal">触发遮罩窗体</a>

                <div class="modal fade" id="modal-container-722692" role="dialog" aria-labelledby="myModalLabel"
                    aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                <h4 class="modal-title" id="myModalLabel">
                                    标题
                                </h4>
                            </div>
                            <div class="modal-body"> 内容... </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>

                    </div>

                </div>


                <!-- 巨幕 -->
                <div class="jumbotron">
                    <h1> Hello, world!</h1>
                    <p>
                        This is a template for a simple marketing or informational website. It includes a large callout
                        called the hero unit and three supporting pieces of content. Use it as a starting point to
                        create something more unique.
                    </p>
                    <p> <a class="btn btn-primary btn-large" href="#">Learn more</a></p>
                </div>

                <!-- 导航 -->
                <nav class="navbar navbar-default" role="navigation">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse"
                            data-target="#bs-example-navbar-collapse-1">
                            <span class="sr-only">Togglenavigation</span>
                            <span class="icon-bar"></span><span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#">Brand</a>
                    </div>

                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                            <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown
                                    <strong class="caret"></strong></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Action</a></li>
                                    <li><a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a></li>
                                    <li class="divider"> </li>
                                    <li><a href="#">Separated link</a></li>
                                    <li class="divider"></li>
                                    <li><a href="#">One more separated link</a></li>
                                </ul>
                            </li>
                        </ul>
                        <form class="navbar-form navbar-left" role="search">
                            <div class="form-group">
                                <input type="text" class="form-control" />
                            </div>
                            <button type="submit" class="btn btn-default">Submit</button>
                        </form>




                        <ul class="nav navbar-nav navbar-right">
                            <li>
                                <a href="#">Link</a>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    Dropdown<strong class="caret"></strong>
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Action</a></li>
                                    <li> <a href="#">Another action</a></li>
                                    <li><a href="#">Something else here</a> </li>
                                    <li class="divider"></li>
                                    <li><a href="#">Separated link</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>

                </nav>

<!-- 头部 -->
                <h2> Heading</h2>
                <p>内容</p>
                <p><a class="btn" href="#">View details »</a> </p>

<!-- 面板 -->
                <div class="tabbable" id="tabs-670753">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#panel-1" data-toggle="tab">Section 1</a></li>
                        <li> <a href="#panel-2" data-toggle="tab">Section 2</a> </li>
                    </ul>

                    <div class="tab-content">
                        <div class="tab-pane active" id="panel-1">
                            <p>I'm in Section 1.</p>
                        </div>
                        <div class="tab-pane" id="panel-2">
                            <p>Howdy, I'm in Section 2.</p>
                        </div>
                    </div>
                </div>

<!-- 提示警告 -->
                <div class="alert alert-success alert-dismissable">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                    <h4> 注意!</h4>
                    <strong>Warning!</strong> 这里的是内容
                    <a href="#" class="alert-link">alert link</a>
                </div>

                <div class="carousel slide" id="carousel-1">
                    <ol class="carousel-indicators">
                        <li class="active" data-slide-to="0" data-target="#carousel-1">1</li>
                        <li data-slide-to="1" data-target="#carousel-1">2</li>
                        <li data-slide-to="2" data-target="#carousel-1"> 3</li>
                    </ol>

                </div>


<!-- 有一个面板 -->

                <div class="panel-group" id="panel-1">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <a class="panel-title collapsed" data-toggle="collapse" data-parent="#panel-1"
                                href="#panel-element-2">Collapsible Group Item #1</a>
                        </div>
                        <div id="panel-element-2" class="panel-collapse collapse">
                            <div class="panel-body"> Anim pariatur cliche...</div>
                        </div>
                    </div>
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <a class="panel-title collapsed" data-toggle="collapse" data-parent="#panel-1"
                                href="#panel-element-3">Collapsible Group Item #2</a>
                        </div>
                        <div id="panel-element-3" class="panel-collapse collapse">
                            <div class="panel-body">Anim pariatur cliche...</div>
                        </div>
                    </div>
                </div>



                <div class="panel panel-success">
                    <div class="panel-heading">
                        <h3 class="panel-title"> Panel title</h3>
                    </div>
                    <div class="panel-body">Panel content</div>
                    <div class="panel-footer"> Panel footer</div>
                </div>


                <div class="list-group">
                    <a href="#" class="list-group-item active">Home</a>
                    <div class="list-group-item">
                        List header
                    </div>
                    <div class="list-group-item">
                        <h4 class="list-group-item-heading">
                            List group item heading
                        </h4>
                        <p class="list-group-item-text">...</p>
                    </div>
                    <div class="list-group-item">
                        <span class="badge">14</span> Help
                    </div> <a class="list-group-item active"> <span class="badge">14</span> Help</a>
                </div>


                <!-- 媒体 -->
                <div class="media">
                    <a href="#" class="pull-left"><img src="v3/default7.jpg" class="media-object" alt='' /></a>
                    <div class="media-body">
                        <h4 class="media-heading">
                            Nested media heading
                        </h4>内容
                        <div class="media">
                            <a href="#" class="pull-left"><img src="v3/default8.jpg" class="media-object" alt='' /></a>
                            <div class="media-body">
                                <h4 class="media-heading">
                                    Nested media heading2
                                </h4> 内容
                            </div>
                        </div>
                    </div>
                </div>


                <!--  -->
                <div class="row">
                    <div class="col-md-4">
                        <div class="thumbnail">
                            <img alt="300x200" src="v3/default4.jpg" />
                            <div class="caption">
                                <h3>Thumbnail label</h3>
                                <p>内容</p>
                                <p><a class="btn btn-primary" href="#">Action</a> <a class="btn" href="#">Action</a></p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="thumbnail">
                            <img alt="300x200" src="v3/default5.jpg" />
                            <div class="caption">
                                <h3>Thumbnail label2</h3>
                                <p> 内容 </p>
                                <p><a class="btn btn-primary" href="#">Action</a> <a class="btn" href="#">Action</a></p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="thumbnail">
                            <img alt="300x200" src="v3/default6.jpg" />
                            <div class="caption">
                                    <h3>Thumbnail label3</h3>
                                    <p> 内容 </p>
                                    <p><a class="btn btn-primary" href="#">Action</a> <a class="btn" href="#">Action</a></p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 页面简介 -->
                <div class="page-header">
                    <h1>Example page header <small>Subtext for header</small></h1>
                </div>

                <ul class="nav nav-pills">
                    <li class="active">
                        <a href="#"> <span class="badge pull-right">42</span> Home</a>
                    </li>
                    <li>
                        <a href="#"> <span class="badge pull-right">16</span> More</a>
                    </li>
                </ul>

                <div class="btn-group">
                    <button class="btn btn-default" type="button"><em class="glyphicon glyphicon-align-left"></em>
                        左</button> <button class="btn btn-default" type="button"><em
                            class="glyphicon glyphicon-align-center"></em> 中</button> <button class="btn btn-default"
                        type="button"><em class="glyphicon glyphicon-align-right"></em> 右</button> <button
                        class="btn btn-default" type="button"><em class="glyphicon glyphicon-align-justify"></em>
                        全</button>
                </div> <span class="label label-default">标签</span>
                <h3> h3. 这是一套可视化布局系统. </h3>
                <p><em>Git</em> 是一个分布式的版本控制系统，最初由 <strong>Linus Torvalds</strong>
                    编写，用作Linux内核代码的管理。在推出后，Git在其它项目中也取得了很大成功，尤其是在 <small>Ruby</small> 社区中。
                </p>
                <ul>
                    <li> Lorem ipsum dolor sit amet</li>
                    <li>Consectetur adipiscing elit</li>
                    <li>Integer molestie lorem at massa</li>
                    <li> Facilisis in pretium nisl aliquet</li>
                   
                </ul>
                <dl>
                    <dt>Description lists</dt>
                    <dd>A description list is perfect for defining terms. </dd>
                    <dt> Euismod</dt>
                    <dd> Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
                    <dd>Donec id elit non mi porta gravida at eget metus.</dd>
                    
                </dl>

                <!-- 表格 -->
                <table class="table">
                    <thead>
                        <tr>
                            <th>编号</th>
                            <th> 产品</th>
                            <th>交付时间</th>
                            <th> 状态</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td> 1</td>
                            <td>TB - Monthly</td>
                            <td>time</td>
                            <td>Default</td>
                        </tr>
                        <tr class="success">
                            <td> 1</td>
                            <td> TB - Monthly</td>
                            <td> time</td>
                            <td>Approved</td>
                        </tr>
                        <tr class="error">
                                <td> 1</td>
                                <td> TB - Monthly</td>
                                <td> time</td>
                                <td>Approved</td>
                        </tr>
                        <tr class="warning">
                                <td> 1</td>
                                <td> TB - Monthly</td>
                                <td> time</td>
                                <td>Approved</td>
                        </tr>
                        <tr class="info">
                                <td> 1</td>
                                <td> TB - Monthly</td>
                                <td> time</td>
                                <td>Approved</td>
                        </tr>
                    </tbody>

                </table> 
                
                
                <button type="button" class="btn btn-default btn-info">按钮</button><img alt="140x140"
                    src="v3/default3.jpg" />
                <blockquote>
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
                    </p> <small>Someone famous <cite>Source Title</cite></small>
                </blockquote>


                <div class="btn-group">
                    <button class="btn btn-default">Action</button> <button data-toggle="dropdown"
                        class="btn btn-default dropdown-toggle"><span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li><a href="#">操作</a></li>
                        <li class="disabled"><a href="#">另一操作</a></li>
                        <li class="divider"></li>
                        <li><a href="#">其它</a></li>
                    </ul>
                </div>
                <!-- 面包屑导航 -->
                <ul class="breadcrumb">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Library</a></li>
                    <li class="active">Data</li>
                </ul>


                <!--进度条  -->
                <div class="progress active progress-striped">
                    <div class="progress-bar progress-bar-success" style="width: 60%;">60%</div>
                    <div class="progress-bar progress-bar-info" style="width: 20%;">20%</div>
            
                </div>

                <ul class="pagination ">
                    <li><a href="#">&laquo;</a> </li>
                    <li><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="#">5</a></li>
                    <li> <a href="#">&raquo;</a></li>
                </ul>

<!-- 表单 -->

                <form role="form">
                    <div class="form-group">
                        <label for="exampleInputEmail1">Email address</label>
                        <input type="email" class="form-control" placeholder="用户名" id="exampleInputEmail1" />
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1">Password</label>
                        <input type="password" class="form-control" placeholder="密码" id="exampleInputPassword1" />
                    </div>
                    
                    <div class="form-group">
                        <label for="exampleInputFile">File input</label>
                        <input type="file" id="exampleInputFile" />
                        <p class="help-block"> 示例</p>
                    </div>
                    <div class="checkbox">
                        <label><input type="checkbox" />Check me out</label>
                    </div> 
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>
            </div>
        </div>
    </div>

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>

</html>
ZH_TX
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
网页的图片预览效果（bootstrap）
Albaficahan的博客
10-27 7263
<img src="img/1.jpg" class="img-responsive img-circle"> <img src="img/2.jpg" class="img-responsive img-circle"> <img src="im
Bootstrap预览篇
weixin_30654583的博客
08-02 171
Designed for everyone, everywhere. Bootstrap makes front-end web development faster and easier. It's made for fol...
Bootstrap插件预览
遇见更好的自己
06-13 2864
Bootstrap自带12种jQuery插件，可以给站点添加更多的互动。 站点引用Bootstrap插件的方式有两种 1.单独引用：使用个别的.js文件，一些插件和css组件依赖其他的插件。如果单独引用插件，请先确保这些插件之间的依赖关系。 2.编译引用:使用bootstrap.js或压缩版的bootstrap.min.js都包含了所有的插件 所有的插件依赖于jQuery，所以必须在插件文件
bootstrapcss的样式预览以及用法
weixin_33919950的博客
03-15 433
https://www.jqhtml.com/bootstraps-syntaxhigh/index.html 转载于:https://www.cnblogs.com/boosasliulin/p/10536541.html
Bootstrap 基本样式-图片、表单
litengbin的博客
01-19 318
1 : 圆角    img-rounded 2 : 圆形    img-circle 3 : 缩略图    img-thumbnail
Bootstrap fileinput文件上传预览插件使用详解
08-30
Bootstrap fileinput是一款强大的文件上传预览插件，它在HTML5的基础上提供了丰富的功能，包括多文件选择、在线预览、拖放上传等。这个插件是基于流行的前端框架Bootstrap设计的，因此它能够很好地融入Bootstrap的UI...
bootstrap fileinput插件实现预览上传照片功能
08-28
这些库包括Bootstrap的基础样式、FileInput的特定样式以及jQuery和Bootstrap的JavaScript组件。以下是一个简单的HTML头部部分，包含了所有必需的引用： ```html <!DOCTYPE html> <title>Bootstrap FileInput...
Bootstrap卡片图文列表布局样式代码
06-11
这个"Bootstrap卡片图文列表布局样式代码"是利用Bootstrap的组件和样式来创建一个美观且功能丰富的列表展示，特别适合用于展示产品、博客文章或者其他信息。 在Bootstrap中，卡片（Card）是一个强大的组件，可以...
bootstrap卡片图文列表布局特效代码
03-20
在本案例中，我们关注的是"bootstrap卡片图文列表布局特效代码"，这是一个利用jQuery和Bootstrap实现的功能，用于创建具有不同展示样式的列表。下面我们将深入探讨Bootstrap卡片及其在图文列表布局中的应用。 首先...
bootstrap+cropper图片裁剪代码
03-16
Bootstrap 是一个流行的开源 CSS 框架，它提供了一系列预先设计的样式、布局组件和 JavaScript 插件，帮助开发者快速创建响应式和移动优先的网页。Bootstrap 的核心包括网格系统、表单、按钮、导航及其他界面元素，...
Bootstrap各种效果展示demo
04-11
开发中常用的效果和组件都包含，表格表单下拉菜单按钮组输入框组导航面板模态窗口弹出框警告框等，比较全的bootstrap代码演示
基于jquery bootstrap 图片查看器
01-02
基于bootstrap 的图片查看器，可实现鼠标点击放大等操作。可实现相册预览查看，类似qq相册查看照片效果。
Bootstrap全局CSS样式及代码展示
haibianxiatain的博客
04-30 1097
Bootstrap讲全局font-size设置为14px,line-height设置为20px，段落的行高设置为10px，颜色设置为#333。我们可以通过在页面按F12查看body的样式 <div class="container"> <p>人生</p> <p class="lead">从csdn开始</p> <p>走向人生巅峰</p> </div> 1.2标题 在
html编辑器带预览,带预览模式的Bootstrap所见即所得文本编辑器
weixin_39989688的博客
06-15 389
bootstrap-markdown-editor是一款带预览模式的Bootstrap所见即所得文本编辑器jQuery插件。该文本编辑器支持图片上传，可以进入全屏模式，非常实用。它的特点还有：支持预览模式。支持文件上传(拖拽和点击按钮上传)。支持快捷键。同一个页面支持多个编辑器实例。支持全屏模式。多种主题。支持i18n。安装可以通过bower来安装该文本编辑器插件。bower install bo...
html 上传文件_利用 tornado 实现表格文件预览
weixin_39534978的博客
11-26 231
项目介绍   本文将介绍笔者的一个项目，主要是利用tornado实现表格文件的预览，能够浏览的表格文件支持CSV以及Excel文件。预览的界面如下：文件浏览界面  下面我们将看到这个功能是如何通过tornado来实现的。代码   该项目的代码结构如下图所示：项目的代码结构  其中主要分为四个部分：filesstatictemplatespy代码其中，files文件夹为上传的表格文件的存放...
bootstrap的例子的样式怎么找出来_如何使用Bootstrap ？
weixin_42131618的博客
01-30 938
Bootstrap 是全球最受欢迎的前端开源工具库，它支持 Sass 变量和 mixin、响应式栅格系统自带大量组件众多强大的 JavaScript 插件。基于 Bootstrap 提供的强大功能，能够让你快速设计并自定义你的网站。基本使用流程 1.因为bootstrap用到了html5的特性，为了正常使用，需要在最开头加上 2.Bootstrap需要JQuery才能正常工作，...
Bootstrap之模态框实现图片预览
蓝莓味的鱼
10-21 8080
复制可直接运行  1:代码 &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;预览头像&lt;/title&gt; &lt;link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bo
bootstrap中好看的文件上传样式（持续更新中）
热门推荐
糖糖糖糖糖糖分
02-26 6万+
一 直接使用bootstrap，利用简单的js控制 http://duckranger.com/2012/06/pretty-file-input-field-in-bootstrap/ 非常简单，代码如下： Browse $('input[id=lefile]').change(function() { $('#photoCover').val($(this).v
Bootstrap 样式之 图片的显示形状
cvper's world !
03-07 2141
在Bootstrap中，除了响应式图片的处理，还预定义了三种不同的图片显示样式（测试版本3.x）我们先随便找一张图片，我这里给出一张160*160 的正方形图片：我们开始添加三种不同的图片样式：&lt;img src="self_info.png" alt="..." class="img-rounded"&gt; &lt;img src="self_info.png" alt="...&quo
vscode bootstrap代码提示
最新发布
06-28
开发者可以通过自定义设置来添加Bootstrap的CSS属性，以便更好地支持Bootstrap样式。这也可以极大地提高开发效率，减少手动编写CSS代码的时间。 总之，VS Code提供了强大的代码提示功能，对于使用Bootstrap进行前端...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值