06 Bootstrap
Bootstrap
下载和使用
使用前端框架，所有的样式只需要调整标签类属性即可
https://v3.bootcss.com/getting-started/
bootstrap.min.css css压缩版，css文件文件夹里只用保留这个
bootstrap.min.js js压缩版，js文件夹里只用保留这个
fonts文件夹，字体样式，全部保留
然后直接拷到项目里
也可用cdn: https://www.bootcdn.cn/twitter-bootstrap/ ，拷css和js
bootstrap依赖于jquery，使用bootstrap必须先导入jquery
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
拷贝别人的bootstrap样式：
全局css样式
布局容器
.container 类用于固定宽度并支持响应式布局的容器。
<div class="container">
...
</div>
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。
<div class="container-fluid">
...
</div>
栅格系统
响应式布局：根据页面大小不同动态调整页面的样式
bootstrap会将一行均分成12份，row表示一行，col-md-1~12 表示多少份
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-9"></div>
<br>
<div class="col-md-6"></div>
</div>
响应式布局
页面大小不同有响应
...
<style>
.c1 {
background-color: red;
height: 100px;
border: 3px solid green;
}
@media screen and (max-width: 600px) {
.c1 {
background-color: blue;
height: 100px;
border: 3px solid green;
}
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3 c1"></div>
<div class="col-md-9 c1"></div>
<br>
<div class="col-md-6 c1"></div>
</div>
电脑上什么布局手机上还是什么布局（响应式布局）
手机：.col-xs-
平板：.col-sm-
桌面：.col-md-
大桌面：.col-lg-
...
<style>
.c1 {
background-color: red;
height: 100px;
border: 3px solid green;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3 c1 col-xs-3"></div>
<div class="col-md-9 c1 col-xs-9"></div>
<br>
<div class="col-md-6 c1 col-xs-6"></div>
</div>
</body>
列偏移
使用 .col-md-offset-* 类可以将列向右侧偏移
...
<style>
.c1 {
background-color: red;
height: 100px;
border: 3px solid green;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 c1"></div>
<br>
<div class="col-md-6 c1 col-md-offset-3"></div>
</div>
嵌套列
一个row里面还可以无限的嵌套row
...
<style>
.c1 {
background-color: red;
height: 100px;
border: 3px solid green;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 c1"></div>
<br>
<div class="col-md-6 c1 col-md-offset-3">
<div class="row">
<div class="col-md-1 c1"></div>
<div class="col-md-11 c1"></div>
</div>
</div>
</div>
</body>
表格
遇到table直接加上class="table table-bordered table-hover table-striped"
表单
form表单中input、textarea、select想让它有样式加上class="form-control"
input不能放在lable内否则input框会变短
<div class="container">
<div class="row">
<h2 class="text-center">登陆<span class="glyphicon glyphicon-user"></span></h2>
<div class="col-md-6 col-md-offset-3">
<form action="">
<div class="form-group has-error">
<lable for="i1">username:</lable>
<input type="text" id="i1" class="form-control">
</div>
<div class="form-group">
<lable for="i2">password:</lable>
<input type="text" id="i2" class="form-control">
</div>
<input type="submit" class="btn btn-primary pull-right">
</form>
</div>
<br>
</div>
</div>
按钮
为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式
样式：
- btn-default（默认样式）
- btn-primary（首选项）
- btn-success（成功）
- btn-info（一般信息）
- btn-warning（警告）
- btn-danger（危险）
- btn-link（链接）
尺寸：
- btn-lg（大按钮）
- btn-sm（小按钮）
- btn-xs（超小尺寸）
<a class="btn btn-success" href="http://www.baidu.com">Link</a>
<a class="btn btn-primary btn-sm" href="http://www.baidu.com">Link2</a>
清除浮动
<div class="clearfix">...</div>
组件
图标
例如：<span class="glyphicon glyphicon-heart"></span>
图标的样式可以按照文字来处理，比如color:red
专门做图标的网站：fontawesome.com.cn，下载后保留css和fonts，拷到项目中html直接引入即可
导航条
<nav class="navbar navbar-default">改为<nav class="navbar navbar-inverse">即把导航条改为黑色；加<nav class="navbar navbar-inverse navbar-fixed-top">让导航条固定在顶部
bootstrap-sweetalert
官网：https://lipis.github.io/bootstrap-sweetalert/
只用保留dist文件夹下的sweetalert.css和sweetalert.js和sweetalert.min.js，html引入css和js即可
浙公网安备 33010602011771号