初识BootScript

最新推荐文章于 2022-11-21 18:36:03 发布
最新推荐文章于 2022-11-21 18:36:03 发布
阅读量610 收藏 1
点赞数
文章标签： html5 html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bbbeddd/article/details/120850097
版权

一个便于我们制作html的工具，能实现响应式页面，提供便捷的CSS样式，组件与插件

        依赖于格栅系统，每一行（只要新建了一行，即使不占满整个页面）都是12个格子，是操纵

        行与格子的能力

 案例：实现旅游网站页面  注意：每一行都是12个格子

 知道那哪些是自己写的 哪些是BootStap提供的即可

<!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 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- 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="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .paddtop{padding-top: 10px}
        .search_btn{
            float: left;
            border: 1px solid coral;
            width: 90px;
            height: 35px;
            background-color: coral;
            text-align: center;
            line-height: 35px;
            margin-top: 10px;
        }
        .search_input{
            float: left;
            border: 2px solid coral;
            width:400px ;
            height: 35px;
            padding-left: 10px;
            margin-top: 10px;
        }
        .underline1{border-bottom:2px solid coral;padding: 5px}
        .companyinfo{
            height: 40px;
            background-color: coral;
            text-align: center;
            line-height: 40px;
            font-size: 10px;
        }
    </style>
</head>
<body>
<!--1页眉部分-->
<header class="container-fluid">
    <div class="row">
        <img src="../../image/top_banner.jpg" class="img-responsive">
    </div>
    <div class="row paddtop">
        <div class="col-md-3">
            <img src="../../image/logo.jpg" class="img-responsive">
        </div>
        <div class="col-md-5">
            <input class="search_input" placeholder="请输入路线名称">
            <a class="search_btn" href="#">搜索</a>
        </div>
        <div class="col-md-4">
            <img src="../../image/hotel_tel.png">
        </div>
    </div>
    <!--导航条-->
    <div class="row">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</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>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                        <li><a href="#">Link</a></li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
    </div>
    <!--轮播图-->
    <div class="row">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="../../image/banner_1.jpg" alt="...">
                    <div class="carousel-caption">
                    </div>
                </div>
                <div class="item">
                    <img src="../../image/banner_2.jpg" alt="...">
                    <div class="carousel-caption">
                    </div>
                </div>
                <div class="item">
                    <img src="../../image/banner_3.jpg" alt="...">
                    <div class="carousel-caption">
                    </div>
                </div>
            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
