526互联

Bootstrap学习笔记

发布时间 2023-04-17 00:01:15作者: KuaiCode

1.布局容器和栅格网格系统

1.1 布局容器

  • .container类用于固定宽度并支持响应式布局的容器。

    <div class="container"></div>

  • .container-fluid类用于100%宽度，占据全部视口（viewport）的容器。

    <div class="container-fluid"></div>

1.2 栅格网格系统

​ Bootstrap 提供了⼀套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。栅格系统用于通过⼀系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放⼊这些创建好的布局中。
​ 网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份（也有平分成24份或32份，但12份是最常见的），再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。

1.2.1 列组合

​ 列组合简单理解就是更改数字来合并列，有点类似表格的colspan属性。

<div class="container">
    <div class="row">
        <div class="col-md-4" style="background-color: antiquewhite;">4</div>
        <div class="col-md-4" style="background-color: darkcyan;">4</div>
        <div class="col-md-4" style="background-color: firebrick;">4</div>
    </div>
</div>

1.2.2 列偏移

​ 如果不希望相邻的两个div标签紧靠在一起，但又不想使用margin等技术手段来实现，这个时候可以使用列偏移（offset）来实现。

<div class="container">
    <div class="row">
        <div class="col-md-1" style="background-color: navajowhite;">1</div>
        <div class="col-md-1 col-md-offset-1" style="background-color: orange">1</div>
        <div class="col-md-1" style="background-color: palegoldenrod">1</div>
        <div class="col-md-1 col-md-offset-2" style="background-color: rosybrown">1</div>
    </div>
</div>

注意：使用列组合和列偏移时，列的总数可以小于12，但不能超过12，超过后会自动换行。

1.2.3 列排序

​ 列排序其实就是左右浮动列。

<div class="container">
    <div class="row">
        <div class="col-md-1" style="background-color: yellowgreen;">1</div>
        <div class="col-md-1 col-md-push-1" style="background-color: azure;">1</div>
        <div class="col-md-1" style="background-color: aquamarine;">1</div>
        <div class="col-md-1  col-md-pull-2" style="background-color: cornflowerblue;">1</div>
    </div>
</div>

提示：列排序后如果有重叠，后面的div会覆盖前面的div。

1.2.4 列嵌套

​ Bootstrap框架的网格系统还支持列的嵌套。

<div class="container">
    <div class="row">
        <div class="col-md-6" style="background-color: crimson;">
            <div class="row">
                <div class="col-md-1" style="background-color: aquamarine;">1</div>
                <div class="col-md-4" style="background-color: bisque;">4</div>
            </div>
        </div>
        <div class="col-md-6" style="background-color: darkcyan;">
            <div class="col-md-4" style="background-color: cornflowerblue;">4</div>
            <div class="col-md-10" style="background-color: darksalmon;">10</div>
        </div>
    </div>
</div>

2.常用样式

2.1 排版

2.1.1 标题

​ Bootstrap和普通的HTML页面一样，定义标题都是使用标签<h1>到<h6>，只不过Bootstrap覆盖了其默认的样式，使其在所有浏览器下显示的效果一样。

<h1>标题1<small>副标题1</small></h1>
<h2>标题2<span class="small">副标题2</span></h2>
<h3>标题3</h3>
<div class="h1">文本</div>

2.1.2 段落

​ 段落也是排版中的一个重要元素。可以使用一下标签给文本做突出样式处理：

  • <small>：小号字
  • <b>和<strong>：加粗
  • <i>和<em>：斜体
<p>Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。</p>
<p class="lead"><b>Bootstrap</b>提供了<small>优雅</small>的<em>HTML</em>和<i>CSS</i>规范，它即是由动态<i>CSS</i>语言<strong>Less</strong>写成。</p>

2.1.3 强调

<div class="text-muted">提示，浅灰色（#999）</div>
<div class="text-primary">主要，蓝色（#428bca）</div>
<div class="text-success">成功，浅绿色（#3c763d）</div>
<div class="text-info">通知信息，浅蓝色（#31708f）</div>
<div class="text-warning">警告，黄色（#8a6d3b）</div>
<div class="text-danger">危险，褐色（#a94442）</div>

