前端学习笔记---BootStrap框架
Bootstrap
前端框架 内部包含很多的页面样式 如有需要 直接下载对应文件 然后cv
宗旨: 在使用Bootstrap后 所有的页面 都仅需要class调节来即可
版本推荐 3
bootstrap的动态代码依赖jQuery 所以 必须先导入jQuery
cdn地址
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.0/js/bootstrap.min.js"></script>
然后彻底变成cv工程师
布局容器
左右留白
<div class = "container">
...
<div>
左右没有留白
...
所以之后再用Bootstrap的时候 默认的先写一个<div class="container"></div>
浮动
.pull-right 右飘
栅格系统
将一行分为12份
<div class="row"> 会将内容分割为12份 不仅仅是一行
<div class="row">
<div class="col-md-1">
<div class="row">
将一份再均分为12份
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6 c1">1</div>
<div class="col-md-6 c1">2</div>
</div>
</div>
col-md-1 代表占一份 超过
超过12份后 会打破布局
响应式布局
加入栅格参数
.col-xs- 超小屏幕手机
.col-sm- 平板
.col-md- 桌面显示器
.col-lg- 大桌面显示器
针对不同的显示器 bootstrap会自动选择不同的参数
## 我猜是加了左浮动
栅格移动
col-md-offset-2 左向右移动两份
排版
bootstrap 将所有的原生html文本 统一设置为了可以接受的样子
标题可以加小标题了你好不太好
文本可以加入 .lead 表示强调
.text-center 表居中
<del></del> 删除线
缩略语
<abbr title="我是注释">我是内容</abbr>
表格标签
点击查看代码
<table class="table table-hover table-bordered table-striped text-center">
<thead>
<tr>
<th>ID</th>
<th>name</th>
<th>password</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>1</td>
<td>cc</td>
<td>1234</td>
</tr>
<tr class="warning">
<td>1</td>
<td>cc</td>
<td>1234</td>
</tr>
<tr class="danger">
<td>1</td>
<td>cc</td>
<td>1234</td>
</tr>
<tr class="info">
<td>1</td>
<td>cc</td>
<td>1234</td>
</tr>
<tr class="active">
<td>1</td>
<td>cc</td>
<td>1234</td>
</tr>
</tbody>
表单
去网址copy 记住加入 form-contr类
<form action="" class="text-center">
<p>username: <input type="text" class="form-control"></p>
<p>password: <input type="password" class="form-control"></p>
<p>
<select name="" id="" class="form-control">
<option value="1">1</option>
<option value="2">2</option>
</select>
</p>
<input type="submit">
</form>
! 针对报错信息 可以加一个 .has-error 但是是给input的父标签加
按钮
<p>
<a href="http://www.baidu.com" class="btn btn-info">千万别点我</a>
</p>
<p>
<button class="btn btn-danger">点我</button>
</p>
btn-block 让按钮占据父标签全部
图片
class = "img-circle" 圆形图片
组件
图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其
他类共同存在。应该创建一个嵌套的 <span> 标签，并将图标类应用到这个 <span> 标签上。
图标: <span class="去网址找"><span>
<h2 class="text-center">登录页面<span class="glyphicon glyphicon-import"></span></h2>
图标可以改颜色
导航条:
去网址copy
然后改内部的文本
分页:
去网址copy
徽章:
去网址copy
巨幕:
一个大屏
去网址copy
警告框:
SweetAlert 下载 引入
swal('你还好吗')
swal('1','2')
swal('1','2','success')
swal('1','2','info')
swal('1','2','error')
进度条:
copy
进度 调节width 的值
面板:
就是块
js插件
模态框
见网址
test页面
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
</div>
<div class="col-md-8">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">图书管理系统</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-4">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-md-2 pull-right">
<button class="btn btn-success"> 添加 </button>
</div>
</div>
<div class="row">
<table class="table table-striped table-bordered">
<thead>
<tr>
<td>书名</td>
<td>编号</td>
<td>作者</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr>
<td>cc编程之路</td>
<td>1</td>
<td>cc</td>
<td>
<button class="btn btn-success btn-xs">编辑</button>
<button class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
<tr>
<td>cc编程之路</td>
<td>1</td>
<td>cc</td>
<td>
<button class="btn btn-success btn-xs">编辑</button>
<button class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
<tr>
<td>cc编程之路</td>
<td>1</td>
<td>cc</td>
<td>
<button class="btn btn-success btn-xs">编辑</button>
<button class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
<tr>
<td>cc编程之路</td>
<td>1</td>
<td>cc</td>
<td>
<button class="btn btn-success btn-xs">编辑</button>
<button class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
</tbody>
</table>
<nav aria-label="Page navigation" class="text-center">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号