bootstrap4 demo

最新推荐文章于 2022-11-08 17:37:45 发布
最新推荐文章于 2022-11-08 17:37:45 发布
阅读量660 收藏
点赞数
分类专栏： bootstrap v4 文章标签： bootstrap4 demo bootstrap4
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fyinthesky/article/details/86649022
版权

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- These meta tags come first. -->
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>ABC Demo</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
        <!-- self css include
          <link href="dist/toolkit.min.css" rel="stylesheet">
     -->
        <style>
            .body {
                box-sizing: content-box;
            }

            .carousel-item img {
                /*
                height:240px;    
                height: auto;
                */
                height: 240px;
                max-width: 100%;
            }

            /*
            .card-columns {
                @include media-breakpoint-only(xs) {
                    column-count: 1;
                }

                @include media-breakpoint-only(lg) {
                    column-count: 1;
                }
             
            }
            */
            /*      
            
            .card-columns {
              @include media-breakpoint-only(xl) {
                column-count: 5;
              }
              @include media-breakpoint-only(lg) {
                column-count: 4;
              }
              @include media-breakpoint-only(md) {
                column-count: 3;
              }
              @include media-breakpoint-only(sm) {
                column-count: 2;
              }
            }
            */
            @media (min-width: 566px) {
                .card-columns {
                    column-count: 1;
                }
            }

            @media (min-width: 768px) {
                .card-columns {
                    column-count: 2;
                }
            }

            @media (min-width: 1125px) {
                .card-columns {
                    column-count: 2;
                }
            }

            @media (min-width: 1200px) {
                .card-columns {
                    column-count: 2;
                }
            }

            /*
            .card {          
          width: 100%; // Don't let them exceed the column width
         }
        */
        </style>
    </head>
    <body class="bg-light">
        <!-- navgation -->
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <a class="navbar-brand" href="#">Site ABC </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarText">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                        <a class="nav-link btn-outline-success" href="#">
                            Home <span class="sr-only">(current)</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link btn-outline-secondary" href="#">Article </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link btn-outline-secondary" href="#">Im</a>
                    </li>
                </ul>
                <span class="navbar-text">In Building ...
                </span>
            </div>
        </nav>
        <div class="dropdown-divider"></div>
        <!-- show carousel -->
        <div id="carouselABCIndicators" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#carouselABCIndicators" data-slide-to="0" class="active"></li>
                <li data-target="#carouselABCIndicators" data-slide-to="1"></li>
                <li data-target="#carouselABCIndicators" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
                <div class="carousel-item active ">
                    <img class="d-block w-100 img-responsive center-block" src="C:\Users\Public\Pictures\Sample Pictures\Lighthouse.jpg" alt="First slide">
                    <div class="carousel-caption d-none d-xs-block">
                        <h5>First slide</h5>
                        <p>First slide First slide</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img class="d-block w-100 img-responsive center-block" src="C:\Users\Public\Pictures\Sample Pictures\Koala.jpg" alt="Second slide">
                    <div class="carousel-caption d-none d-xs-block">
                        <h5>Second slide</h5>
                        <p>Second slide Second slide</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img class="d-block w-100 img-responsive center-block" src="C:\Users\Public\Pictures\Sample Pictures\Penguins.jpg" alt="Third slide">
                    <div class="carousel-caption d-none d-xs-block">
                        <h5>Third slide</h5>
                        <p>Third slide Third slide</p>
                    </div>
                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselABCIndicators" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselABCIndicators" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
        <div class="dropdown-divider"></div>
        <!-- content description-->
        <div>
            <p class="font-weight-light text-muted">
                To show some example cards <a href="#" class="text-reset">link</a>
            </p>
        </div>
        <!-- content -->
        <!-- four card shows
            card-deck 
            card-group
            card-columns  
            -->
        <div class="card-columns  inline-block">
            <div class="card bg-dark text-white ">
                <img class="card-img" src="C:\Users\Public\Pictures\Sample Pictures\Tulips.jpg" alt="Card image">
                <div class="card-img-overlay">
                    <h5 class="card-title">Card title</h5>
                </div>
            </div>
            <div class="card bg-dark text-white">
                <img class="card-img" src="C:\Users\Public\Pictures\Sample Pictures\Tulips.jpg" alt="Card image">
                <div class="card-img-overlay">
                    <h5 class="card-title">Card title</h5>
                </div>
            </div>
        
            <div class="card bg-dark text-white">
                <img class="card-img" src="C:\Users\Public\Pictures\Sample Pictures\Tulips.jpg" alt="Card image">
                <div class="card-img-overlay">
                    <h5 class="card-title">Card title</h5>
                </div>
            </div>
            <div class="card bg-dark text-white">
                <img class="card-img" src="C:\Users\Public\Pictures\Sample Pictures\Tulips.jpg" alt="Card image">
                <div class="card-img-overlay">
                    <h5 class="card-title">Card title</h5>
                </div>
            </div>
        </div>
        <div class="dropdown-divider"></div>
        <!-- Pagination  -->
        <nav aria-label="Page navigation " class="pt-xs-1 pt-sm-2 ">
            <ul class="pagination justify-content-center  align-items-stretch">
                <li class="page-item">
                    <a class="page-link" href="#">Previous</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="#">1</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="#">2</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="#">3</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="#">Next</a>
                </li>
            </ul>
        </nav>
        <!-- foot with right -->
        <div class="d-flex flex-column bg-light justify-content-center align-items-center  ">
            <div class="p-0 bg-light">
                <h4 class="text-capitalize">--- All right reserved ---</h4>
            </div>
            <div class="p-0 bg-warning">
                <h5 class="text-capitalize">All content comes from internet .</h5>
            </div>
            <div class="p-0 bg-light">
                <h5 class="text-capitalize">Copyright © 2019 - 2020  Rojas. All Rights Reserved. Rojas has resolve .</h5>
            </div>
        </div>
    </body>