2.1.4 对齐

<p class="text-left">Bootstrap通过定义四个类名来控制文本的对齐风格</p>
<p class="text-right">Bootstrap通过定义四个类名来控制文本的对齐风格</p>
<p class="text-center">Bootstrap通过定义四个类名来控制文本的对齐风格</p>
<p>Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码。</p>
<p class="text-justify">Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码。</p>

2.1.5 列表

去点列表

<ul class="list-unstyled">
    <li>去点列表项目一</li>
    <li>去点列表项目二</li>
</ul>

内联列表

<ul class="list-inline">
    <li>首页</li>
    <li>Java</li>
    <li>C++</li>
</ul>

水平定义列表

<dl class="dl-horizontal">
    <dt>HTML 超文本标记语言</dt>
    <dd>HTML被称为超文本标记语言，是一种标识性的语言。</dd>
    <dt>标题不能超过160px的宽度，否则超出的部分会用省略号代替</dt>
    <dd>这是一个水平定义列表，这是由Bootstrap提供的。</dd>
</dl>

2.1.6 代码

单行内联代码

<code>System.out.println("Hello World!");</code>

快捷键

<p>使用<kbd>Ctrl+S</kbd>保存</p>
<p>使用<kbd>Ctrl</kbd> + <kbd>S</kbd>保存</p>

多行代码块

<pre>
public staric void main(String[] args) {
	System.out.println("Hello World!");
}
</pre>
<!-- 显示HTML代码需要使用字符实体 -->
<pre>
&lt;h2&gt;你好&lt;/h2&gt;
</pre>
<!-- 长度超过指定值时，可以添加滚动条 -->
<pre class="pre-scrollable">
@Controller
public class UserController {
	@Resource
	UserService userService;

	// 页面发出登录请求进入登录页面,地址栏发出的都是请求
	// 方法处理get请求
	@RequestMapping(value = "login", method = RequestMethod.GET)
	public String toLogin() {
		return "login";
	}

	// 方法处理post请求
	@RequestMapping(value = "login", method = RequestMethod.POST)
	public String login(String userName, String userPassword, Model model) {
		User user = userService.login(userName, userPassword);
		if (user == null) {
			model.addAttribute("msg", "账号或密码错误！");
			return "login";
		}
		model.addAttribute("USER_SESSION", user);
		return "success";
	}
}
</pre>

2.1.7 表格

表格样式

类 描述
.table 基础表格
.table-striped 斑马线表格
.table-bordered 带边框的表格
.table-hover 鼠标悬停高亮
.table-condensed 紧凑型表格

背景颜色

类 描述
.active #f5f5f5
.success #dff0d8
.info #d9edf7
.warning #fcf8e3
.danger #f2dede 
<table class="table table-bordered table-striped table-hover table-condensed">
    <tr>
        <th>类</th>
        <th>描述</th>
    </tr>
    <tr class="active">
        <td>.table</td>
        <td>基础表格</td>
    </tr>
    <tr class="success">
        <td>.table-striped</td>
        <td>斑马线表格</td>
    </tr>
    <tr class="info">
        <td>.table-bordered</td>
        <td>带边框的表格</td>
    </tr>
    <tr class="warning">
        <td>.table-hover</td>
        <td>鼠标悬停高亮</td>
    </tr>
    <tr class="danger">
        <td>.table-condensed</td>
        <td>紧凑型表格</td>
    </tr>
</table>

2.2 表单

​ 表单的主要功能是用来与用户做交流的一个网页控件，良好的表单设计能够让网页与用户更好地沟通。表单中常见的元素有：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。

2.2.1 表单控件

​ .form-control .input-lg（较大） .input-sm（较小）

输入框

<div class="col-md-3">
    <input type="text" class="form-control"><br>
    <input type="text" class="form-control input-lg"><br>
    <input type="text" class="form-control input-sm"><br>
</div>

下拉选择框

