bootstrap

最新推荐文章于 2022-08-18 21:39:46 发布
最新推荐文章于 2022-08-18 21:39:46 发布
阅读量1.6k 收藏
点赞数
分类专栏： 前端学习 文章标签： bootstrap 前端框架 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43391584/article/details/122230770
版权

Boot Strap学习笔记

1.Bootstrap前端部分

1.1 Boot Strap的引言

1.1.1 什么是Bootstrap

  • 百度百科：Bootstrap是美国Twitter(https://baike.baidu.com/item/Twitter/2443267)公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript(https://baike.baidu.com/item/JavaScript/321142) 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less(https://baike.baidu.com/item/Less)写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA(https://baike.baidu.com/item/NASA)的MSNBC（微软全国广播公司(https://baike.baidu.com/item/微软全国广播公司/8750737)）的Breaking News都使用了该项目。 国内一些移动开发者较为熟悉的框架，如WeX5(https://baike.baidu.com/item/WeX5)前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

  • 官方：Bootstrap是最受欢迎的 HTML、 CSS 和 JS 框架，用于开发响应式布局、移动设备优先的WEB项目。

  • 响应式布局：屏幕自适应 前端页面实现屏幕自适应。

1.1.2 bootstrap的优势
  • 系出名门 开源Github 前端技术；
  • 封装css js 的一个前端框架；
  • 主要用于开发 移动设备优先 响应式布局。
1.1.3 bootstrap的作用

​ 主要使用bootstrap开发后台管理页面 | 是否需要实现响应式，根据不同的需求开发

1.2 Boot Strap环境搭建

  1. 下载bootstrap相关资料：https://v3.bootcss.com/

  2. 下载完成之后解压bootstrap压缩包

    ​ css bootstrap核心css文件 bootstrap.css 核心css bootstrap.min.css(压缩css)

    ​ fonts 用来存放bootstrap字体图标的文件夹

    ​ js bootstrap.js 是bootstrap 核心js bootstrap.min.js(压缩js)

  3. 将bootstrap文件夹全部放入项目中(maven下的webapp架构)

  4. 项目使用bootstrap

<meta name="viewport" content="width=device-width, initial-scale=1">		移动设备优先
<link rel="stylesheet" href="css文件的相对路径"

1.3 Bootstrap基础学习

1.3.1 容器
<!-- 布局容器：两边存在一定padding -->
<div class="container" style="border: 1px red solid">
    this is hello bootstrap
</div>
<!-- 布局容器：默认使用当前页面100% -->
<div class="container-fluid" style="border: 1px green solid">
    this is hello bootstrap
</div>

<!-- 注意：两种容器不能互相嵌套使用 -->
1.3.2 栅格系统

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：

  • “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
  • 通过“行（row）”在水平方向创建一组“列（column）”。
  • 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
  • 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
  • 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
  • 负值的 margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。
  • 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
  • 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
  • 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-* 不存在， 也影响大屏幕设备。

练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个bootstrap程序</title>
    <!-- 获得更好的响应式支持 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 引入bootstrap核心css样式 -->
    <link rel="stylesheet" href="../bootstrap-3.4.1/css/bootstrap.min.css">
    <style>
        .col-xs-1 {
     
            border: 1px solid red;
        }
        .col-xs-4 {
     
            border: 1px solid green;
        }
        .col-xs-3 {
     
            border: 1px solid yellow;
        }
        .col-sm-2 {
     
            border: 1px solid blue;
        }
    </style>
</head>
<body>
    <!--
        布局：容器 container container-fluid
        栅格系统：主要作用-用来完成页面布局
            栅格系统中流式布局：
                存在行的概念：将页面拆分成一行一行
                存在列的概念：bootstrap栅格系统将页面中拆分一行最多分为12列 默认 12等分列
                bootstrap-为什么默认分为12列 12计算方便 2*6 3*4 4+8 3+9 方便做页面的排版
        使用栅格系统注意事项：
            1.栅格系统必须包含在容器布局中 .container .container-fluid
    -->

    <!-- 创建容器 -->
    <div class="container">
        <!-- 创建一行 -->
        <div class="row">
            <div class="col-xs-1" style="padding-left: 0">1</div>
            <div class="col-xs-1" style="padding-left: 0">1</div>
            <div class="col-xs-1" style="padding-left: 0">1</div>
            <div class="col-xs-1" style="padding-left: 0">1</div>
            <div class="col-xs-1" style="padding-left: 0">1</div>
            <div class="col-xs-1" style="padding-left: 0">1</div>
            <div class="col-xs-1" style="padding-left: 0">1</div>
            <div class="col-xs-1" style="padding-left: 0">1</div>
            <div class="col-xs-1" style="padding-left: 0">1</div>
            <div class="col-xs-1" style="padding-left: 0">1</div>
            <div class="col-xs-1" style="padding-left: 0">1</div>
            <div class="col-xs-1" style="padding-left: 0">1</div>
        </div>
        <br>
        <!-- 创建第二行 -->
        <div class="row">
            <div class="col-xs-4">4</div>
            <div class="col-xs-4">8</div>
            <div class="col-xs-4">12</div>
        </div>
        <!-- 创建第三行 超出栅格12份，则另起一行 -->
        <div class="row">
            <div class="col-xs-3">3</div>
            <div class="col-xs-3">6</div>
            <div class="col-xs-3">9</div>
            <div class="col-xs-3">12</div>
            <div class="col-xs-3">12</div>
        </div>

        <!-- 创建第四行 -->
        <div class="row">
            <div class="col-sm-2">2</div>
            <div class="col-sm-2">4</div>
            <div class="col-sm-2">6</div>
            <div class="col-sm-2">8</div>
            <div class="col-sm-2">10</div>
            <div class="col-sm-2">12</div>
        </div>
        <br>
        <!-- 栅格系统可以不等分 -->
        <div class="row">
            <div class="col-sm-4" style="border: 1px solid red">4</div>
            <div class="col-sm-2" style="border: 1px solid green">2</div>
            <div class="col-sm-3" style="border: 1px solid blue">3</div>
            <div class="col-sm-3" style="border: 1px solid blue">3</div>
        </div>
        <br>
        <!-- 栅格系统的嵌套 -->
        <div class="row">
            <div class="col-sm-4" style="border: 1px solid red; padding-left: 0; padding-right: 0">
                <div class="col-sm-3" style="border: 1px solid black">3</div>
                <div class="col-sm-3" style="border: 1px solid black">3</div>
                <div class="col-sm-3" style="border: 1px solid black">3</div>
                <div class="col-sm-3" style="border: 1px solid black">3</div>
            </div>
            <div class="col-sm-4" style="border: 1px solid red">4</div>
            <div class="col-sm-4" style="border: 1px solid red">4</div>
        </div>
        <br>
        <!-- 栅格系统列偏移 offset -->
        <div class="row">
            <div class="col-sm-8 col-sm-offset-2" style="border: 1px solid yellowgreen">8</div>
        </div>
        <br>

        <!-- 栅格系统使用 班级管理系统V1.0 -->
        <div class="row">
            <div class="col-sm-8 col-sm-offset-2"><h1 class="text-center">班级管理系统<small>V1.0</small></h1></div>
            <div class="col-sm-2"><h3 class="text-center" style="margin-top: 30px;">欢迎xxx</h3></div>
        </div>
    </div>
</body>
</html>
1.3.3 代码

练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个bootstrap程序</title>
    <!-- 获得更好的响应式支持 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 引入bootstrap核心css样式 -->
    <link rel="stylesheet" href="../bootstrap-3.4.1/css/bootstrap.min.css">
</head>
<body>
    <!-- 代码 -->
    <p><code>&lt;System.out.println("Hello BootStrap!")&gt;</code></p>

    <!-- 用户输入 -->
    To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
    To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

    <!-- 代码块 -->
    <p>
        <pre>
            public static void main(String[] args) {
                System.out.println("Hello Spring");
            }
        </pre>
    </p>

    <!-- 程序输出 -->
    <samp>This text is meant to be treated as sample output from a computer program.</samp>
</body>
</html>
1.3.4 表格

练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个bootstrap程序</title>
    <!-- 获得更好的响应式支持 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 引入bootstrap核心css样式 -->
    <link rel="stylesheet" href="../bootstrap-3.4.1/css/bootstrap.min.css">
</head>
<body>
<!-- 响应式表格 -->
<div class="table-responsive">
    <!-- 基本表格 table table-striped(斑马线效果) table-bordered(边框效果) table-hover(鼠标悬停效果) table-condensed(紧缩表格) -->
    <table class="table table-striped table-bordered table-hover table-condensed">
        <tr>
            <th class="text-center">编号</th>
            <th class="text-center">姓名</th>
            <th class="text-center">年龄</th>
            <th class="text-center">生日</th>
            <th class="text-center">邮箱</th>
        </tr>
        <tbody class="text-center">
            <!-- 呈现蓝色 -->
            <tr class="info">
                <td>1</td>
                <td>张三</td>
                <td>28</td>
                <td>2021/5/8</td>
                <td>123456@qq.com</td>
            </tr>
            <!-- 呈现绿色 -->
            <tr class="success">
                <td>2</td>
                <td>李四</td>
                <td>28</td>
                <td>2021/5/8</td>
                <td>123456@qq.com</td>
            </tr>
            <!-- 呈现黄色 -->
            <tr class="warning">
                <td>2</td>
                <td>李四</td>
                <td>28</td>
                <td>2021/5/8</td>
                <td>123456@qq.com</td>
            </tr>
            <!-- 呈现红色 -->
            <tr>
                <td>2</td>
                <td>李四</td>
                <td>28</td>
                <td class="info">2021/5/8</td>
                <td class="danger">123456@qq.com</td>
            </tr>
        </tbody>
    </table>
</div>
</body>
</html>
1.3.5 按钮

练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个bootstrap程序</title>
    <!-- 获得更好的响应式支持 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 引入bootstrap核心css样式 -->
    <link rel="stylesheet" href="../bootstrap-3.4.1/css/bootstrap.min.css">
</head>
<body>
    <!-- 基本按钮 btn btn-default(默认按钮)，支持input、button、a标签 -->
    <input class="btn btn-default" type="button" value="按钮">
    <button class="btn btn-default">按钮</button>
    <a href="" class="btn btn-default">按钮</a>
    <br>

    <!-- 不同样式按钮 btn btn-xxx primary(蓝色) info(天蓝色) danger(红色) success(绿色) warning(黄色) link(链接按钮) -->
    <button class="btn btn-default">按钮1</button>
    <button class="btn btn-primary">按钮2</button>
    <button class="btn btn-info">按钮3</button>
    <button class="btn btn-danger">按钮4</button>
    <button class="btn btn-success">按钮5</button>
    <button class="btn btn-warning">按钮6</button>
    <button class="btn btn-link">按钮7</button>
    <br>
    <br>

    <!-- 不同尺寸的按钮 btn btn-default btn-xxx lg(大按钮) md(默认按钮) sm(小按钮) xs(超小按钮) -->
    <button class="btn btn-primary btn-lg">大按钮</button>
    <button class="btn btn-primary">默认按钮</button>
    <button class="btn btn-primary btn-sm">小按钮</button>
    <button class="btn btn-primary btn-xs">超小按钮</button>
    <br>
    <br>

    <!-- 块级按钮 -->
    <button class="btn btn-primary btn-block">登录</button>
    <button class="btn btn-warning btn-block">注册</button>
    <br>
    <br>

    <!-- 控制状态按钮 active(激活状态) disabled(禁用状态) -->
    <a href="" class="btn btn-primary active">激活按钮</a>
    <a href="" class="btn btn-primary disabled">禁用按钮</a>
</body>
</html>
1.3.6 图片

练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个bootstrap程序</title>
    <!-- 获得更好的响应式支持 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 引入bootstrap核心css样式 -->
    <link rel="stylesheet" href="../bootstrap-3.4.1/css/bootstrap.min.css">
</head>
<body>
    <!-- bootstrap提供img样式 img-rounded(圆角矩形) img-circle(圆形) img-thumbnail(带有边框) -->
    <img src="../bootstrap-3.4.1/images/beauty.jpg" style="width: 200px" alt="" class="img-rounded"> <br>
    <img src="../bootstrap-3.4.1/images/beauty.jpg" style="width: 200px" alt="" class="img-circle"> <br>
    <img src="../bootstrap-3.4.1/images/beauty.jpg" style="width: 200px" alt="" class="img-thumbnail"> <br>
</body>
</html>
1.3.7 表单
  1. 普通表单(垂直表单)

练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个bootstrap程序</title>
    <!-- 获得更好的响应式支持 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 引入bootstrap核心css样式 -->
    <link rel="stylesheet" href="../bootstrap-3.4.1/css/bootstrap.min.css">
</head>
<body>
    <!-- 原始表单 -->
    <form action="">
        <div class="form-group">
            <label for="username">用户名：</label>
            <input id="username" class="form-control" type="text">
        </div>
            <input id="login" type="submit" value="提交">

    </form>
    <br>
    <br>

    <!-- bootstrap基本表单 -->
    <form>
        <div class="form-group">
            <label for="name">姓名</label>
            <input type="text" class="form-control" id="name" placeholder="请输入姓名">
        </div>
        <div class="form-group">
            <label for="pwd">密码</label>
            <input type="password" class="form-control" id="pwd" placeholder="请输入密码">
        </div>
        <div class="form-group">
            <label for="exampleInputFile">请选择图像</label>
            <input type="file" id="exampleInputFile">
            <p class="help-block"><span class="text-danger">选择的文件只能是.png类型且大小不能超过2M</span></p>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox"> 看书
            </label>
            <label>
                <input type="checkbox"> 吃饭
            </label>
            <label>
                <input type="checkbox"> 睡觉
            </label>
        </div>
        <button type="submit" class="btn btn-primary btn-block">提交</button>
    </form>
</body>
</html>
  1. 内联表单

练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个bootstrap程序</title>
    <!-- 获得更好的响应式支持 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 引入bootstrap核心css样式 -->
    <link rel="stylesheet" href="../bootstrap-3.4.1/css/bootstrap.min.css">
</head>
<body>
    <!-- 内联表单--一行表单 form-inline -->
    <form action="" class="form-inline">
        <div class="form-group">
            <label for="name">用户名：</label>
            <input type="text" id="name" class="form-control">
        </div>
        <div class="form-group">
            <label for="pwd">密码：</label>
            <input type="text" id="pwd" class="form-control">
        </div>
        <input type="button" class="btn btn-primary" value="提交">
    </form>
</body>
</html>
  1. 水平排列的表单

练习：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个bootstrap程序</title>
    <!-- 获得更好的响应式支持 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 引入bootstrap核心css样式 -->
    <link rel="stylesheet" href="../bootstrap-3.4.1/css/bootstrap.min.css">
</head>
<body>
<!-- 水平表单 from-horizontal
    1.form加入class="form-horizontal";
    2.在form-group中使用栅格系统；
    3.label必须加入class="control-label"
-->
<form action="" class="form-horizontal">
    <div class="form-group">
        <label for="userId" class="col-sm-2 control-label">ID:</label>
        <div class="col-sm-8">
            <input id="userId" type="hidden" name="id" value="21">
            <p class="form-control-static">21</p>
        </div>
    </div>

    <div class="form-group">
        <label for="name" class="col-sm-2 control-label">用户名：</label>
        <div class="col-sm-8">
            <textarea id="name" class="form-control" rows="5"></textarea>
        </div>
    </div>
    <div class="form-group">
        <label for="pwd" class="col-sm-2 control-label">密码：</label>
        <div class="col-sm-8">
            <input type="text" id="pwd" class="form-control">
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">选择爱好：</label>
        <div class="col-sm-8">
            <div class="checkbox">
                <label>
                    <input type="checkbox" value="">
                    看书
                </label>
                <label>
                    <input type="checkbox" value="">
                    学习
                </label>
                <label>
                    <input type="checkbox" value="">
                    睡觉
                </label>
            </div>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label">选择爱好：</label>
        <div class="col-sm-8">
            <div class="radio">
                <label>
                    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                    看书
                </label>
                <label>
                    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                    看报
                </label>
                <label>
                    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3">
                    学习
                </label>
            </div>
        </div>
    </div>

    <div class="form-group">
        <label for="cities" class="col-sm-2 control-label">选择城市:</label>
        <div class="col-sm-8">
            <select id="cities" multiple name="cities" class
最低0.47元/天 解锁文章
善为者常成，乐行者常至
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
GCC的编译和调试－－入门介绍
ryj111的专栏
01-15 1万+
编译与调试1.1编译的概念和理解在进行C程序开发时，编译就是将编写的C语言代码变成可执行程序的过程，这一过程是由编译器来完成的。编译器就是完成程序编译工作的软件，在进行程序编译时完成了一系列复杂的过程。1.1.1程序编译的过程在执行这一操作时，程序完成了复杂的过程。一个程序的编译，需要完成词法分析、语法分析、中间代码生成、代码优化、目标代码生成。本章将讲解这些步骤的作用与原理。（1）词法分析。指的
signature=87bb48610b8a9c77b69ff7d8a69a8bdb,laravel-shop-advanced-7/yarn.lock at dependabot/npm_and_y...
weixin_34890108的博客
05-29 4万+
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.# yarn lockfile v1"@fortawesome/fontawesome-free@^5.11.2":version "5.11.2"resolved "https://registry.npm.taobao.org/@fortawesome/fontawe...
Bootstrap：百科
weixin_30340617的博客
02-01 377
ylbtech-Bootstrap：百科 Bootstrap （Web框架）Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bo...
windows安装pip工具
热门推荐
kevin_weijc的博客
12-08 9万+
运行以下脚本: #!/usr/bin/env python # # Hi There! # You may be wondering what this giant blob of binary data here is, you might # even be worried that we're up to something nefarious (good for you for bein
signature=9357ba213647505b8240e6d7d6ce48bf,life-game/yarn.lock at master · soouup/life-game · GitHub...
weixin_39685836的博客
05-29 5万+
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.# yarn lockfile v1"@babel/code-frame@^7.8.3":version "7.8.3"resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.8.3.tg...
bootstrap-4.6.2
06-13
bootstrap4下载
bootstrap.min.css
最新发布
02-23
用于渲染前端静态页面
bootstrap旅游网站
02-09
bootstrap旅游网站
bootstrap 期末项目 设计报告 模板
07-18
Bootstrap 期末项目设计报告模板知识点总结 一、Bootstrap 介绍 Bootstrap 是一个流行的前端框架，用于构建响应式、mobile-first 的 Web 应用程序。它提供了一些常用的 HTML、CSS 和 JavaScript 组件，可以快速...
Bootstrap视频网站模板
05-28
Bootstrap视频网站模板
bootstrap.css
01-27
bootstrap的css文件
Bootstrap期末作品
12-18
整体运用了栅格系统布局，局部应用了固定到顶部的导航栏组件，下拉菜单组件，轮播图插件，以及Bootstrap自带的按钮样式。希望通过学习Bootstrap从这种布局的思想，实现的方式中加深对CSS html 的理解
Bootstrap3.3.7
11-17
Bootstrap是最受欢迎的HTML、CSS和JS的前端开发框架，用于开发响应式布局、移动设备优先的WEB项目。它使用了最新的浏览器技术，给你的Web开发提供了时尚的版式...此zip文件是Bootstrap3.3.7资源文件，内含css/fonts/js
Bootstrap后台管理程序应用模板UI框架
11-08
Bootstrap后台管理程序应用模板UI框架
signature=b601423085d9825de881bf0e6372bdf7,playframework 2.0 - Pac4j based SP unable to process SAML...
weixin_39947314的博客
05-29 3158
I am developing a play application using pac4j for SAML authentication. I have already setup a shibboleth based IDP and it is working fine with a couple of SPs.I have based the play application on the...
Bootstrap里的文件作用
11-29 718
Bootstrap里的文件分别表示什么？都有什么用？ bootstrap.css bootstrap.min.css bootstrap-responsive.css bootstrap-responsive.min.css bootstrap.js bootstrap.min.js 回答：bootstrap.css 是完整的bootstrap样式表，未经...
Bootstrap简述
weixin_71437031的博客
08-18 2819
栅格系统提供了基本的前缀，用于在不同宽度的屏幕中实现不同的排列方式，列的类名可以写多个，也就是可以同时设置.col-、.col-sm-、.col-md-、.co-/g-和.col-xl*类名。组件可以有自己的属性和方法。由于栅格系统就是默认将父元素分成12等份，所以可根据占据的份数来设置子元素的宽度，在设置列的宽度时，只需要在不同的类前缀后面加上栅格数量即可。栅格系统页面的内容可以放入这些创建好的布局容器中，并且会根据父元素盒子（布局容器)尺寸的大小进行适当地调节，从而达到响应式页面布局的效果。...
Keytool命令详解（好文章！详细设置一些参数比如过期时间等）
HD243608836的博客
10-15 8739
以前用过几次这个东东，但每次都重新查询一次。本文原始出处是这里。 －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ Keytool是一个Java数据证书的管理工具 ,Keytool将密钥（key）和证书（certificates）存在一个称为keystore的文件中 在keystore里，包含两种数据： 密钥实体（Key entity）——密钥（secret key）又或者是私钥和配对公钥（采用非对称加密） 可信任的证书实...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值