</html>

fyinthesky
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap4_apidemo_DEMO_bootstrap_
10-03
bootstrap4文档包含demo课件便于查阅
bootstrap v4 demo
fyinthesky的专栏
01-25 1668
查看主题 https://bootstrap-themes.github.io/dashboard/bootstrap/index.html   &lt;!DOCTYPE html&gt; &lt;!-- https://bootstrap-themes.github.io/dashboard/bootstrap/index.html --&gt; &lt;html lang="en"&gt;...
bootstrap的.card-columns瀑布流显示列数修改
acvc225的博客
05-04 2178
bootstrap多列卡片浮动排版可以实现卡片瀑布流显示，官方说明是： 將卡片包在.card-columns 中，可以將做出象 Masonry网站的瀑布式排列卡片效果， 卡片是使用column属性，而不是基于 flexbox弹性布局，从而实现更方便实用的浮动对齐， 顺序是从上到下、从左到右。 官方默认显示是：小窗口下单列显示，大窗口下3列显示 但是现在想要他在小窗口下2列显示 在网上...
使用bootstrap制作CRM管理系统
DDDDHai的博客
11-08 297
用bootstrap写CRM的一些方法
BootStrap实现带有增删改查功能的表格(DEMO详解)
lgxzzz的博客
08-20 3831
前言 bootstrap的表格样式，有类似EasyUI的表格，也有卡片式表格，放到移动端显示，各有千秋。但是BootStrap自带的表格是没有操作列的，网上的资源不少，但是都是比较单一、零碎，JS、CSS也经常给的不全，自己经过大概一个月左右的时间，把表格封装了一下,希望能分享给大家。 表格封装了3个版本，接下来给大家展示一下样式和代码。 版本一 1. 样式 表格布局： 添加：添加一行新的空白代码 修改：选中可修改的列，点击需要修改的单元格，即可变成可编辑的状态。 2.代码
bootstrap-demo
11-18
4. **导航和布局**：Bootstrap提供了多种导航组件，如导航条（navbars）、面包屑（breadcrumbs）、分页（pagination）、标签页（tabs）等，帮助组织网站的结构和导航。"bootstrap-demo"可能包含了这些组件的示例代码...
bootstrap完整Demo
01-08
bootstrap完整Demo。 BootStrap是基于HTML、CSS和JavaScript的框架，使你只需要写简单的代码就可以很快的搭建一个还不错的前端框架，他是后端程序员的福音，使他们只需要专注业务逻辑，而无须浪费太多的精力在界面...
Bootstrap首页demo效果
06-01
在“Bootstrap首页demo效果”这个项目中，我们可以看到一个使用Bootstrap框架构建的首页演示，其中包含了丰富的动画效果，使得网页更具交互性和吸引力。 首先，我们有`index.html`和`index_copy.html`两个文件。`...
bootstrap_demo
05-24
在学习这些示例时，重要的是理解Bootstrap的类命名规则，比如".btn"表示按钮，".active"表示激活状态，".col-sm-4"表示在小屏幕设备上占用4列的栅格宽度。此外，Bootstrap还提供了一套响应式工具类，如隐藏或显示在...
bootstrap中自己总结的各种demo
11-11
各种bootstrap中出现过的实例基本都可以找到，还有一些demo
bootstrap4 中文用例demo
11-22
bootstrap4 最后一次预览版的中文demo，尚有一些功能不全，后期有空会放出bootstrap4 正式版的demo
ngCordova中文API
04-08
根据官网英文API反编译而成，并增加自己的见解。希望可以对英文不好的小伙伴有所帮助
BootStrapTableDemo
09-14
该bootStrapDemo包含两种样式的表格，封装的表格具有增删改查的功能。一种表格是Datatable,另外一个表格是StuPersonInfo2。前台主要采用的html5+Css3+bootstrap+MVC，希望我写的小demo为大家省一些力气。
BootStrap4.0Demo+轮播素材记录
the_fool_的博客
04-19 1239
整理一些关于前端的东西：BootStrap4.0Demo：官方DEMO：http://code.z01.com/v4/components/carousel.html下午翻了点不错的轮播素材：轮播素材：http://sc.chinaz.com/tag_jiaoben/tupianlunbo.html...
[bootstrap]一个简单的bootstrap4的card的demo
Belle_Chou的博客
12-20 3676
&amp;lt;!doctype html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;!-- Required meta tags --&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt; &
Bootstrap4使用教程
热门推荐
K先生的博客
11-15 1万+
本篇文章写给那些第一次接触Bootstrap框架的学习者，这篇文章将从最基础最基础的Bootstrap下载开始。对Bootstrap有使用经验的同学可以忽略本篇文章。 Bootstrap下载 可以自行百度Bootstrap下载，也可以直接通过此链接http://www.bootcss.com/进入Bootstrap中文网下载Bootstrap文件。 进入Bootstrap中文网之后点击Bootst...
一、速览 Web框架 BootStrap4 —— BootStrap4 基础
Herk 的博客
02-16 456
BootStrap4 集成了快捷灵活的布局，我们只用根据需要引用布局样式即可，可以帮助我们快速开发Web网页。封装了CSS样式，直接调用，非常适合只有HTML基础的后端人员使用。 隐藏与显示 <p class="d-none d-md-block">超小屏幕以上隐藏，中等以上屏幕显示</p> <p class="d-md-none">中等以上屏幕隐藏</p> 表格样式 <table class="table table-dark "
Bootstrap4(十八)
shi199434的博客
12-18 322
Bootstrap4 折叠 Bootstrap4 折叠可以很容易的实现内容的显示与隐藏。 实例 button data-toggle="collapse" data-target="#demo">折叠button> div id="demo" class="collapse">Lorem ipsum dolor text....div> 尝试一下
bootstrap table 分页 demo
最新发布
10-18
$('#table-demo').bootstrapTable({ url: 'data.json', // 数据源文件的URL pagination: true, // 启用分页功能 pageSize: 10, // 每页显示的记录数 pageList: [10, 25, 50, 100], // 可选择的每页记录数 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值