<div class="col-md-3">
    <!-- 单选 -->
    <select class="form-control">
        <option>请选择城市</option>
        <option>昆明</option>
        <option>成都</option>
    </select><br>
    <!-- 多选 -->
    <select class="form-control" multiple="multiple">
        <option>请选择城市</option>
        <option>昆明</option>
        <option>成都</option>
    </select><br>
</div>

文本域

<div class="col-md-3">
    <textarea class="form-control"></textarea><br>
</div>

单选框

<!-- 水平显示 -->
<div class="col-md-3">
    <div class="radio-inline">
        <label><input type="radio" name="sex">男</label>
    </div>
    <div class="radio-inline">
        <label><input type="radio" name="sex">女</label>
    </div>
</div>
<!-- 垂直显示 -->
<div class="col-md-3">
    <div class="radio">
        <label><input type="radio" name="sex">男</label>
        <!-- <label><input type="radio" name="sex">女</label> -->
    </div>
    <div class="radio">
        <label><input type="radio" name="sex">女</label>
    </div>
</div>

复选框

<!-- 水平显示 -->
<div class="col-md-3">
    <div class="checkbox-inline">
        <label><input type="checkbox" name="hobby">唱</label>
    </div>
    <div class="checkbox-inline">
        <label><input type="checkbox" name="hobby">跳</label>
    </div>
    <div class="checkbox-inline">
        <label><input type="checkbox" name="hobby">Rap</label>
    </div>
    <div class="checkbox-inline">
        <label><input type="checkbox" name="hobby">篮球</label>
    </div>
</div>
<!-- 垂直显示 -->
<div class="col-md-3">
    <div class="checkbox">
        <label><input type="checkbox" name="hobby">唱</label>
        <!-- <label><input type="checkbox" name="hobby">跳</label>
        <label><input type="checkbox" name="hobby">Rap</label>
        <label><input type="checkbox" name="hobby">篮球</label> -->
    </div>
    <div class="checkbox">
        <label><input type="checkbox" name="hobby">跳</label>
    </div>
    <div class="checkbox">
        <label><input type="checkbox" name="hobby">Rap</label>
    </div>
    <div class="checkbox">
        <label><input type="checkbox" name="hobby">篮球</label>
    </div>
</div>

按钮

  1. button标签

    <button class="btn">按钮1</button>
<button class="btn btn-primary">按钮2</button>
<button class="btn btn-info">按钮3</button>
<button class="btn btn-success">按钮4</button>
<button class="btn btn-warning">按钮5</button>
<button class="btn btn-danger">按钮6</button>
<button class="btn btn-link">按钮7</button>
<button class="btn btn-default">按钮8</button>

  2. 其他标签

    <a href="#" class="btn btn-success">a标签</a>
<span class="btn btn-danger">span标签</span>
<div class="btn btn-warning">div标签</div>

  3. 按钮大小

    <button class="btn btn-primary">按钮9</button>
<button class="btn btn-info btn-lg">按钮10</button>
<button class="btn btn-success btn-sm">按钮11</button>
<button class="btn btn-warning btn-xs">按钮12</button>

  4. 按钮禁用

    <!-- 在标签中添加disabled属性 -->
<button class="btn btn-danger" onclick="alert('按钮13被点击')" disabled="diabled">按钮13</button>
<!-- 使用.disabled类（只是样子禁用了，实际可用） -->
<button class="btn btn-primary disabled" onclick="alert('按钮14被点击')">按钮14</button>

2.2.2 表单布局

​ 基本的表单结构是Bootstrap自带的，个别的表单控件自动接收一些全局样式。

​ 创建基本表单的步骤：

  • 向父元素（form）添加role="form"属性。
  • 把标签和控件放在一个带有.form-group的div标签中，这是获取最佳间距所必需的。
  • 向所有的文本元素（input、textarea）和select中添加.form-control。
