Bootstrap 小结
Bootstrap 小结
Bootstrap4特点:1.兼容IE10+ 2.使用flexbox 布局 3.抛弃Nomalize.css 4.提供布局和 reboot 版本
Bootstrap组成:1.基础样式 2.常用组件 3.JS插件
常见问题:
1.Bootstrap 的优缺点
优点:CSS 代码结构合理 ,现成的样式可以直接用
缺点:定制较为繁琐,体积大
2.Bootstrap 如何实现响应式布局
原理:通过 media query 设置不同分辨率的class
使用:为不同分辨率选择不同的网格class
3.如何基于 Bootstrap 定制自己的样式
1.使用 css 同名类覆盖(简单场景使用)
2.修改源码重新构建
3.引用 scss 源文件,修改变量
知识点:
1.基本用法
制作简单登录页面
具体用法点击这里
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<title>Bootstrap</title>
<style>
#result{
display: none;
}
.title{
margin-top: 50px;
margin-bottom: 50px;
}
.operate button{
margin: 0 auto;
}
</style>
</head>
<body>
<h2 class="title col-6 offset-3">注册</h1>
<form id="myForm" class="col-6 offset-3">
<div class="form-group row">
<label class="col-2 col-form-label">姓名</label>
<div class="col-10">
<input class="form-control" name="name" type="text" />
</div>
</div>
<div class="form-group row">
<label class="col-2 col-form-label">密码</label>
<div class="col-10">
<input class="form-control" name="password" type="password" />
</div>
</div>
<div class="form-group row">
<label class="col-2 col-form-label">电话</label>
<div class="col-10">
<input class="form-control" name="cellphone" type="text" />
</div>
</div>
<div class="form-group row">
<label class="col-2 col-form-label">地址</label>
<div class="col-10">
<input class="form-control" name="address" type="text" />
</div>
</div>
<div id="result" class="alert alert-danger"> </div>
<div class="operate form-group row">
<button class="btn btn-primary" type="submit">提交</button>
</div>
</form>
<script>
var form = document.querySelector('#myForm');
var result = document.querySelector('#result');
form.addEventListener('submit', function(e){
if(!document.querySelector('[name=password]').value){
result.style.display = 'block';
result.innerHTML = '密码为空';
}else{
result.style.display = 'none';
}
e.preventDefault();
});
</script>
</body>
</html>
效果展示
2.Bootstrap JS 组件
基于 jQuery 写的,可以完成很多交互效果,所以需要引入 jQuery ,还需要引入 Popper.js (库)和 bootstrap.js
使用方式:1.基于 HTML 的 data-** 属性 2.基于 JS API
示例
结果:
3.Bootstrap 响应式布局
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<title>Bootstrap</title>
<style>
.content > div{
height: 100px;
line-height: 100px;
text-align: center;
color: #333;
background:#cccccc;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>
<div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>
<div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>
<div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>
<div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>
<div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>
<div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>
<div class="content col-12 col-lg-3 col-md-4 col-sm-6"><div>内容</div></div>
</div>
</div>
</body>
</html>
总共12个,屏幕尺寸 < 576px时,每行12个;768px>=屏幕尺寸>=576px时,每行6个;992px>=屏幕尺寸>=768px时,每行4个;屏幕尺寸>=992px时,为每行3个;
结果:
4.Bootstrap 定制方法
方法:1.使用 css 同名类覆盖(简单场景使用) 2.修改源码重新构建 3.引用 scss 源文件,修改变量
Bootstrap 小结的更多相关文章
- bootstrap小结
bootstrap总结 bootstrap总结 base css 我分为了几大类 1,列表 .unstyled(无样式列表),.dl-horizontal(dl列表水平排列) 2,代码 code(行级 ...
- bootStrap小结3
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...
- bootStrap小结2
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...
- bootStrap小结1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Node.js + Express 构建的订餐系统
Node.js的版本 - v0.8.12 Express的版本 – v3.3.3 (安装 $ npm install -g express) 系统的登录逻辑是:获取用户名 + 密码,向内网RTX服务 ...
- 关于Bootstrap table的回调onLoadSuccess()和onPostBody()使用小结
关于Bootstrap table的回调onLoadSuccess()和onPostBody()使用小结 Bootstrap table 是一款基于 Bootstrap 的 jQuery 表格插件, ...
- Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
Bootstrap时间日历插件bootstrap-datetimepicker配置与应用小结 by:授客 QQ:1033553122 1. 测试环境 win7 JQuery-3.2.1.min ...
- Bootstrap Bootstrap表格插件bootstrap-table配置与应用小结
Bootstrap表格插件bootstrap-table配置与应用小结 by:授客 QQ:1033553122 1. 测试环境 win7 JQuery-3.2.1.min.js 下载地址: h ...
- bootstrap与Select2使用小结
这个select2组件的功能确实很强大,可以将图片放入到select里面随着文字一起显示. 组件的下载地址以及API说明地址: 1.Select2使用示例地址:https://select2.gith ...
随机推荐
- twisted高并发库transport函数处理数据包的些许问题
还是在学校时间比较多, 能够把时间更多的花在学习上, 尽管工作对人的提升更大, 但是总是没什么时间学习, 而且工作的气氛总是很紧凑, 忙碌, 少了些许激情吧.适应就好了.延续着之前对twisted高并 ...
- 万水千山ABP - 时区问题
关于时间和时区问题,后面的参考文章中有详细的描述. 我遇到的问题是: 在MVC视图页面中,显示记录的生成时间 CreationTime <div> @Model.CreationTime ...
- reorder list(链表重新排序)
Given a singly linked list L: L0→L1→-→Ln-1→Ln,reorder it to: L0→Ln→L1→Ln-1→L2→Ln-2→- You must do thi ...
- MVC3 项目总结
验证 Validation 多样化验证规则 http://www.cnblogs.com/xling/archive/2012/07/11/2587002.html 最常见的验证方式是:在实体的属性上 ...
- saltstack安装部署以及简单实用
一,saltstack简介: SaltStack是一种新的基础设施管理方法开发软件,简单易部署,可伸缩的足以管理成千上万的服务器,和足够快的速度控制,与他们交流,以毫秒为单位. SaltSta ...
- hadoop_eclipse及HDT插件的使用
Hadoop Development Tools (HDT)是开发hadoop应用的eclipse插件,http://hdt.incubator.apache.org/介绍了其特点,安装,使用等,针对 ...
- Spring消息之STOMP
一.STOMP 简介 直接使用WebSocket(或SockJS)就很类似于使用TCP套接字来编写Web应用.因为没有高层级的线路协议(wire protocol),因此就需要我们定义应用之间所发送消 ...
- Mybatis 系列2
上篇文章 写了一个Demo简单体现了一下Mybatis的流程.本次,将简单介绍一下Mybatis的配置文件: 上次例子中,我们以 SqlSessionFactoryBuilder 去创建 SqlSes ...
- 6 Tools To Jump Start Your Video Content Marketing
http://www.forbes.com/sites/drewhendricks/2014/10/16/6-tools-to-jump-start-your-video-content-market ...
- windows xp + mysql5.5 + phpmyadmin insert 中文繁體
windows xp + mysql5.5 + phpmyadmin insert 中文繁體 今天也發生了,無法insert成功的問題: 在phpmyadmin 或doc下連接mysql執行都不行: ...