点击刷新
1. bootstrap的安装和使用
官网： https://getbootstrap.com/
中文网： https://www.bootcss.com/
菜鸟驿站教程网： https://www.runoob.com/bootstrap/bootstrap-intro.html
1.1 bootstrap的介绍
BootStrap是最受欢迎的HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的WEB项目。
它特别适合没有设计师团队，甚至说没有前端团队，可以快速的开发出一个网页。
bootstrap的js代码是依赖于jQuery的，也就意味着你在使用Bootstrap动态效果的时候，一定要导入jQuery
1.2 下载与使用
1.2.1.下载：
https://v3.bootcss.com/getting-started/#download （下载用于生产环境的Bootstrap就行）
1.2.2.下载完成后
拷贝css文件夹中的bootstrap.min.css到项目文件的css文件中
拷贝js文件夹中的bootstrap.min.js到项目文件的js文件中
拷贝bootstrap-3.4.1-dist文件夹中的fonts文件夹到css文件中
（其余文件可以不用）
1.2.3.下载jquery.js
https://jquery.com/download/
Download the compressed, production jQuery 3.6.0 将该文件的内容打开，然后ctrl+s保存到本地
1.2.4.在html中将bootstrap和jquery导入使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 使用X-UA-Compatible兼容IE浏览器 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 有关视口的设置 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>首页</title>
<!-- 载入bootstrap的css -->
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
</body>
<!-- 载入jquery -->
<script src="js/jquery.js"></script>
<!-- 载入bootstrap的js插件之前先引jquery -->
<script src="js/bootstrap.min.js"></script>
</html>
2.布局容器和栅格网格系统
2.1 布局容器
2.1.1 .container 类
用于固定宽度并支持响应式布局的容器。（即页面两边留白，支持不同分辨率的响应布局）
<div class="container">
...
</div>
2.1.2 .container-fluid 类
用于 100% 宽度，占据全部视口（viewport）的容器。
<div class="container-fluid">
...
</div>
2.2 栅格网格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
下面就介绍一下 Bootstrap 栅格系统的工作原理：
● “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
● 通过“行（row）”在水平方向创建一组“列（column）”。
● 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
● 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
总结：先确定布局容器的格式是.container类,还是.container-fluid类—》然后在添加行（.row类）————》行类容器里只能包含列容器（.col-md（屏幕的种类）-列的数值，占几列）列的数值总和不能超过12.
屏幕种类有xs(超小屏幕 手机 (<768px))、sm（ (<768px) 小屏幕 平板 (≥768px)）、md（中等屏幕 桌面显示器 (≥992px)）、lg（大屏幕 大桌面显示器 (≥1200px)）
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4" style="background-color: gray;">4</div>
<div class="col-md-8 col-sm-8" style="background-color: blanchedalmond;">8</div>
</div>
</div>
2.2.1 列组合
即：一行的列不能超过12，最多分成12份！超出部分会自动换到下一行。
2.2.2 列偏移
使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。
2.2.3 列排序
通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。使列容器左右浮动，*代表列移动的列组合数，往前pull，往后push。
2.2.4 列嵌套
列里面还可以添加.row来进行嵌套，该行还可以分成12列！！这样就形成了嵌套。
2.2.5 设置适应各种分辨率的屏幕
3.常见样式
3.1 排版
3.1.1 标题
bootstrap对h1-h6的标题标签效果进行了调整
并且提供了对应的类名.h1-.h6，为非标题元素设置样式
也提供了副标题small标签和.small类
3.1.2 段落
通过.lead 来突出强调内容，其作用就是增大字体字号，加粗文本，而且对行高和margin也做出了相应的处理
3.1.3 强调
bootstrap定义了一套强调类名，这些强调类是通过颜色来表示强调，具体说明如下：
.textmuted :提示，使用浅灰色 .text-primary:主要，使用蓝色 .text-success:成功，使用浅绿色 .text-info:通知信息，使用浅蓝色 .text-warming：警告，使用黄色 .text-danger:危险，使用褐色
3.1.4 对齐效果
bootstrap定义了四个类名来控制文本的对齐风格：
.text-left:左对齐 .text-right：右对齐 .text-center：居中对齐 .text-justify：两端对齐
3.1.5 列表
去点列表---》class='list-unstyled' 内联列表（水平列表）---》class='list-inline'
3.1.6 表格
3.1.6.1 表格样式
Bootstrap为表格提供了一种基础样式和4种附加样式以及一个响应式的表格。在使用bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格。
基础样式
1）.table：基础表格
附加样式
1）.table-striped:斑马线表格
2）.table-bordered:带边框的表格
3）.table-hover:鼠标悬停高亮的表格
4）.table-condensed:紧凑型表格，单元格没有内距或内距较其他表格较小
3.1.6.2 tr、th、td样式
提供了五种不同的类名，每种类名控制了行的不同背景颜色
.active:将悬停的颜色应用在行或者单元格上 .success：表示成功的操作 .info：表示信息变化的操作 .warning：表示警告的操作 .danger:表示危险的操作
3.2 表单
表单的主要功能是用来与用户做交流的一个网页控件，良好的表单设计能够让网页和用户更好的沟通。表单中的常见的元素主要包括：文本输入框、下拉选择框、单选择框、复选按钮框、文本域和按钮等。
3.2.1 表单控件
.form-control .input-lg(框较大) .input-sm（框较小）
3.2.2 复选框
垂直显示，在每个div上加checkbox类，如下
<div class="row">
<div class="col-md-3">
<div class="checkbox">
<label for=""><input type="checkbox" name="hobby" id="">跳舞</label>
</div>
<div class="checkbox">
<label for=""><input type="checkbox" name="hobby" id="">唱歌</label>
</div>
</div>
</div>
水平显示 .checkbox-inline类
<div class="row">
<div class="col-md-3">
<label for="" class="checkbox-inline"><input type="checkbox">跳舞</label>
<label for="" class="checkbox-inline"><input type="checkbox">唱歌</label>
</div>
</div>
3.2.3 单选框
和复选框一样，只不过是.radio和.radio-inline 类
3.2.4 按钮
使用button实现
1）基础样式 btn类
附加样式：btn-primary、btn-info、btn-danger、btn-warning、btn-success、btn-link、btn-default
2）多标签支持：使用a、span、div等标签制作按钮
<a href="#" class="btn btn-info">a标签按钮</a>
<span class="btn btn-info">span标签按钮</span>
3)按钮大小
使用.btn-lg、.btn-sm、.btn-xs 就可以获得不同尺寸的按钮大小
4）按钮禁用
在标签中添加disabled=‘disabled’属性—把按钮完全禁用掉
在元素标签中添加.disabled的类，表示按钮样式禁用
3.2.5 表单布局
● 在父标签form里添加role=‘form’和class=‘form-horizontal’（用于水平表单，用的比较多）
● 把标签和控件放在一个带有class=‘form-group’的div标签中，这是获取最佳间距所必须的
● 向所有文本元素input、textarea、select等中添加claa=‘form-control’
3.3 缩略图
需要借助栅格网格系统，格式如下：
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>
效果如下：
3.4 面板
面板不需要放在栅格表格系统内，具体格式如下：
<div class="panel panel-warning"> 添加一个panel类和panel的颜色样式
<div class="panel-heading text-center"> 面板的头部heading
明星合集
</div>
<div class="panel-body"> 面板的身体body，body里面可以嵌套很多其他东西，比如缩略图、表格等
。。。。
</div>
</div>
4. bootstrap插件
导航栏、模态框、下拉菜单
详见：https://www.runoob.com/bootstrap/bootstrap-intro.html
© 著作权归作者所有
相关热门文章
发表评论