<h2 style="text-align: center;">用户信息</h2>
<form action="#" class="form-horizontal" role="form">
    <div class="form-group">
        <label for="username" class="control-label col-md-2 col-md-offset-3">昵称</label>
        <div class="col-md-3">
            <input type="text" class="form-control" id="username" placeholder="请输入昵称">
        </div>
    </div>
    <div class="form-group">
        <label for="userpasswd" class="control-label col-md-2 col-md-offset-3">密码</label>
        <div class="col-md-3">
            <input type="password" class="form-control" id="userpasswd" placeholder="请输入密码">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-md-2 col-md-offset-3">性别</label>
        <div class="col-md-3">
            <div class="radio-inline">
                <label><input type="radio" name="sex">男</label>
            </div>
            <div class="radio-inline">
                <label><input type="radio" name="sex">女</label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-md-2 col-md-offset-5">
            <div class="col-md-offset-2">
                <button class="btn btn-success">保存</button>
                <button class="btn btn-danger">取消</button>
            </div>
        </div>
    </div>
</form>
<br>

<!-- 内联表单 -->
<form action="#" class="form-inline" role="form">
    <div class="form-group">
        <label class="control-label col-md-4">用户名</label>
        <div class="col-md-3">
            <input type="text" class="form-control" placeholder="请输入用户名">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-md-3">昵称</label>
        <div class="col-md-3">
            <input type="text" class="form-control" placeholder="请输入昵称">
        </div>
    </div>
    <div class="form-group">
        <button class="btn btn-success">提交</button>
    </div>
</form>

2.3 缩略图

​ 缩略图在电商类的网站很常见，最常用的地方就是产品列表。缩略图的实现是配合网格系统一起使用的。同时还可以让缩略图配合标题、描述内容、按钮等。

<div class="row">
    <div class="col-md-3">
        <div class="thumbnail">
            <img src="image/nami.jpg" style="width: 240px; height: 360px;">
            <h3>娜美</h3>
            <p>生日是7月3日</p>
            <button class="btn btn-default">
                <span class="glyphicon glyphicon-heart"></span> 喜欢
            </button>
            <button class="btn btn-info">
                <span class="glyphicon glyphicon-pencil"></span> 评论
            </button>
        </div>
    </div>

    <div class="col-md-3">
        <div class="thumbnail">
            <img src="image/yamato.JPG" style="width: 240px; height: 360px;">
            <h3>大和</h3>
            <p>生日是11月3日</p>
            <button class="btn btn-default">
                <span class="glyphicon glyphicon-heart"></span> 喜欢
            </button>
            <button class="btn btn-info">
                <span class="glyphicon glyphicon-pencil"></span> 评论
            </button>
        </div>
    </div>
</div>

2.4 面板

<div class="panel panel-warning">
    <div class="panel-heading">
        <h2 style="text-align: center;">海贼王美女</h2>
    </div>
    <div class="panel-body">
        <div class="row">
            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="image/nami.jpg" style="width: 240px; height: 360px;">
                    <h3>娜美</h3>
                    <p>生日是7月3日</p>
                    <button class="btn btn-default">
                        <span class="glyphicon glyphicon-heart"></span> 喜欢
                    </button>
                    <button class="btn btn-info">
                        <span class="glyphicon glyphicon-pencil"></span> 评论
                    </button>
                </div>
            </div>

            <div class="col-md-3">
                <div class="thumbnail">
                    <img src="image/yamato.JPG" style="width: 240px; height: 360px;">
                    <h3>大和</h3>
                    <p>生日是11月3日</p>
                    <button class="btn btn-default">
                        <span class="glyphicon glyphicon-heart"></span> 喜欢
                    </button>
                    <button class="btn btn-info">
                        <span class="glyphicon glyphicon-pencil"></span> 评论
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

3.Bootstrap插件

3.1 导航

​ 使用下拉与按钮组合可以制作导航。

​ 要点：

  • 基本样式：.nav与.nav-tabs、.nav-pills组合制作导航。

  • 分类：

    • 标签型（.nav-tabs）导航。
    • 胶囊型（.nav-pills）导航。
    • 堆栈（.nav-stacked）导航。
    • 自适应（.nav-justified）导航。
    • 面包屑式（.breadcrumb）导航，单独使用样式，不与.nav一起使用，直接加入到ol、ul中即可，一般用于导航，主要作用是告诉用户当前所在页面的位置。

  • 状态：

    • 选中状态（active）
    • 禁用状态（disable）

  • 二级菜单

