快速学习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

快速学习bootstrap前台框架

时间: 2024-07-31 08:15:31

快速学习bootstrap前台框架的相关文章

如何快速学习bootstrap3.3.2

如何快速学习bootstrap bootstrap中文网 http://www.bootcss.com/ 解决了我所有使用bootstrap的问题,从0开始,下面的全部链接都是该网站的子链接. 例子 http://v3.bootcss.com/examples/theme/ 解决了我按钮.panel(面板).警告提示(该链接在http://v3.bootcss.com/getting-started/中) jQuery API http://jquery.bootcss.com/ 解决了我滑动显

Bootstrap快速学习笔记(2)表单系列之二

欢迎收看大奥编写的Bootstrap快速学习笔记(2)表单系列之二 本学习笔记根据[慕课网]教程修改而来,用它学习Bootstrap,将会带来全新的体验哦: 表单控件大小 表单控件状态 按钮 图像 详细介绍 表单控件大小表单控件大小可以通过给表单控件添加class类来实现,如果想要比较大,则添加input-lg类,如果想要比较小, 则添加input-sm类,但这仅是对高度进行了处理,如果要对宽度进行处理,需要在每个input控件外围添加div容器并带有col-xs-4类,并 且要在这组控件的外围

Bootstrap快速学习笔记(1)排版系列之二

欢迎收看大奥编写的Bootstrap快速学习笔记(1)排版系列之二 本学习笔记根据[慕课网]教程修改而来,用它学习Bootstrap,将会带来全新的体验哦: 表格 表格行的类 详细介绍 表格表格是Bootstrap的基础组件之一,有一个基础样式和四个附加样式以及一个响应式样式,全部通过class类来实 现,.table:基础表格,这是无论哪种类型的表格都必不可少的类:.table-striped:斑马线表格,更具可读性:.table- bordered:带边框的表格:.table-hover:鼠

Bootstrap快速学习笔记(1)排版系列之一

欢迎收看大奥编写的Bootstrap快速学习笔记(1)排版系列之一 本学习笔记根据[慕课网]教程修改而来,用它学习Bootstrap,将会带来全新的体验哦: 标题 段落 强调内容 粗体和斜体 强调相关的类 文本对齐风格 列表 代码展示 详细介绍 标题 Bootstrap重写了h1-h6标题的样式属性并自定义了.h1-.h6类,并用small标签来显示副标题 段落 Bootstrap重写了p标签的样式属性 强调内容 .lead类改变文本样式 粗体和斜体 粗体<strong><b>斜体

Bootstrap快速学习笔记(2)表单系列之一

欢迎收看大奥编写的Bootstrap快速学习笔记(2)表单系列之一 本学习笔记根据[慕课网]教程修改而来,用它学习Bootstrap,将会带来全新的体验哦: .form-control类 水平表单 内联表单 详细介绍 form-control类把该类直接添加到控件上: 1.宽度变成了100%:2.设置了一个浅灰色(#ccc)的边框:3.具有4px的圆角:4.设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有所变化:5.设置了placeholder的颜色为#999 水平表单最外层form标签要

(*)(转)要快速学习SSM框架,你需要一套学习曲线平滑的教程

作者:meepo链接:https://www.zhihu.com/question/57719761/answer/156952139来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 要快速学习SSM框架,你需要一套学习曲线平滑的教程 1. 很快可以看到效果 SSM框架这种教程的,在百度或者git上一搜一大把,不过很遗憾,大部分你照着上面的流程做,是做不出来的,要么缺少包,要么配置文件漏了一个,要么本身就有问题.不仅浪费了你的时间,还会产生消极的作用,让你怀疑自己是

对比深度学习十大框架:TensorFlow 并非最好?

http://www.oschina.net/news/80593/deep-learning-frameworks-a-review-before-finishing-2016 TensorFlow 链接:https://www.tensorflow.org/ 对于那些听说过深度学习但还没有太过专门深入的人来说,TensorFlow 是他们最喜欢的深度学习框架,但在这里我要澄清一些事实. 在 TensorFlow 的官网上,它被定义为「一个用于机器智能的开源软件库」,但我觉得应该这么定义:Te

Python学习(三) Django框架简单搭建

为了快速学习Python进行Web的开发,所以我不准备从Python的基础学起,直接从Django框架入手,边学框架边学Python的基础知识. 下面就开始Django的快速开发之旅吧. 关于Django框架1.8的英文文档在其官网上都有,地址 https://docs.djangoproject.com/en/1.8/intro/ Python的开发手册地址:https://pythonspot.com/getting-started/ https://docs.djangoproject.c

快速学习C语言三: 开发环境, VIM配置, TCP基础,Linux开发基础,Socket开发基础

上次学了一些C开发相关的工具,这次再配置一下VIM,让开发过程更爽一些. 另外再学一些linux下网络开发的基础,好多人学C也是为了做网络开发. 开发环境 首先得有个Linux环境,有时候家里机器是Windows,装虚拟机也麻烦,所以还不如30块钱 买个腾讯云,用putty远程练上去写代码呢. 我一直都是putty+VIM在Linux下开发代码,好几年了,只要把putty和VIM配置好,其实 开发效率挺高的. 买好腾讯云后,装个Centos,会分配个外网IP,然后买个域名,在DNSPod解析过去