bootstrp实战（2）--LARACON2018主页

最新推荐文章于 2022-08-18 21:39:46 发布
最新推荐文章于 2022-08-18 21:39:46 发布
阅读量1.8k 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37110098/article/details/79184806
版权

第二个页面，，部分还没能完全响应
网页中 img2文件夹以及源码链接https://pan.baidu.com/s/1dHniQFf

<!-- 
      index.html
      Created by 命_心 on 2018-01-23.
      Copyright 2018 命_心. All rights reserved.
 -->
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap_text 2</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <style>
        li{
            list-style: none;
        }
        #data ul li{
            padding: 8px 0;
            border-bottom: 1px #ccc solid;
        }
    </style>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container">
        <div class="row">
           <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"></div>
           <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4">
                  <ul class="nav nav-pills nav-justified nav1 text-center">
                    <li><a href="#" class="color-black">Speakers</a></li>
                          <li><a href="#" class="color-black">Venue</a></li>
                          <li><a href="#" class="color-black">Schedule</a></li>
                          <li><a href="#" class="color-black">Sponsors</a></li>
                  </ul>
            </div>
            <div class="col-lg-4 col-xs-4 col-md-4 col-sm-4"></div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="row">
            <img class="img-responsive center-block" src="img2/16.png" style="width: 100%;"/>
        </div>
        <div class="row" style="width: 40%;height: 120px;background-color: #FFFFFF;position:absolute;  left:32%;top: 62%;">
            <span style="line-height: 33px;">Speakers Venue Schedule Sponsors Speakers Venue Schedule Sponsors Speakers Venue Schedule Sponsors Speakers Venue Schedule Sponsors Speakers Venue Schedule Sponsors Speakers Venue Schedule Sponsors Speakers Venue Schedule Sponsors  
            </span>
            <div class="input-group">
              <input type="text" class="form-control" placeholder="Email Address">
              <span class="input-group-btn">
                <button class="btn btn-danger" type="button">GET IN LINE</button>
              </span>
            </div>
        </div>
    </div>
    <div class="container-fluid">
        <div class="container">
            <div class="row" style="border-bottom:1px #ccc solid; ;">
                <h2 class="col-lg-6 col-md-6 col-sm-6 col-xs-6">Speakers</h2>
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-right">
                    <button class="btn btn-danger" style="margin-top: 20px;">Submit A Talk</button>
                </div>
            </div>
            <div class="row">
                    <li class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="margin: 30px 0px;">
                        <img src="img2/10.png"  class="img-responsive pull-left" style="padding-right: 10px;" />
                        <div >
                            <h4 class="inf-word">ERLE Bubu</h4>
                            <h6 class="inf-word1">ERLE Bubu shou</h6>
                            <a class="inf-word2" style="color: red;">@ERLE Bu</a>
                        </div>
                    </li>
                    <li class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="margin: 30px 0px;">
                        <img src="img2/11.png" class="img-responsive pull-left" style="padding-right: 10px;"/>
                        <h4 class="inf-word">ERLE Bubu</h4>
                        <h6 class="inf-word1">ERLE Bubu erfegss</h6>
                        <a class="inf-word2" style="color: red;">@ERLE Bu</a>
                    </li>
                    <li class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="margin: 30px 0px;">
                        <img src="img2/12.png" class="img-responsive pull-left" style="padding-right: 10px;" />
                        <h4 class="inf-word">ERLE Bubu</h4>
                        <h6 class="inf-word1">ERLE Bubu erfeg shou</h6>
                        <a class="inf-word2" style="color: red;">@ERLE Bu</a>
                    </li>
            </div>
                    <div class="row">
                    <li class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="margin: 30px 0px;">
                        <img src="img2/10.png"  class="img-responsive pull-left" style="padding-right: 10px;" />
                        <div >
                            <h4 class="inf-word">ERLE Bubu</h4>
                            <h6 class="inf-word1">ERLE Bubu shou</h6>
                            <a class="inf-word2" style="color: red;">@ERLE Bu</a>
                        </div>
                    </li>
                    <li class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="margin: 30px 0px;">
                        <img src="img2/11.png" class="img-responsive pull-left" style="padding-right: 10px;"/>
                        <h4 class="inf-word">ERLE Bubu</h4>
                        <h6 class="inf-word1">ERLE Bubu erfegss</h6>
                        <a class="inf-word2" style="color: red;">@ERLE Bu</a>
                    </li>
                    <li class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="margin: 30px 0px;">
                        <img src="img2/12.png" class="img-responsive pull-left" style="padding-right: 10px;" />
                        <h4 class="inf-word">ERLE Bubu</h4>
                        <h6 class="inf-word1">ERLE Bubu erfeg shou</h6>
                        <a class="inf-word2" style="color: red;">@ERLE Bu</a>
                    </li>
            </div>
            <div class="row">
                    <li class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="margin: 30px 0px;">
                        <img src="img2/9.png" class="img-responsive pull-left" style="padding-right: 10px;"/>
                        <h4 class="inf-word">ERLE Bubu</h4>
                        <h6 class="inf-word1">ERLE Bubu erfegss</h6>
                        <a class="inf-word2" style="color: red;">@ERLE Bu</a>
                    </li>
            </div>

            </div>
        </div>
    </div>  
    <div class="container-fluid" style="background-color: #363533;">
        <div class="container">
            <h3 class="text-center" style="color: #fff;">The Venue</h3>
            <p class="text-center" style="color: #eac1ab;">The Museum of Science and Industy,Chicago-one of the lastest science museums<br /> in the world-is home to more than 400,000 square feet of hands-on exhibits designed <br/>to spark scientific inquiry and creativity.</p>
            <p class="text-center" style="color: #ff7a7d; font-weight: bold; padding-bottom: 40px;">Visit The Museum Website</p>
        </div>
    </div>
    <div class="container-fluid">
        <div class="row">
            <img src="img2/18.png" style="padding: 0;" class="img-responsive col-lg-3 col-md-3 col-sm-6 col-xs-12"/>
            <img src="img2/19.png" style="padding: 0;" class="img-responsive col-lg-3 col-md-3 col-sm-6 col-xs-12"/>
            <img src="img2/20.png" style="padding: 0;" class="img-responsive col-lg-3 col-md-3 col-sm-6 col-xs-12"/>
            <img src="img2/21.png" style="padding: 0;" class="img-responsive col-lg-3 col-md-3 col-sm-6 col-xs-12"/>
        </div>
    </div>
    <div class="container-fluid" style="background-color: #363533; padding-top: 50px; padding-bottom: 50px;">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                    <img src="img2/22.png" class="img-responsive" style="margin-bottom: 20px;"/>
                    <p style="color: #fff; font-weight: bold;">Science Storms After Party</p>
                    <p style="color: #ccb7ca;">The Laracon after-parties will take place in the beautiful museum rotunda and Science Storms exhibit.Have a drink and mingle with the community while you check out the Tesla coil,steam tornado,and tsunami box.Drinks are on us!</p>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                    <img src="img2/23.png" class="img-responsive" style="margin-bottom: 20px;"/>
                    <p style="color: #fff; font-weight: bold;">Museum Access</p>
                    <p style="color: #ccb7ca;">Every Laracon attendee is granted full access to the museum for the duration of the conference.Enjoy your lunch break by browsing the museum's exhibits!</p>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid" style="padding: 50px 0px 40px 0px; background-color: #f3f4ee;">
        <div class="container">
            <h3 style="color: #32291a;">Schedule</h3>
            <div class="row" id="data">
                <ul class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                    <li>July 25</li>
                    <li><b>9:00 AM</b><span style="color: #ff7f7e; margin: 0 10px;"><img src="img2/24.png"></span>Registration</li>
                    <li><b>9:00 AM</b><span style="color: #ff7f7e; margin: 0 10px;"><img src="img2/24.png"></span>Registration</li>
                    <li><b>9:00 AM</b><span style="color: #ff7f7e; margin: 0 10px;"><img src="img2/24.png"></span>Registration</li>
                    <li><b>9:00 AM</b><span style="color: #ff7f7e; margin: 0 10px;"><img src="img2/24.png"></span>Registration</li>
                    <li><b>9:00 AM</b><span style="color: #ff7f7e; margin: 0 10px;"><img src="img2/24.png"></span>Registration</li>
                    <li><b>9:00 AM</b><span style="color: #ff7f7e; margin: 0 10px;"><img src="img2/24.png"></span>Registration</li>
                    <li><b>9:00 AM</b><span style="color: #ff7f7e; margin: 0 10px;"><img src="img2/24.png"></span>Registration</li>
                    <li><b>9:00 AM</b><span style="color: #ff7f7e; margin: 0 10px;"><img src="img2/24.png"></span>Registration</li>
                </ul>
                <ul class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                    <li>July 25</li>
                    <li><b>9:00 AM</b><span style="color: #ff7f7e; margin: 0 10px;"><img src="img2/24.png"></span>Registration</li>
                    <li><b>9:00 AM</b><span style="color: #ff7f7e; margin: 0 10px;"><img src="img2/24.png"></span>Registration</li>
                    <li><b>9:00 AM</b><span style="color: #ff7f7e; margin: 0 10px;"><img src="img2/24.png"></span>Registration</li>
                    <li><b>9:00 AM</b><span style="color: #ff7f7e; margin: 0 10px;"><img src="img2/24.png"></span>Registration</li>
                    <li><b>9:00 AM</b><span style="color: #ff7f7e; margin: 0 10px;"><img src="img2/24.png"></span>Registration</li>
                    <li><b>9:00 AM</b><span style="color: #ff7f7e; margin: 0 10px;"><img src="img2/24.png"></span>Registration</li>
                    <li><b>9:00 AM</b><span style="color: #ff7f7e; margin: 0 10px;"><img src="img2/24.png"></span>Registration</li>
                    <li><b>9:00 AM</b><span style="color: #ff7f7e; margin: 0 10px;"><img src="img2/24.png"></span>Registration</li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container"style="margin-bottom: 40px;">
        <div class="row"style="margin-top: 40px;margin-bottom: 40px;">
            <h2 class="col-lg-6 col-md-6 col-sm-6 col-xs-6">Sponsors</h2>
            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-right" style="padding-top: 20px;">
                <button class="btn btn-danger">Become A Sponsors</button>
            </div>
        </div>
        <p style="padding-bottom: 5px;font-weight: bold;">Gold</p>
        <div class="row">
            <img src="img2/4.png" class="img-responsive col-lg-4 col-md-6 col-sm-6 col-xs-12" style="margin-bottom: 20px;"/>
            <img src="img2/5.png" class="img-responsive col-lg-4 col-md-6 col-sm-6 col-xs-12" style="margin-bottom: 20px;"/>
            <img src="img2/6.png" class="img-responsive col-lg-4 col-md-6 col-sm-6 col-xs-12" style="margin-bottom: 20px;"/>
        </div>
        <p style="padding-bottom: 5px;font-weight: bold;">Bronze</p>
        <div class="row">
            <img src="img2/2.png" class="img-responsive col-lg-3 col-md-4 col-sm-6 col-xs-12" style="margin-bottom: 20px;"/>
            <img src="img2/3.png" class="img-responsive col-lg-3 col-md-4 col-sm-6 col-xs-12" style="margin-bottom: 20px;"/>
        </div>
        <p style="padding-bottom: 5px;font-weight: bold;">Community</p>
        <div class="row">
            <img src="img2/1.png" class="img-responsive col-lg-3 col-md-4 col-sm-6 col-xs-12" style="margin-bottom: 20px;"/>
        </div>
    </div>
    <div class="container-fluid" style="background-color: #343434; padding-top: 30px; padding-bottom: 30px;">
        <div class="container">
            <p style="color: #f2d3bf; font-size: 8px;">&copy; Laravel LLC.All rights reserved.</p>
            <p style="color: #f2d3bf; font-size: 8px;">Follow us on Twitter <span style="color: #ac3c31;font-size: 8px;">@LaraconUS</span> or contact us at <span style="color: #ac3c31;font-size: 8px;">taylor@laravel.com</span>.</p>
        </div>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