3.1.1 标签型导航

<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">SVN</a></li>
    <li><a href="#">.Net</a></li>
    <li class="disabled"><a href="#">Java</a></li>
    <li><a href="#">PHP</a></li>
</ul>

3.1.2 胶囊型导航

<ul class="nav nav-pills">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">SVN</a></li>
    <li><a href="#">.Net</a></li>
    <li class="disabled"><a href="#">Java</a></li>
    <li><a href="#">PHP</a></li>
</ul>

3.1.3 堆栈导航

<ul class="nav nav-stacked">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">SVN</a></li>
    <li><a href="#">.Net</a></li>
    <li class="disabled"><a href="#">Java</a></li>
    <li><a href="#">PHP</a></li>
</ul>

3.1.4 自适应导航

<ul class="nav nav-justified">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">SVN</a></li>
    <li><a href="#">.Net</a></li>
    <li class="disabled"><a href="#">Java</a></li>
    <li><a href="#">PHP</a></li>
</ul>

3.1.5 面包屑式导航

<ul class="breadcrumb">
    <li><a href="#">Home</a></li>
    <li><a href="#">2013</a></li>
    <li class="active">十一月</li>
</ul>

3.2 分页导航

​ 分页随处可见，分为页码导航和翻页导航。

  • 页码导航：ul标签上加pagination或pagination-lg、pagination-sm。
  • 翻页导航：ul标签加上pager。

3.2.1 分页

<ul class="pagination">
    <li><a href="#">&laquo;</a></li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">&raquo;</a></li>
</ul>

3.2.2 翻页

<ul class="pager">
    <li><a href="#">上一页</a></li>
    <li><a href="#">下一页</a></li>
</ul>

3.3 下拉菜单

​ 在使用Bootstrap框架的下拉菜单时，必须调用两个js。

<!-- 如果要使用Bootstrap的插件，必须先调用jQuery -->
<script src="js/jquery-3.6.4.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>

<div class="dropdown">
    <!-- 使用button作为父级菜单 -->
    <button class="btn dropdown-toggle" data-toggle="dropdown">
        请选择语言
        <!-- 设置下拉箭头 -->
        <span class="caret"></span>
    </button>

    <ul class="dropdown-menu">
        <!-- 分组标题 -->
        <li class="dropdown-header">----命令式语言----</li>
        <!-- 选项 -->
        <li><a href="#">Fortran</a></li>
        <li><a href="#">Pascal</a></li>
        <li><a href="#">Cobol</a></li>
        <li><a href="#">C</a></li>
        <li><a href="#">C++</a></li>
        <li><a href="#">Basic</a></li>
        <li><a href="#">Ada</a></li>
        <li><a href="#">Java</a></li>
        <li><a href="#">C#</a></li>

        <!-- 分组分割线 -->
        <li class="divider"></li>
        <li class="dropdown-header">----函数式语言----</li>
        <li><a href="#">Lisp</a></li>
        <li><a href="#">Haskell</a></li>
        <li><a href="#">ML</a></li>
        <li><a href="#">Scheme</a></li>
        <li><a href="#">F#</a></li>

        <li class="divider"></li>
        <li class="dropdown-header">----逻辑式语言----</li>
        <li><a href="#">Prolog</a></li>

        <li class="divider"></li>
        <li class="dropdown-header">----面向对象语言----</li>
        <li><a href="#">Smalltalk</a></li>
    </ul>
</div>

3.4 模态框

​ 模态框是覆盖在父窗体上的子窗体。通常用来显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。

用法：

  • 通过data属性：在控制器元素（如按钮）上设置属性data-toggle="modal"和data-target="#id"或href="#id"来指定要切换的模态框。
  • 通过JavaScript。
<!-- 按钮触发模态框 -->
<button class="btn btn-primary" 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">&times;</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>
    </div>
</div>