前端框架 — Bootstrap

前端框架Bootstrap

# 官网：https://v3.bootcss.com/# 下载步骤1.进入官网直接点击下载2.选择用于生产环境的Bootstrap下载3.下载的压缩包 自行解压到能找到的文件路径4.使用框架调整页面样式一般都是操作标签的class属性即可# bootstrap需要依赖于jQuery才能正常执行(动态效果)# 引入方式本地引入(最完整的)1.引入jQuery2.引入bootstrap的css文件3.引入bootstrap的js文件CDN引入1.引入jQuery CDN2.引入bootstrap css的 CDN3.引入bootstrap js的 CDN
"""
CDN导入可以都写到pycharm默认文本模板中 今后在新建HTML文件就会自动添加：
进入 https://www.bootcdn.cn/twitter-bootstrap/ 官网
找到对应版本 选择复制链接<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
"""

布局容器

"""
第一次使用该框架的时候最好采用本地导入的方式
让pycharm记住bootstrap的关键字
"""
container       左右留白
container-fluid  左右不留白# HTML文件内容：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>牛逼的网站</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script><link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script><style>.c1 {background-color: red;height: 200px;}</style></head>
<body><div class="container c1">左右留白布局</div><div class="container-fluid c1">左右不留白布局</div></body>
</html>

栅格系统

 # 栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中row       行  # 一个row就是一行 一行是固定的12份
col-md-1    占几份
col-sm-1    占几份
col-xs-1    占几份
col-lg-1    占几份

HTML文件内容：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>牛逼的网站</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script><link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script><style>.c1 {background-color: red;height: 200px;border: 5px solid black;}</style></head>
<body><div class="container"><div class="row"><div class="col-md-6 c1 col-sm-6"></div><div class="col-md-6 c1 col-sm-6"></div></div></div>
</body>
</html>

表格

 # 为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补（padding）和水平方向的分隔线# 条纹状表格通过 .table-striped 类可以给 <tbody> 之内的每一行增加斑马条纹样式# 带边框的表格添加 .table-bordered 类为表格和其中的每个单元格增加边框# 鼠标悬停通过添加 .table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应# 紧缩表格通过添加 .table-condensed 类可以让表格更加紧凑，单元格中的内补（padding）均会减半

# HTML文件内容：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>牛逼的网站</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script><link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container"><div class="row"><div class="col-md-8 col-md-offset-2"><h2 class="text-center">用户数据</h2><table class="table table-hover table-striped table-bordered"><thead><tr><th>id</th><th>name</th><th>pwd</th></tr></thead><tbody><tr class="success"><th>001</th><th>jason</th><th>123</th></tr><tr class="danger"><th>002</th><th>ja</th><th>555</th></tr><tr><th class="warning">003</th><th>on</th><th>999</th></tr></tbody></table><h2 class="text-center">用户注册</h2><form action=""><p>姓名：<input type="text" class="form-control"></p><p>密码：<input type="text" class="form-control"></p><p>性别：<input type="radio">男<input type="radio">女</p><p><input type="submit" class="btn btn-danger btn-block"></p></form></div></div>
</div>
</body>
</html>

按钮组

# 可作为按钮使用的标签或元素
为 <a>、<button> 或 <input> 元素添加按钮类（button class）即可使用 Bootstrap 提供的样式<a href="" class="btn btn-primary">点这里</a>
<a href="" class="btn btn-block btn-danger">重置</a>

图标

class="glyphicon glyphicon-heart"# bootstrap自带的通过span标签修改class属性值# fontawesome网站专门提供图标库  # 完美兼容bootstrap框架https://fontawesome.dashgame.com/

其余详细描述详见官网文档：
https://v3.bootcss.com/

前端框架 — Bootstrap相关推荐

前端框架 Bootstrap 4.5.2 发布
前端框架 Bootstrap 4.5.2 发布了,此版本主要解决了以下两个问题: 恢复 make-container-max-widths mixin.它将保留在 v4 的代码库中. 从 .row 移 ...
前端框架 Bootstrap 4.4.0 发布
前端框架 Bootstrap 4.4.0 发布了,以下是更新内容: 新的响应式 .row-cols 类,用于快速指定跨断点的列数新的 escape-svg() 函数,可简化用于表单等的嵌入式背景图像 ...
前端框架——bootstrap/knockoutjs/angularjs
前端框架--bootstrap/knockoutjs/angularjs 转载于:https://blog.51cto.com/caochun/1854522
前端框架BootStrap之柱状图模板
前端框架BootStrap之柱状图模板写在前面:有段时间没更新博客了.本身是Java后端的.但是公司限制.后端在写.安卓在写.前端也在写.前端也和安卓一样比较菜,有不足的地方望路过的大佬指正.最近做 ...
【Java Web前端开发】前端框架 bootstrap+jquery+angularjs探索
文章目录 1 Bootstrap 2 jQuery 3 AngularJS 1 Bootstrap 在Bootstrap的官网介绍中,Bootstrap is the most popular HTM ...
前端框架-Bootstrap
Bootstrap 前端框架-twitter <!DOCTYPE html> <html lang="en"> <!--Bootstrap 前端框架- ...
bootstrap table 适应移动端_前端框架bootstrap和layui有什么区别
做前端的小伙伴肯定都用过或听过Bootstrap和LayUi,小编我虽然不是专业的前端程序员,但是对于前端还是颇有研究,闲暇事情会经常研究各种前端框架的源码,一来可以借鉴优秀框架的思想,二来可以顺便学 ...
前端框架——BootStrap学习
BootStrap简单总结下:1.栅格系统,能够很好的同时适应手机端和PC端(及传说中的响应式布局) 2.兼容性好接下来是对BootStrap学习的一些基础案例总结和回顾: 首先引入:bootstr ...
jquery 替换括号里面内容_【推荐】前端框架 Bootstrap 5.0 alpha 发布，不再依赖 jQuery...
来源:https://www.oschina.net/news/116540/bootstrap-5-0-alpha-released Bootstrap 团队发布了 Bootstrap 5 的 Al ...
前端框架 Bootstrap 5.0 alpha 发布
Bootstrap 团队发布了 Bootstrap 5 的 Alpha 版本.Bootstrap 5 的两个重要变化是,它不再依赖 jQuery,并且不再支持 Internet Explorer.针对 ...

前端框架 — Bootstrap

前端框架Bootstrap

布局容器

栅格系统

表格

按钮组

图标

前端框架 — Bootstrap相关推荐

最新文章

热门文章