</header>
<!--2主题部分-->
<div class="container">
    <div class="row underline1">
        <img src="../../image/icon_5.jpg">
        <span>精选路线</span>
    </div>
    <div class="row paddtop">
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="../../image/jiangxuan_2.jpg" alt="">
                <p>玩快艇</p>
                <font color="#e9967a">&yen;299</font>
            </div>
        </div>
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="../../image/jiangxuan_2.jpg" alt="">
                <p>玩快艇</p>
                <font color="#e9967a">&yen;299</font>
            </div>
        </div>
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="../../image/jiangxuan_2.jpg" alt="">
                <p>玩快艇</p>
                <font color="#e9967a">&yen;299</font>
            </div>
        </div>
        <div class="col-md-3">
            <div class="thumbnail">
                <img src="../../image/jiangxuan_2.jpg" alt="">
                <p>玩快艇</p>
                <font color="#e9967a">&yen;299</font>
            </div>
        </div>
    </div>
    <div class="row underline1">
        <img src="../../image/icon_6.jpg">
        <span>国内游</span>
    </div>
    <div class="row paddtop">
        <div class="col-md-4">
            <img src="../../image/guonei_1.jpg">
        </div>
        <div class="col-md-8">
            <div class="row">
                <div class="col-md-4">
                    <div class="thumbnail">
                        <img src="../../image/jiangxuan_2.jpg" alt="">
                        <p>玩快艇玩快艇玩快艇玩快艇玩快艇玩快艇玩快艇玩快艇玩快艇
                            玩快艇玩快艇玩快艇玩快艇玩快艇玩快艇玩快艇玩快艇玩快艇</p>
                        <font color="#e9967a">&yen;299</font>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="thumbnail">
                        <img src="../../image/jiangxuan_2.jpg" alt="">
                        <p>玩快艇玩快艇玩快艇玩快艇玩快艇玩快艇玩快艇玩快艇玩快艇
                            玩快艇玩快艇玩快艇玩快艇玩快艇玩快艇玩快艇玩快艇玩快艇</p>
                        <font color="#e9967a">&yen;299</font>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="thumbnail">
                        <img src="../../image/jiangxuan_2.jpg" alt="">
                        <p>玩快艇玩快艇玩快艇玩快艇玩快艇玩快艇玩快艇玩快艇玩快艇
                            玩快艇玩快艇玩快艇玩快艇玩快艇玩快艇玩快艇玩快艇玩快艇</p>
                        <font color="#e9967a">&yen;299</font>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4">
                    <div class="thumbnail">
                        <img src="../../image/jiangxuan_2.jpg" alt="">
                        <p>玩快艇玩快艇玩快艇玩快艇玩快艇玩快艇玩快艇玩快艇玩快艇
                            玩快艇玩快艇玩快艇玩快艇玩快艇玩快艇玩快艇玩快艇玩快艇</p>
                        <font color="#e9967a">&yen;299</font>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="thumbnail">
                        <img src="../../image/jiangxuan_2.jpg" alt="">
                        <p>玩快艇玩快艇玩快艇玩快艇玩快艇玩快艇玩快艇玩快艇玩快艇
                            玩快艇玩快艇玩快艇玩快艇玩快艇玩快艇玩快艇玩快艇玩快艇</p>
                        <font color="#e9967a">&yen;299</font>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="thumbnail">
                        <img src="../../image/jiangxuan_2.jpg" alt="">
                        <p>玩快艇玩快艇玩快艇玩快艇玩快艇玩快艇玩快艇玩快艇玩快艇
                            玩快艇玩快艇玩快艇玩快艇玩快艇玩快艇玩快艇玩快艇玩快艇</p>
                        <font color="#e9967a">&yen;299</font>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--3页脚部分-->
<footer class="container-fluid">
    <div class="row">
        <img src="../../image/footer_service.png">
    </div>
    <div class="row companyinfo">
        bed旅游公司bed旅游公司bed旅游公司bed旅游公司bed旅游公司bed旅游公司bed旅游公司
    </div>
</footer>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

 

 

 

