Bootstrap 学习
上一次学习应用Bootstrap已经是大二的暑假了，感觉自己真的就是那种一不用就会忘记的人。所以现在又开始重温一下BootStrap了。记录一下这次的学习，随着后期的应用什么的在去更改。如果家人们觉得那里有问题或者那里不懂我们一起来学习一下了。
内容开始：
首先，Bootstrap是响应式布局设计，它可以让一个网站可以兼容不同分辨率的设备。
其组件是基于JQuery，即表明有了Jquery的插件后才可以显现出Bootstrap的插件。（jquery是js插件）
在html中模板为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
content=“IE=edge”兼容IE的
-->
<meta name="viewport" content="width=device-width,initial-scale=1">
<!--
viewport表示用户是否可以缩放页面；
width指定视区的逻辑宽度；
device-width指定视区宽度应为设备的屏幕宽度；
initial-scale指令用于设置web页面的初始缩放比例
initial-scale=1则将显示未缩放的Web文档
-->
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>hello,world</h1>
</body>
<script src="js/jquery-3.4.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<html>
-
布局容器
-
.container 两边有留白的效果的
<div class="container"></div> -
.container-fluid两边没有留白的效果
<div class="container-fluid"></div>
-
-
栅格网络系统
原则：列综合数不能超过12，大于12则自动换到下一行。有点儿类似于表格的colspan属性
<div class="container"> <div class="row"> <div class="col-md-4">4列</div> <div class="col-md-8">8列</div> </div> </div>- 其中有 md、xs、sm、lg四种。
列偏移：
<div class="col-md-4 col-md-offser-*">4列</div> <!-- 即偏移*个md的长度 -->列排序
- 改变左右浮动，并设置浮动的距离。在Bootstrap框架的网格系统中通过添加类名 col-md-push-x 和 *col-md-pull-x *来向前移动或者向后移动若干个单位（移动的单元已为浮动元素，即不占空间）
列嵌套
- 每一个列还是会在被分为12个单元
-
标题、段落、强调
- 标题
<h1>~<h6> 以及类名.h1~.h6，同时我们可以在后面紧跟着一行小的副标题<small></small>-
段落
可以通过.lead来突出强调内容（其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理） 且可以在里面进行 <small></small>小号字的效果 <b><strong>加粗效果 <i><em>斜体效果 -
强调:看个人需求吧我认为，目前认为这点不重要，可以自我设置
<div class="text-muted"> 提示，默认浅灰色 </div> <div class="text-primary"> 主要信息，默认蓝色 </div> <div class="text-success"> 成功信息，默认浅绿色 </div> <div class="text-info"> 通知信息，默认浅蓝色 </div> <div class="text-warning"> 警告信息。默认黄色 </div> <div class="text-danger"> 危险信息，默认红褐色 </div> -
对齐效果:个人认为不太需要，可能这样用会更便捷，方便，修改代码的时候方便吧
.text-left:左对齐
.text-center:居中对齐
.text-right:右对齐
.text-justify:两端对齐
-
列表：
-
去点列表
<ul class="list-unstyled"> <li></li> <li></li> </ul> -
内联列表:把垂直列表变成水平列表，而且去掉项目符号，导航栏可用
<ul class="list-inline"> <li></li> <li></li> <li></li> <li></li> </ul> -
自定义列表
<dl class="dl-horizontal"> <dt>Html 超文本标记语言</dt> <dd></dd> <dt>标题的宽度不能超过160Px，否则用省略号表示</dt> <dd></dd>
-
-
代码
<code>单行代码</code> <kbd>快捷键效果</kbd> <pre>多行代码的效果<pre> <!-- 其中多行的代码时会表留原本的格式的，其中包括空格以及回车； 若想显示html代码的话，则需要使用字符实体，如<> 若长度超过指定值，则课添加滚动条，即 class="pre-scrollable" --> -
表格
内添加斑马线形式的条纹 ( IE8 不支持) 内的任一行启用鼠标悬停状态类 描述 .table 为任意 添加基本样式 (只有横向分隔线) .table-striped 在 .table-bordered 为所有表格的单元格添加边框 .table-hover 在 .table-condensed 让表格更加紧凑 类 描述 .active 将悬停的颜色应用在行或者单元格上 .success 表示成功的操作 .info 表示信息变化的操作 .warning 表示一个警告的操作 .danger 表示一个危险的操作
-
表单
-
.form-control 表单元素的样式
表单文控的大小 .input-lg .input-sm
-
文本框
-
下拉框 有个多选选项 multiple=“multiple”
-
文本域
-
-
复选框、单选框
复选框 <!--竖直排列--> <div class="row"> <div class="col-md-3"> <div class="checkbox"> <lable><input type="checkbox" name="hobby">唱歌</lable> </div> <div class="checkbox"> <lable><input type="checkbox" name="hobby"/>跳舞</lable> </div> </div> </div> <!--水平排列--> <div class="row"> <div class="col-md-3"> <lable class="checkbox-inline" name="hobby"><input type="checkbox" name="hobby">唱歌 </lable> <lable class="checkbox-inline" name="hobby"> <input type="checkbox" name="hobby"/>跳舞 </lable> </div> </div> 单选框 <!--竖直排列--> <div class="row"> <div class="col-md-3"> <div class="radio"> <lable><input type="radio" name="hobby">唱歌</lable> </div> <div class="radio"> <lable><input type="radio" name="hobby"/>跳舞</lable> </div> </div> </div> <!--水平排列--> <div class="row"> <div class="col-md-3"> <lable class="radio-inline" name="sex"><input type="radio" name="sex">woman </lable> <lable class="radio-inline" name="sex"> <input type="radio" name="sex"/>man </lable> </div> </div> -
按钮
btn 为按钮添加基本样式 .btn-default 默认/标准按钮 .btn-primary 原始按钮样式（未被操作） .btn-success 表示成功的动作 .btn-info 该样式可用于要弹出信息的按钮 .btn-warning 表示需要谨慎操作的按钮 .btn-danger 表示一个危险动作的按钮操作 .btn-link 让按钮看起来像个链接 (仍然保留按钮行为) .btn-lg 制作一个大按钮 .btn-sm 制作一个小按钮 .btn-xs 制作一个超小按钮 .btn-block 块级按钮(拉伸至父元素100%的宽度) .active 按钮被点击 .disabled 禁用按钮 将普通元素变为按钮：class=“btn”
控制按钮大小：class=“btn-sm”…
-
表单布局
垂直效果 <form action="#" class="form-horizontal" role="form"> <div class="form-group"> <lable for="uname" class="control-lable col-md-2">姓名</lable> <div class="col-md-8"> <input type="text" id="uname" class="form-control" placeholder="请输入姓名"/> </div> </div> <div class="form-group"> <lable for="upsw" class="control-lable col-md-2">密码</lable> <div class="col-md-8"> <input type="text" id="upsw" class="form-control" placeholder="请输入密码"/> </div> </div> </form> 水平效果 <form class="form-inline"> <div class="form-group"> <lable for="usName">name</lable> <input type="text" id="usName" class="form-control" placeholder="请输入姓名"> </div> <div class="form-group"> <lable for="usPsw">密码</lable> <input type="text" id="usPsw" class="form-control" placeholder="请输入密码"> </div> </form>
-
-
缩略图和面板
缩略图最常用在产品列表页面，缩略图的实现时配合网格系统一同使用。同时还可以让缩略图配合标题、描述内容、按钮等
<div class="container">
<div class="row">
<!--开始缩略图-->
<div class="col-md-3">
<div class="thumbnail">
<img src="" alt="">
<h2>高圆圆</h2>
<p>Beijing,actor </p>
<button class="btn btn-default">
<span class="glyphicon glyphicon-heart"></span>
<!--bootStrap自带的图标-->
喜欢
</button>
<button class="btn btn-info">
<span class="glyphicon glyphicon-pencil"></span>
评论
</button>
</div>
</div>
</div>
</div>
面板，默认.panel组件所做的知识设置基本的边框和内边距来包含内容
<div class="panel panel-success">
<div class="panel-heading">
...
</div>
<div class="panel-body">
...
</div>
</div>
Bootstrap 插件
-
导航
-
标签型（nav-tabs)
-
胶囊型(nav-pills)
-
堆栈型(nav-stacked)
-
自适应(nav-justified)
-
面包屑（🐟前几种不同）(breadcrumb)
[直接加到ol、ul即可，一般用于导航，主要是起的作用是告诉用户现在所处页面的位置，不🐟nav一起使用]
- 分页导航 class=“pagination”
- 翻页 class=“pager”
-
-
下拉菜单 需要引用两个js文件
<!--.dropdown包裹所有的下拉菜单--> <div class="dropdown"> <button type="button" class="btn dropdown-toggle" data-toggle="dropdown"> 主题 <!--表示下拉箭头的符号--> <span class="caret"></span> </button> <!-- 下拉菜单项使用一个<ul>列表定义类名为：dropdown-menu； 分组分割线：<li>添加类名“divider”来实现添加下拉分割线的功能 分组标题：<li>添加类名“dropdown-header”来实现分组的功能 对齐则用类名“dropdown-menu-left”"dropdown-menu-right"来实现左对齐或者右对齐 激活状态和禁止状态用类名“active”“disabled”表示 --> <ul class="dropdown-menu" > <li class="dropdown-header">计算机</li> <li> <a href="#" target="_blank">Java</a> </li> <li role="presentation"> <a href="#" target="_blank">数据挖掘</a> </li> <li class="divider"></li> <li class="dropdown-header">休闲</li> <li> <a href="#" target="_blank">视频</a> </li> <li role="presentation"> <a href="#" target="_blank">游戏</a> </li> </ul> </div> -
模态框（弹窗）
覆盖在父窗体上的子窗体，通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等
默认是关闭的，我们只有在触发后才可以打开
可以采用有两种触发行为，一种是直接设置button，给予其data属性，使得点击后打开模态框；另一种是通过Js函数设置触发按钮函数
$("#btn").click(function(){ $("#myModal").modal("show"); })方法 描述 实例 Options: .modal(options) 把内容作为模态框激活。接受一个可选的选项对象。 $('#identifier').modal({ keyboard: false })Toggle: .modal(‘toggle’) 手动切换模态框。 $('#identifier').modal('toggle')Show: .modal(‘show’) 手动打开模态框。 $('#identifier').modal('show')Hide: .modal(‘hide’) 手动隐藏模态框。 $('#identifier').modal('hide')
<h2>创建模态框（Modal）</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
开始演示模态框
</button>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">模态框（Modal）标题</h4>
</div>
<div class="modal-body">在这里添加一些文本</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">提交更改</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
Bootstrap不难理解，其实https://www.runoob.com/bootstrap/bootstrap-tutorial.html会有更多的相关内容
