BootStrap的学习与使用
时间:2022-07-24
本文章向大家介绍BootStrap的学习与使用,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
BootStrap
1.概述:
* 一个前端开发的框架,Bootstrap,来自Twitter,是目前很受欢迎的前端框架。Bootstrap是基于html,css,JavaScript的,它简洁灵活,使得web开发更加快捷。
* 框架:一个半成品,开发人员可以在框架基础上,再进行开发,简化编码。
* 好处:
1.定义了很多css样式和js插件。我们开发人员直接可以使用这些样式和插件得到丰富的页面效果。
2.响应式布局:
* 同一套页面可以兼容不同分辨率的设备。
2. 快速入门
1.下载Bootstrap 2.在项目中将这三个文件夹复制 3.创建html页面,引入必要的资源文件
<!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">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>HelloWorld</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<h1>你好,世界!</h1>
</body>
</html>
3. 响应式布局:
1. 栅格系统入门:
* 同一套页面可以兼容不同分辨率的设备;
* 实现:依赖于栅格系统:将一行平均分成12个格子,可以指定元素占几个格子
* 步骤:
1.定义容器:相当于之前的table
* 容器分类:
1.container:两边留白
2.container-fluid:占满屏幕,宽度100%
2.定义行:相当于之前的tr 样式row
3.定义元素。指定该元素在不同的设备上,所占的格子数目。 样式:col-设备代号-格子数目
* 设备代号:
1.xs:超小屏幕,手机(<768px):clo-xs-12
2.sm:小屏幕,平板(≥768px)
3.md:中等屏幕,桌面显示器(≥992px)
4.lg:大屏幕 大桌面显示器(≥1200px)
-----------------------------------------------------------
<!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">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>栅格系统-入门</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<style>
.inner{
border: 1px solid red;
}
</style>
</head>
<body>
<!-- 1.定义容器:-->
<div class="container-fluid">
<!-- 2.定义行-->
<div class="row">
<!-- 3.定义元素-->
<!-- 在大显示器一行12个格子-->
<!-- 在pad上一行6个格子-->
<div class="col-lg-1 col-sm-2 inner" >栅格</div>
<div class="col-lg-1 col-sm-2 inner" >栅格</div>
<div class="col-lg-1 col-sm-2 inner" >栅格</div>
<div class="col-lg-1 col-sm-2 inner" >栅格</div>
<div class="col-lg-1 col-sm-2 inner" >栅格</div>
<div class="col-lg-1 col-sm-2 inner" >栅格</div>
<div class="col-lg-1 col-sm-2 inner" >栅格</div>
<div class="col-lg-1 col-sm-2 inner" >栅格</div>
<div class="col-lg-1 col-sm-2 inner" >栅格</div>
<div class="col-lg-1 col-sm-2 inner" >栅格</div>
<div class="col-lg-1 col-sm-2 inner" >栅格</div>
<div class="col-lg-1 col-sm-2 inner" >栅格</div>
</div>
</div>
</body>
</html>
2. 栅格系统注意事项:
1.一行中如果格子数目超过12,则超出部分自动换行; 2.栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备; 3.如果真是设备宽度小于了设置栅格类属性的设备代码的最小值,会一个元素沾满一整行。
4. CSS样式和JS插件:
1. 全局CSS样式:
- 按钮:class=”btn btn-default”
- 图片:
class="img-responsive":图片在任意尺寸都占100%
<!--hexoPostRenderEscape:<figure class="highlight plain"><table><tr><td class="code"><pre><span class="line"></span><br><span class="line">* 图片形状:</span><br><span class="line"></span><br><span class="line"> ```html</span><br><span class="line"> <img src="..." alt="..." class="img-rounded">:方形</span><br><span class="line"> <img src="..." alt="..." class="img-circle">:圆形</span><br><span class="line"> <img src="..." alt="..." class="img-thumbnail">:相框</span><br></pre></td></tr></table></figure>:hexoPostRenderEscape-->
- 代码示例:
<!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">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>HelloWorld</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
<!-- Standard button -->
<button type="button" class="btn btn-default">(默认样式)Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">(首选项)Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">(成功)Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">(一般信息)Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">(警告)Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">(危险)Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">(链接)Link</button>
<hr>
<img src="img/banner_1.jpg" class="img-responsive ">
<img src="img/banner_1.jpg" class="img-responsive img-rounded">
<img src="img/banner_1.jpg" class="img-responsive img-circle">
<img src="img/banner_1.jpg" class="img-responsive img-thumbnail">
</body>
</html>
- 表格:
- table:单纯的表格
- table-bordered:带边框的表格
- table-hover:鼠标悬停
- 表单:
- 给表单项添加:class=”form-control”
- 示例:
<!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">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>HelloWorld</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-bordered">
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>男</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>男</td>
</tr>
</table>
<hr><hr><hr>
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</body>
</html>
2. 组件:
- 导航条
- 分页条
- 具体代码看文档
3. 插件:
- 轮播图
<!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">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>HelloWorld</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/banner_1.jpg" alt="...">
</div>
<div class="item">
<img src="img/banner_2.jpg" alt="...">
</div>
<div class="item">
<img src="img/banner_3.jpg" alt="...">
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>
示例访问Bootstrap中文网
文章作者: silentcow
文章链接: http://silentcow.cn/2020/08/06/BootStrap/
- 怎样用Python给宝宝取个好名字?
- 字符串处理技巧
- SwipeRefreshLayout下拉刷新组件
- 使用数字进行字符遍历
- 技术分享:杂谈如何绕过WAF(Web应用防火墙)
- 模拟Executor策略的实现如何控制执行顺序?怎么限制最大同时开启线程的个数?为什么要有一个线程来将结束的线程移除出执行区?转移线程的时候要判断线程是否为空遍历线程的容器会抛出ConcurrentM
- ViewPager快速实现引导页
- Linux学习 - 常用和不太常用的实用awk命令
- 漏洞预警:厄运cookie(Misfortune Cookie)漏洞影响全球1200万台路由器
- 漏洞预警:Google安全研究人员发现NTP(网络时间协议)最新漏洞
- 揭秘:从内部源码看Facebook技术(第一集)
- Python 自然语言处理《釜山行》人物关系
- 注意:C++中double的表示是有误差的
- 完善RecyclerView,添加首尾视图
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Android ToolBar 修改边距的实现方法
- Android 自定义view实现TopBar效果
- Android 客户端RSA加密的实现方法
- Android圆形头像拍照后“无法加载此图片”的问题解决方法(适配Android7.0)
- Android 中Failed to read key from keystore解决办法
- Android圆角按钮的制作方法
- Android计时器控件Chronometer应用实例
- Android 中利用 ksoap2 调用 WebService的示例代码
- Android自定义View展示Wifi信号强弱指示方法示例
- android事件分发机制的实现原理
- Android 在子线程中更新UI的几种方法示例
- WebView设置WebViewClient的方法
- Android星级评分条的实现代码
- Android模仿美团顶部的滑动菜单实例代码
- android实现按钮获取焦点延迟加载