bbbeddd
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Bootstrap概念和基本结构（网格系统）
weixin_45921263的博客
06-24 1911
文章目录前言一、Bootstrap概念及优点（使用Bootstrap的原因）二、Bootstrap基本结构1.Bootstrap网格系统2.媒体查询3.网格选项（网格系统如何跨多个设备工作）总结 前言 本篇文章开始对Bootstrap的简述及它所包含内容的大致了解。对于Bootstrap概念的理解，对于学习这块知识起着非常重要的作用。 一、Bootstrap概念及优点（使用Bootstrap的原因） 1.概念： 首先，Bootscript是目前比较受欢迎的前端框架。其次，它是基于HTML、CSS、JA
JavaWeb CSS框架之BootScript
zm13319249591的博客
04-10 1660
一.CSS框架概述1.概念css框架是一系列css文件的集合体，包含了基本的元素重置，页面排版、网络布局、通用规则等代码块、用于简化web前端开发的工作、提高工作效率2.产生原因a:提高css代码重用效率 ，基础的代码不需要重复编写b:提高统一而规范的css编码规则，有利于团队协作c:浏览器兼容性好二.BOOtStrap介绍1.简介BOOtStrapt是当前比较流行的css框架之一，它是Twitt...
bootscript/javascript组件
ddkk1112的博客
12-15 211
--------------------------------------------------bootscript/javascript组件----------------------------------- javascript组件 （1）每一个插件（带有js功能的组件），想使用bootstrap插件，一个是要去写他的html，第二个是使用CSS去修饰它，再...
前端BootScript bootstrapTable
weixin_43998184的博客
04-19 171
var myTable = $(’#assetsBank_table’).bootstrapTable({ url : url, // AJAX获取表格数据的url striped : true, // 是否显示行间隔色(斑马线) method:‘post’,//post请求需要配置contentType，默认是get请求不需要配置 pagination : true, // 是否显示分页（） s...
Bootstrap实例（四）
dengfengling999的博客
11-21 1301
在div中加属性：data-interval="1000" 修改轮播速度。标签的aria-controls 跟内容的a标签的href是相对应的。data-wrap="true"：当轮播玩重新开始。当鼠标移上不停止：默认是鼠标移动上去会停止。修改标签内容：data- 都是跟js相关的。修改img的样式、附加轮廓div：的样式。点击JavaScript组件。点击JavaScra组件。选择Carousel。
python初识
04-08
python 列表初识，通过此代码，你能够了解到python的列表操作
初识EclipseUserAssistance
02-27
火龙果软件工程技术中心 本文内容包括：EclipseUserAssistance概览结束语致谢参考资料本文介绍了EclipseUserAssistance项目，并讨论了众多可为基于Eclipse的应用程序提供高质量用户辅助的方法。...
初识InfluxDB
02-24
InfluxDB的数据模型和其他时序数据库有些许不同，下图是InfluxDB中的一张示意表：1.Measurement：从原理上讲更像SQL中表的概念。这和其他很多时序数据库有些不同，其他时序数据库中Measurement可能与Metric等同，...
html+css第九天
qq_61418655的博客
07-28 107
bootstrap
html5shiv：用于解决IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题...
weixin_30558305的博客
10-29 248
由于IE6/IE7/IE8还有很大一部分用户，为了让网站浏览者都能正常的访问HTML5网站，解决方案就有下面两个： 1. 为网站创建多套模板，通过程序对User-Agent的判断给不同的浏览器用户显示不同的页面，这样的维护成本比较高，也失去响应式设计的意义。 2. 使用Javascript来使不支持HTML5的浏览器支持HTML标签。目前大多网站采用的这种方式（Bootcss官方例子也是如此）...
html5shiv.min.js 有什么作用呢？
jh_jing的博客
09-08 682
html5shiv：用于解决IE9以下版本浏览器对HTML5新增标签不识别，并导致CSS不起作用的问题。 由于IE6/IE7/IE8还有很大一部分用户，为了让网站浏览者都能正常的访问HTML5网站，解决方案就有下面两个： 1. 为网站创建多套模板，通过程序对User-Agent的判断给不同的浏览器用户显示不同的页面，这样的维护成本比较高，也失去响应式设计的意义。 2. 使用Javascript来使不支持HTML5的浏览器支持HTML标签。目前大多网站采用的这种方式（Bootcss官方例子也是如此）。
Bootstrap3 缩略图( thumbnail )
分享我的点点滴滴，在成长路上与你同行！
02-22 2747
     大多数站点都需要在网格中布局图像、视频、文本等。Bootstrap 通过缩略图为此提供了一种简便的方式。使用 Bootstrap 创建缩略图的步骤如下： 在图像周围添加带有 class .thumbnail 的 &lt;a&gt; 标签。 这会添加四个像素的内边距（padding）和一个灰色的边框。 当鼠标悬停在图像上时，会动画显示出图像的轮廓。 &lt;ul&gt; ...
前端框架bootscriptTable（前端表格框架）
qq_41767337的博客
04-27 7141
1 引包
bootscript响应式开发
weixin_46601305的博客
05-11 123
屏幕划分 手机 <768px 768px <=平板 <=992px 992px <=桌面显示器 <=1200px 1200px <=大桌面显示器
bootscript部署到服务器后图标不显示
小王先森的代码笔记
09-06 1388
本地上样式，图标什么都完全正常，但是部署到服务器上后图标显示不出来，在前台显示这样的错误， 翻译中文大概就是说谷歌不允许访问路径，网上找了很多解决方案，但是都不行，后来发现，只要把图标相关的文件fonts和放到本地项目里就可以了，至于为什么放在服务器上就不行了，这个可能是由于图标相关文件无法从服务上获取吧，再在引用里改成本地引用就好了。
bootscript官网帮助显示效果
xx13202405349的博客
02-28 888
Android 手机上安装并运行 Ubuntu 12.04.docx
最新发布
11-24
。。。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值