12.25 项目前端bootstrap框架使用

风流意气都作罢 提交于 2019-12-30 20:19:56

bootstrap 样式框架 用于快捷开发 网页 app

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。

-------------------------------------------------

 

 

如何使用?

1)去下载框架 https://v3.bootcss.com/ 中文官网

bootstrap-3.3.7-dist.zip 生产环境

 

解压

 

2)使用 BootCDN 提供的免费 CDN 加速服务(同时支持 http 和 https 协议

CDN 使用框架资源都是通过 网络动态使用的。本地项目不做任何引用。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

 

 

 

3)bootstrap开发 iconfont使用

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>博客园</title>

<link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">

<link rel="stylesheet" href="lib/bootstrap/css/bootstrap-theme.css">

</head>

<body>

<!-- bootstrap 3.7 模板文件 -->

<div class="container">

<h1>标题一</h1>

<p>

hello boot<mark>java</mark>strap <del>删除效果</del>,

</p>

<p>

<form class="form-horizontal">

<div class="form-group">

<label for="inputEmail3" class="col-sm-2 control-label">会员</label>

<div class="col-sm-10">

<input type="email" class="form-control" id="inputEmail3" placeholder="会员账号">

</div>

</div>

<div class="form-group">

<label for="inputPassword3" class="col-sm-2 control-label">密码</label>

<div class="col-sm-10">

<input type="password" class="form-control" id="inputPassword3" placeholder="密码">

</div>

</div>

<div class="form-group">

<div class="col-sm-offset-2 col-sm-10">

<div class="checkbox">

<label>

<input type="checkbox"> 记住密码

</label>

</div>

</div>

</div>

<div class="form-group">

<div class="col-sm-offset-2 col-sm-10">

<button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-user"></i> 用户登录</button>

<button type="reset" class="btn btn-danger"><i class="glyphicon glyphicon-repeat"></i> 取消</button>

</div>

</div>

</form>

</p>

<p>

<h1>bootstrap 图标使用</h1>

<i class="glyphicon glyphicon-warning-sign" style="font-size:50px;color:orange"></i>

</p>

</div>

<script src="lib/jquery/jquery-3.4.1.js"></script>

<script src="lib/bootstrap/js/bootstrap.js"></script>

</body>

</html>

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!