机智小铛铛i
关注
Bootstrap方法详解——技术与实例
白马负金羁
11-17 8万+
一、Introduction 如果说到Bootstrap你会想到什么？是Twitter推出的那个用于前端开发的开源工具包吗？Unfortunately，本文要讨论的并非是Bootstrap工具包，而是统计学习中一种重采样（Resampling）技术。这种看似简单的方法，对后来的很多技术都产生了深远的影响。机器学习中的Bagging，AdaBoost等方法其实都蕴含了Bootstrap的思想...
1. bootstrap概述
wxhua420701325的博客
10-21 6788
Bootstrap 是 Twitter推出的，目前最流行的前端开发框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，用于快速开发 Web 应用程序和网站的前端框架。用于开发响应式布局、移动设备优先的 WEB 项目。
覆盖Laracon：在线会议会向内倾吗？
culi3182的博客
08-25 342
Tomorrow (March 8th) marks the first Laracon Online – the official Laravel conference, all online. It was started as an effort to allow people who generally can’t afford to visit the actual conference...
Bootstrap基本介绍
m0_68756200的博客
03-31 1万+
Bootstrap 一、Bootstrap是什么 Bootstrap诞生于2011年，来自Twitter公司，是目前最受欢迎的前端框架 是一个用于快速开发Web应用程序和网站的前端框架 Bootstrap是基于HTML、CSS、JS的，简洁灵活，使得Web开发更加快捷 概述：Bootstrap是一个建立一个页面，就可以在三个终端(PC端、平板、手机)上完美展示的响应式前端框架 二、为什么要用Bootstrap 因为Bootstrap是一个简洁、直观、强悍的前端开发框架，让web开发更迅速、更容
统计学中的Bootstrap方法介绍及其应用
热门推荐
芳樽里的歌的博客
01-25 7万+
简要介绍了统计学中的Bootstrap方法及其在时间序列相关检验中的应用。
Bootstrap简述
weixin_71437031的博客
08-18 2934
栅格系统提供了基本的前缀，用于在不同宽度的屏幕中实现不同的排列方式，列的类名可以写多个，也就是可以同时设置.col-、.col-sm-、.col-md-、.co-/g-和.col-xl*类名。组件可以有自己的属性和方法。由于栅格系统就是默认将父元素分成12等份，所以可根据占据的份数来设置子元素的宽度，在设置列的宽度时，只需要在不同的类前缀后面加上栅格数量即可。栅格系统页面的内容可以放入这些创建好的布局容器中，并且会根据父元素盒子（布局容器)尺寸的大小进行适当地调节，从而达到响应式页面布局的效果。...
startbootstrap-sb-admin-2：一个免费的开源Bootstrap管理主题，由Start Bootstrap创建
01-30
通过npm安装： npm i startbootstrap-sb-admin-2 克隆仓库： git clone https://github.com/StartBootstrap/startbootstrap-sb-admin-2.git 用法 安装后，运行npm install ，然后运行npm start ，这将在默认浏览器...
bootstrap-3.4.1-dist.zip,bootstrap-4.6.1-dist.zip
03-09
Bootstrap是世界上最受欢迎的前端开发框架之一，用于构建响应式布局和移动设备优先的Web项目。这个框架由Twitter的开发者创建，极大地简化了网页设计和开发流程。本压缩包包含两个版本的Bootstrap——3.4.1和4.6.1，...
Laravel开发-bootstrap
08-28
Laravel开发-bootstrap Laravel 5的引导程序3助手
swagger-bootstrap-ui-1.9.6-API文档-中文版.zip
07-13
赠送jar包：swagger-bootstrap-ui-1.9.6.jar； 赠送原API文档：swagger-bootstrap-ui-1.9.6-javadoc.jar； 赠送源代码：swagger-bootstrap-ui-1.9.6-sources.jar； 赠送Maven依赖信息文件：swagger-bootstrap-ui-...
Laravel开发-laravel-bootstrap
08-27
Laravel开发-laravel-bootstrap 核心文件，包括Laravel的助手
bootstrp使用
CY的博客
10-20 1422
$(function() { //1.初始化Table var oTable = new TableInit(); oTable.Init(); //2.初始化Button的点击事件 var oButtonInit = new ButtonInit(); oButtonInit.Init(); $(".form_datetime").date
input[type=file]去掉“未选择任何文件”及样式改进
不二的博客
08-19 6万+
input 标签的 file 属性，在没有选择文件的情况下，默认显示一条文字“未选择任何文件”。 在选择文件后，该条文字会变成路径和文件的名称。 如何去掉其默认的“未选择任何文件”提示呢？ 查阅资料，没有发现可以直接修改的办法，但是我们可以通过其他方法，实现自定义提示文字的效果。 我通过 label 标签绑定 input 标签，然后隐藏 input ，添加 button 和 spa...
Bootstrap的安装和使用
Mr.Write的博客
05-10 5万+
Bootstrap的安装和使用一. Bootstrap简介Bootstrap是前端开发中比较受欢迎的框架，简洁且灵活。它基于HTML、CSS和JavaScript，HTML定义页面元素，CSS定义页面布局，而JavaScript负责页面元素的响应。Bootstrap将HTML、CSS和JavaScript封装成一个个功能组件，用起来简单，粗暴。具体Bootstrap的学习教程可参考菜鸟教程二.
bootstrp的一些小点点
机智小铛铛的博客
01-28 264
Bootstrap，来自 Twitter，emmm听说是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它有自带的css样式，也可以在此基础上自己添加css。emmmm 这两天练习了一下，并没有感觉有多么的简单，噗~~~ 1.bootstrp模版 html lang="zh-CN"> head> meta charset=
bootstrap-5.3.0-alpha1.zip
01-11
2. `bootstrap-5.3.0-alpha1.zip`：这可能是源代码包，包含了LESS或Sass源文件、JavaScript源码以及文档。对于想要自定义Bootstrap样式或扩展其功能的开发者来说，这是一个宝贵的资源。 3. `bootstrap-5.3.0-alpha1...
bootstrap下载安装和基础学习
wanderlustLee的博客
02-26 2万+
1.前往bootstrap官网，下载已经编译好的版本，不是source版。 2.下载后解压，然后将两个文件夹css,js或者三个文件夹css,fonts,js拷贝到工程目录里 我这里没有拷js文件   3.在HTML文件或者jsp文件中引入   &lt;!doctype html&gt;   &lt;html lang="en"&gt;   我这个是在jsp中使用。 ...
2018千锋HTML5视频教程全集学习知识点精选：Bootstrap框架技术
码农王也的博客
12-15 1800
2018千锋HTML5视频教程全集学习知识点精选：Bootstrap框架技术。Bootstrap 是基于 Less 打造的，并且也有 Sass版本。Less/Sass是CSS的预处理技术，正因如此，它一经推出就包含了一个非常实用的 Mixin 库供我们调用，使得我们在开发过程中对CSS的处理更加简单。
onnxruntime-1.16.0-cp311-cp311-win_amd64.whl
最新发布
11-18
onnxruntime-1.16.0-cp311-cp311-win_amd64.whl
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值