前端基础之Bootstrap
1. 页面加载完之后才执行的JS代码
1. DOM方式
window.onload = function(){}
2. jQuery方式
$(document).ready(function(){...})
2. Bootstrap
1. Bootstrap是什么?
twitter公司开源的一个前端开发框架。(一坨HTML、CSS和JS的代码)
2. Bootstrap的版本
3.3.版本
3. Bootstrap的使用
1. 下载
https://v3.bootcss.com/
2. 导入
link标签导入 bootstrap.css或者bootstrap.min.css
4. 常用样式类
1. 容器
1. container
2. container-fluid
2. 栅格系统
把一行均分成最多12列
可以设置标签占多少列
1. row表示一行
2. col-xx-**表示一列
xx: 表示样式适用的屏幕尺寸
- xs 手机
- sm 平板
- md 桌面显示器
- lg 超大屏幕
**:表示占多少份
- 取值范围: 1~12
3. col-xx-offset-**:
表示左侧空几份!
4. 列支持再嵌套(再写一行,分成12份)
5. 列排序
1. col-xx-push-* --> 往右推
2. col-xx-pull-* --> 往左拉
3. 布局样式
4. 表格
5. 表单
6. 按钮
7. 图片
8. 辅助类
1. 文本颜色
2. 背景颜色
3. 快速浮动
4. 清除浮动
前端基础之Bootstrap的更多相关文章
- 前端基础 之 Bootstrap框架
浏览目录 Bootstrap介绍 为什么要使用Bootstrap? Bootstrap环境搭建 布局容器 栅格系统 Bootstrap全局样式 一.Bootstrap介绍 Bootstrap是Twit ...
- 前端基础之Bootstrap介绍
bootstrap简介 http://v3.bootcss.com/ Bootstrap优点: 下载: Bootstrap引入 <meta name="viewport" ...
- 前端基础面试题(JS部分)
1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined.Null.Boolean.Number.String 值类型:数值.布尔值.null.und ...
- web前端基础学习路线
1.HTML和CSS的基础知识,完成网页的初步设计 2.JavaScript基础知识和DOM.BOM的学习 3.前端基础框架:CSS框架Bootstrap.JavaScript框架jquery的熟悉使 ...
- 前端学习之Bootstrap学习
一,Bootstrap简介 在前端世界,有个叫Bootstrap的家伙,,是twitter 开源出来的一套前端框架,利用Ta可以快速开发网站界面,它的特点就是比自己从头写简单,直观,方便,快捷,省劲. ...
- 前端基础面试题(js部分)
前端基础面试题(JS部分) 1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined.Null.Boolean.Number.String值类 ...
- web前端基础知识及快速入门指南
web前端基础知识及快速入门指南 做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...
- html css 前端基础 学习方法及经验分享
前言: 入园第一天,想分享一点儿前端基础html css 的学习方法和一些经验给热爱前端,但是不知道从哪儿开始,依旧有些迷茫的新手朋友们.当然,适合每个人的学习方式不同,以下所讲的仅供参考. 一.关于 ...
- HTML+DIV+CSS+JSweb前端基础
HTML+DIV+CSS+JSweb前端基础 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1) dir: 文本的显示方向,默认是从左向右 (2 ...
随机推荐
- python学习菜单
一.python简介 二.python字符串 三.列表 四.集合.元组.字典 五.函数 六.python 模块 七.python 高阶函数 八.python 装饰器 九.python 迭代器与生成器 ...
- 自己写的一个jQuery分页插件
;(function($){ $.fn.extend({ pageList: function (json) { function PageList() { this.initHtml = " ...
- javascript中setInterval制作跑马灯的效果
html代码: javascript代码 <script type="text/javascript"> function scroll() { var title = ...
- 批处理-通过mono把c#编译成dll
::copyright@cjy @echo off ::mcs.exe address set addrMcs=D:\Program Files\Unity\Editor\Data\MonoBleed ...
- ffmpeg 播放音频
播放音频,设置好SDL_AudioSpec播放参数,然后由SDL回调函数进行解码和数据的拷贝,解码播放音频无需设置延迟,因为声卡播放音频是阻塞的 int audio_decode_frame(AVCo ...
- Oracle直方图的详细解析(转)
Oracle直方图解析 一. 何谓直方图: 直方图是一种统计学上的工具,并非Oracle专有.通常用于对被管理对象的某个方面的质量情况进行管理,通常情况下它会表现为一种几何图形表,这个图形表是根 ...
- Python print函数参数详解
官方文档 print(…) print(value, …, sep=’ ‘, end=’\n’, file=sys.stdout, flush=False) Prints the valu ...
- jps命令发生异常
当在集群里输入jps命令时报如下错误: 我就开始检查jdk,感觉应该是centos自动的jdk没卸载干净跟后面安装的jdk冲突 先通过命令 rpm -qa|grep java 查看jdk信息 把这几个 ...
- 伯克利、OpenAI等提出基于模型的元策略优化强化学习
基于模型的强化学习方法数据效率高,前景可观.本文提出了一种基于模型的元策略强化学习方法,实践证明,该方法比以前基于模型的方法更能够应对模型缺陷,还能取得与无模型方法相近的性能. 引言 强化学习领域近期 ...
- Distill详述「可微图像参数化」:神经网络可视化和风格迁移利器!
近日,期刊平台 Distill 发布了谷歌研究人员的一篇文章,介绍一个适用于神经网络可视化和风格迁移的强大工具:可微图像参数化.这篇文章从多个方面介绍了该工具. 图像分类神经网络拥有卓越的图像生成能力 ...