标签分类 热门分类
当前位置:首页 > 程序设计电子书 > Bootstrap电子书网盘下载
Bootstrap实战从入门到精通 Bootstrap实战从入门到精通
ASR-06

ASR-06 提供上传

资源
24
粉丝
2
喜欢
77
评论
17

    Bootstrap实战从入门到精通 PDF 原书扫描版

    Bootstrap电子书
    • 发布时间:

    给大家带来的一篇关于Bootstrap相关的电子书资源,介绍了关于Bootstrap实战、从入门到精通方面的内容,本书是由水利水电出版社出版,格式为PDF,资源大小115.1 MB,未来科技编写,目前豆瓣、亚马逊、当当、京东等电子书综合评分为:7.4,更多相关的学习资源可以参阅 程序设计电子书、等栏目。

  • Bootstrap实战从入门到精通 PDF 下载
  • 下载地址:https://pan.baidu.com/s/16Hm9k0BOqfjPksFHelx2c
  • 分享码:5ye6
  • Bootstrap实战从入门到精通 PDF

    12万 用户检测,畅销书升级版;12年开发设计课堂教学工作经验,第一线老师半生心力。同归属于Bootstrap 运用Bootstrap第三方平台软件 企业官网 WAP网址 网络相册制做 HTML5移动应用开发 Web 前端开发 JavaScript 高級编程设计 网页制作 网页设计 企业网站建设类别。
    1.感受好。

    基本上每一章节目录常有二维码图片,微信扫码支付,能够随时播放视频。

    2.資源多

    从配套设施到扩展,资料库应有尽有。除开209节配套设施短视频和326个案例实例外。还出示给出教学资源:

    (1)练习题及面试题库(总共1500题)
    (2)案例库(各种实例4396个)
    (3)专用工具库(HTML参考手册12部、CSS参考手册12部、JavaScript参考手册27部)
    (4)网页页面模板库(各种模版1635个)
    (5)网页页面素材网(18类别)
    (6)网页配色库(623项)
    (7)网页欣赏案例库(总共508例)

    3.实例多

    案例实例丰富多彩详细,超过326个,边做边玩更便捷。跟随很多实例去学习培训,边学边做,从做初中,学习培训能够更深层次、更高效率。

    4.新手入门易

    遵照学习培训规律性,新手入门实战紧密结合。撰写方式选用基本知识 中小型案例 实战实例,內容循序渐进,由浅入深,从新手入门中学习培训实战运用,从实战运用中激起自学能力。

    5.服务项目快:

    出示在线客服,随时可沟通交流。出示QQ群、网站下载等拓宽渠道暖心便捷服务项目。

     《Bootstrap实战从入门到精通》一书系统软件解读了Bootstrap技术性的系统架构、基本知识、部件软件及其各种各样深度1实战运用。全书分成 3 绝大多数,共 21 章。第 1 一部分(第 1~3 章)为 Bootstrap 基本知识,关键详细介绍 Bootstrap 是啥,怎么使用 Bootstrap,及其 Bootstrap 的技术性特点;第 2 一部分(第 4~12 章)为 Bootstrap 基础应用,关键详细介绍Bootstrap 各种各样部件和软件的应用,怎样拓展Bootstrap,运用Bootstrap第三方平台软件等;第3一部分(第13~21章)为实战,详细介绍了企业官网、WAP网址、网络相册等6个运用 Bootstrap保持的新项目,能够让用户掌握应用Bootstrap开展前端工程师的过程。

     《Bootstrap 实战从入门到精通》配置了极其丰富多彩的教学资源,在其中配套设施資源有:239 节视频教学(可扫描二维码)、素材图片源代码;扩展教学资源有:练习题及面试题库、案例库、专用工具库、网页页面模板库、网页配色库、网页页面素材网、网页页面实例赏析库等。

     《Bootstrap 实战从入门到精通》合适做为 Bootstrap 新手入门、Bootstrap 架构、JavaScript 高級编程设计、HTML5中移动开发者的教材,也可做为高等学校网页制作、网页设计、企业网站建设、Web 前端工程师等技术专业的课堂教学教材或有关组织的培训教材。

    目录

    • 第 1章  初识 Bootstrap
    • 第 2章  使用 Bootstrap
    • 第 3章   Bootstrap基本架构
    • 第 4章   CSS 通用样式
    • 第 5章   CSS 组件(上)
    • 第 6章   CSS 组件(下)
    • 第 7章   JavaScript 插件(上)
    • 第 8章   JavaScript 插件(下)
    • 第 9章   Bootstrap源码解析
    • 第 10章  扩展组件
    • 第 11章  开发插件
    • 第 12章  使用第三方插件
    • 第 13章  配置 Bootstrap样式
    • 第 14章  案例开发:服装品牌网站
    • 第 15章  案例开发:酒店预定微信 wap 网站
    • 第 16章  案例开发:团队营销网站
    • 第 17章  案例开发:个人摄影相册
    • 第 18章  案例开发:单词分享网站
    • 第 19章  案例开发:企业网站

    读书笔记

    bootstrap模态框示例代码分享

    本文实例为大家分享了bootstrap模态框的具体代码,供大家参考,具体内容如下

    <!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, user-scalable=no"> 
     <title>XXX</title> 
     <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css"> 
     <link rel="stylesheet" href="css/main.css"> 
     <!--[if lt IE 9]> 
     <script src="lib/html5shiv/html5shiv.min.js"></script> 
     <script src="lib/respond/respond.min.js"></script> 
     <![endif]--> 
    </head> 
    <body> 
    <!--默认隐藏--> 
    <!--模态框声明--> 
    <div class="modal"> 
     <!--模态框窗口声明--> 
     <div class="modal-dialog"> 
      <!--内容声明--> 
      <div class="modal-content"> 
       aaaaa 
      </div> 
     </div> 
    </div> 
    <!--显示--> 
    <!--模态框声明--> 
    <!--<div class="modal show"> 
     <!–模态框窗口声明–> 
     <div class="modal-dialog"> 
      <!–内容声明–> 
      <div class="modal-content"> 
       aaaaa 
      </div> 
     </div> 
    </div>--> 
    <!--显示,加上头,主体和底部--> 
    <!--模态框声明--> 
    <!--<div class="modal show"> 
     <!–模态框窗口声明–> 
     <div class="modal-dialog"> 
      <!–内容声明–> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        头 
       </div> 
       <div class="modal-body"> 
        主体 
       </div> 
       <div class="modal-footer"> 
        底部 
       </div> 
      </div> 
     </div> 
    </div>--> 
    <!--不显示(点击按钮再显示),加上头,主体和底部,加上其他内容--> 
    <!--模态框声明--> 
    <!--<div class="modal" id="myModal" tabindex="-1">-->
    <!--加上tabindex后,点击ESC也能关闭模态框--> 
    <div class="modal fade" id="myModal" tabindex="-1">
    <!--加上fade后具有淡入淡出效果--> 
     <!--模态框窗口声明--> 
     <!--<div class="modal-dialog">--> 
     <div class="modal-dialog modal-lg"><!--可以调整大小--> 
      <!--内容声明--> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <!--关闭按钮--> 
        <button class="close" data-dismiss="modal"><!--可以关闭模态框--> 
         <span>×</span> 
        </button> 
        <!--头部标题--> 
        <h4 class="modal-title">登录</h4> 
       </div> 
       <div class="modal-body"> 
        <!--<p>暂时无法注册</p>--> 
        <div class="container-fluid"><!--在模态框主体部分还可以加入流体的栅格系统,一定是流体--> 
         <div class="row"> 
          <div class="col-lg-4 col-md-4 col-sm-6">haha</div> 
          <div class="col-lg-4 col-md-4 col-sm-6">hehe</div> 
          <div class="col-lg-4 col-md-4 col-sm-6">heihei</div> 
         </div> 
        </div> 
       </div> 
       <div class="modal-footer"> 
        <button class="btn btn-default">注册</button> 
        <button class="btn btn-primary">登录</button> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!--需要指定模态框的id--> 
    <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">点击弹出完整模态框</button> 
    <!--也可以使用方法a标签,data-target可以换成href--> 
    <a class="btn btn-primary" data-toggle="modal" href="#myModal">点击弹出完整模态框</a> 
    <!--data-backdrop默认是true,效果跟上面一样,如果是false,模态框背景无黑灰色,且点击空白处不会关闭模态框--> 
    <button class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-backdrop="false"> 
     点击弹出完整模态框 
    </button> 
    <!--data-backdrop默认是true,效果跟上面一样,如果是static,模态框背景有黑灰色,但是点击空白处不会关闭模态框--> 
    <button class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-backdrop="static"> 
     点击弹出完整模态框 
    </button> 
    <!--data-keyboard默认是true,即按Esc可以关闭模态框,如果是false,就不能关闭--> 
    <button class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-keyboard="false"> 
     点击弹出完整模态框 
    </button> 
    <!--href通过指定远程html文件即可远程加载内容到data-target="#myModal"模态框,远程中要加入header和footer--> 
    <button class="btn btn-primary" data-toggle="modal" data-target="#myModal" href="模态框远程.html"> 
     远程加载弹出完整模态框 
    </button> 
    <!----> 
    <button class="btn btn-primary" id="btn"> 
     jQuery实现弹出完整模态框 
    </button> 
    <script src="lib/jquery/jquery.js"></script> 
    <script src="lib/bootstrap/js/bootstrap.js"></script> 
    <script src="js/main.js"></script> 
    <script> 
     $('#btn').on('click', function () { 
      $('#myModal').modal('show'); 
     }); 
    // $('#myModal').modal({});如果不给参数,默认一打开浏览器就会弹出模态框 
     $('#myModal').modal({ 
      show:false,   /*如果不给参数,默认一打开浏览器就会弹出模态框,所以一开始不让它显示*/ 
      /*其他参数跟上面按钮中data-后面的一样*/ 
      remote:'模态框远程.html' /*远程加载*/ 
     }); 
     
     $('#myModal').on('show.bs.modal', function () { 
      alert('当模态框出现之前,触发该事件'); 
     }); 
     $('#myModal').on('shown.bs.modal', function () { 
      alert('当模态框出现之后,触发该事件'); 
     }); 
     $('#myModal').on('hide.bs.modal', function () { 
      alert('当模态框关闭之前,触发该事件'); 
     }); 
     $('#myModal').on('hidden.bs.modal', function () { 
      alert('当模态框关闭之后,触发该事件'); 
     }); 
     $('#myModal').on('loaded.bs.modal', function () { 
      alert('从远端的数据源加载完数据之后触发该事件');/*远程加载不是点击之后加载,默认页面加载完成后就已经加载好了*/ 
     }); 
    </script> 
    </body> 
     
    </html> 
    
    

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

    上一篇:Python即学即用  下一篇:黑客攻防从入门到精通:Web技术实战篇

    展开 +

    收起 -

     
    Bootstrap 相关电子书
    关于Bootstrap的学习笔记
    网友NO.721636

    jQuery开源组件BootstrapValidator使用详解

    本文实例为大家分享了BootstrapValidator使用方法,供大家参考,具体内容如下 github:https://github.com/nghuuphuoc/bootstrapvalidator 参考博客:JS组件系列——Form表单验证神器: BootstrapValidator 参考博客:bootstrapvalidator之API学习 表单HTML,如下: form role="form" id="roleForm" div class="box-body" div class="form-group" input type="text" class="form-control" id="inputRoleName" name="roleName" placeholder="角色名称" / /div div class="form-group" input type="text" class="form-control" id="inputRoleDescribe" name="roleDescribe" placeholder="角色描述" / /div div class="form-group" select class="form-control select2" id="selectRoleType" /select /div div class="form-group" select class="form-control select2" id="selectUseFlag" option selected="selected" value='Y'可用/option option value='N'不可用/option /select /div div class="form-group" input type="text" class="form-control" id="inputDisplaySn" name="displaySn" placeholder="显示序号" / /div /div /form js代码如下: function initForm(){ $('#roleForm').bootstrapValidator({ fields : { roleName : { validators : { notEmpty : { message : '角色名称不能为空' }, stringLength : { min : 1, max : 16, message : '角色名称长度必须在1到16位之间' }, regexp : { regexp : /^[^@#/\"\'等字符' } } }, roleDescribe : { validators : { notEmpty : { message : '角色描述不能为空' }, stringLength : { min : 1, max : 64, message : '角色描述长度必……

    网友NO.548819

    响应式框架Bootstrap栅格系统的实例

    实例如下: !DOCTYPE htmlhtmlhead lang="en" meta charset="UTF-8" title/title meta name="viewport" content="width=device-width, initial-scale=1" link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" / script language="JavaScript" src="js/jquery-3.js"/script style type="text/css" *{ top: 0px; padding: 0px; text-decoration: none; list-style-type: none; } .top-styl{ height: 50px; border: 1px solid red; background-color: #000000; } .img-styl{ width: 174px; height: 50px; background: url("imges/logo.png")no-repeat 0px 3px; background-size: contain; float: left; } .sousuo-styl{ width: 187px; float: left; } .top-search-input{ width: 150px; padding: 0 5px; height: 30px; border: 0; background: #363636; float: left; color: #ccc; } .top-search-submit{ width: 30px; height: 30px; border: 0; background: green url("imges/zoom.gif")center center no-repeat; float: left; cursor: pointer; //光标指针 } .dao-styll{ float: left; font-size: 16px; width: 329px; margin-left: 33px; margin-top: 11px; } .dao-styll li{ float: left; position: relative; //相对定位 text-align: center; padding: 0 7px; } .dao-styll li:hover{ background-color: #999; } .dao-styll li a{ color: #FFF; width: 100%; height: 34px; text-decoration: none; //取消下划线 } .dz-styl{ float: right; margin: -19px -9px 6px 21px; } .imgs-styl{ padding: 11px 0px 0px 114px; float: right; margin: 0px -98px -3px 8px; } .green-styl{ color: green; } .zc-styl{ color: white; } a{ text-decoration: none; } /style/head……

    网友NO.261165

    Yii2框架BootStrap样式的深入理解

    Yii2框架默认采用了bootstrap作为CSS风格,各种视图类组件都如此。之前一直采用默认风格,并在必要的时候添加或者修改一下class来达到目的。但在改版Yii1.1的orange项目时,发现之前也是套的模板,其实没有好好去理解一下bootstrap的那套规则,所以顺便大致梳理一下吧。以basic模板为例,对照http://v3.bootcss.com/css/ 上的内容进行。 看layouts/main.PHP,Yii2默认以HTML5文档类型进行的了,但语言默认是en-US,所以要改,在config/web.php中添加'language' = 'zh-CN', 到$config中 已经有viewport这个meta项,已经支持移动设备优先原则 layouts/main.php中有一些beginXxx(),endXxx()方法(如$this-beginPage(),$this-endBody())以及$this-head()的调用,查看yii\web\View类文档,发现它们都是一个mark,用来标记位置而已。AppAsset::register($this); 实际调用基类 yii\web\AssetBundle的register方法,将项目模板默认生成的assets/AppAsset.php中定义的CSS、JS及其相关依赖注册到视图$this (所谓“注册”,就是一种发布,一种有序的插入,这里之前的那一个个mark应该起作用了) AppAsset类默认定义的CSS是 css/site.css,因为$depends有 yii\bootstrap\BootstrapAsset,所以,实际在head部分插入的CSS类似如下(对应$this-head()) link href="/orange_yii2/web/assets/6cdf1901/css/bootstrap.css" rel="stylesheet"link href="/orange_yii2/web/css/site.css" r……

    Copyright 2018-2020 xz577.com 码农之家

    电子书资源由网友、会员提供上传,本站记录提供者的基本信息及资源来路

    鸣谢: “ 码小辫 ” 公众号提供回调API服务、“ 脚本CDN ”提供网站加速(本站寻求更多赞助支持)

    版权投诉 / 书籍推广 / 赞助:520161757@qq.com

    上传资源(网友、会员均可提供)

    查看最新会员资料及资源信息