zoukankan      html  css  js  c++  java
  • 快速学习bootstrap前台框架

    W3c里的解释

    使用bootstrap需要注意事项

    1、  在html文件第一行要加上<!doctype html>[s1] 

    2、  导入bootstrap.min.css文件

    3、  导入jquery.js[s2] 与bootstrap.js[s3] 

    快速学习

    1、  登陆http://www.w3cschool.cc/bootstrap

    2、  查看里面解说

    3、  通过以下实例了解如何学习w3c的bootstrap。(一个警告框的实例)

    <!DOCTYPE html>
    <html>
    <head>
       <title>Bootstrap 实例 - 警告(Alerts)</title>
       <link href="bootstrap.min.css" rel="stylesheet">
       <script src="jquery.min.js"></script>
       <script src="bootstrap.min.js"></script>
    [s4] </head>
    <body>
    <div class="alert[s5]  alert-success[s6] ">成功!很好地完成了提交。</div>
    <div class="alert alert-info[s7] ">信息!请注意这个信息。</div>
    <div class="alert alert-danger alert-dismissable">错误!请进行一些更改。
     <button class="close[s8] " data-dissmiss[s9] ="alert[s10] ">&times;</button>
    </div>
    <div id="myalert" class="alert alert-warning">警告!请不要提交。
    <button class="close">&times;</button>
    </div>
    <script>
    $(".close").click(function(){
        $("#myalert").button("close")[s11] [s12] ;
    });
    $(".close").on[s13] ("close.bs.alert[s14] ", function(){
       alert("alert alert alert");
    });
    </script>
    </body>
    </html>

    格栅系统快速知道

    <div class="container[s15] ">
    <div class="row[s16] ">
          <div class="col-*-*[s17] "></div>
          <div class="col-*[s18] -*[s19] "></div>      
       </div>
       <div class="row">...</div>
    </div>
    <div class="container">....

     

     

    本人使用网上的模板时,会卡住。这时浏览器左下方会出现连接fonts.googleapis.com提示,说明不能连接到谷歌服务器里。(有点暴力了)

    解决方案:删除掉该模板中所有有关fonts.googleapis.com的字段,该字段一般出现在link标签中,把href设置为空即可。例如:

    <link href=” fonts.googleapis.com/&*&**(*400,500” />

    改成

    <link href=”” />


     [s1]起到支持w3c的作用

     [s2]最好版本1.9的,jquery.min.js也行

     [s3]bootstrap.min.js也行

     [s4]必须要导入的文件

     [s5]申明该div是一个警告框,由此可生成警告框的样式

     [s6]声明该警告框的是一个成功的警告框的样式

     [s7]同alert-success一样,不过样式做了点修改

     [s8]同理是一个css样式,这里是一个关闭的样式,显示一个关闭小图标

     [s9]相当于一个事件吧,改变行为,这里是关闭一个警告框

     [s10]被关联的对象,要被关闭的对象

     [s11]Button的一个方法,关闭class为alert的#myalert的div元素

     [s12]等价于data-dissmiss [s12]="alert [s12]",不过这里data-dissmiss [s12]="alert [s12]"要添加到元素里

     [s13]不一定要是on,可以是live、bing等

     [s14]Botton插件的一个事件

     [s15]必须要有

     [s16]必须要有,占用一行

     [s17]必须要有,这里的值可以是col-md-1、col-md-2、col-xs-1等

     [s18]采用什么设备,就选指定的值,比如:如果是平板就用sm即col-sm-1

     [s19]是数值:1、2、3到12,最大为12

  • 相关阅读:
    高级开发必须理解的Java中SPI机制
    希尔排序--python
    SpringContextAware使用详解
    visio professional 2013 密钥
    二分查找--python
    [Oracle]单行字符函数
    [Oracle]sqlplus调整列宽
    [Oracle]MacOS sqlplus上下选择命令
    [Oracle]开启SCOTT账户
    [Oracle]Macos 安装Oracle Client 11g 11.2.0.4
  • 原文地址:https://www.cnblogs.com/sustudy/p/3927774.html
Copyright © 2011-2022 走看看