前端基础之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 ...
随机推荐
- sed简单用法
参数说明: -e 以指定的script来处理输入的文本文件 -f 以指定的script文件来处理输入的文本文件 -h 显示帮助 -n 仅显示script处理后的结果 -V 显示版本信息 -v 反选 动 ...
- date的讲解及分析
Date() 对象(获取时间的) 不过是用类的写法来实现的:(他也没有私有属性,都是通过__proto__继承来的) Date() 分两大系 一个是get系列(及获取时间) 一 ...
- Windows7无法访问共享文件夹(0x800704cf,0x80070035)解决方法
Windows7系统突然无法访问Linux的samba服务器,出现0x800704cf或者0x80070035错误,也不能访问其他windows机器的共享文件夹,解决方案如下两张图,配置与下面两张图为 ...
- 扫盲贴,802.11AD
早在去年,大家已经开始关注新的802.11ad规范,其高频高带宽低延迟的特性也让大家对将来的无线网络应用形态充满了期待,而今年的CES2016展会上,已经有不少的802.11ad产品出现,看来2016 ...
- SpringBoot学习记(一)第一个SpringBoot Web服务
工具IDEA 一.构建项目 1.选择Spring Initializr 2.填写项目信息 3.勾选webService 4.勾选Thymeleaf 5.项目建立完成,启动类自动生成 二.写个Contr ...
- 17monipdb.dat
17monipdb是一款全球ipv4地址归属地数据库.专注于与地理位置定位相关的数据的整理与发行,致力于将地理位置数据变得更准确.更精确,该 IP 库主要基于 BGP/ASN 数据以及遍布全球的网络监 ...
- Eclipse里面的Maven项目打包(Maven build)
eclipse里面执行maven build打包的时候,如何设置参数? 主要就是设置一个goals
- php session保存到memcache或者memcached中
本教程叫你如何将php 的session存储在 memcached中,参考了好多网页,发现错误百出,最后自己还是测试成功了,现在将结果结果分享. 1-)系统环境 : elastix2.4 (cento ...
- 初学 python 之 用户登录实现过程
要求编写登录接口 : 1. 输入用户名和密码 2.认证成功后显示欢迎信息 3.用户名输错,提示用户不存在,重新输入(5次错误,提示尝试次数过多,退出程序) 4.用户名正确,密码错误,提示密码错误,重新 ...
- mysql 不能插入中文和显示中文
一)不能显示中文解决办法: 参考:http://bbs3.chinaunix.net/thread-880131-1-1.html 1:windows平台,因为windows操作系统默认的是用了gb2 ...