本文阅读大约需要1.99分钟 bootstrap4有个网站叫做bootswatch（文末给出链接），其中已经设计了一些很美的主题： ?...要想使用也是很简单的，只需要下载其中的bootstrap.css或者bootstrap.min.css并覆盖到自己项目的对应文件就行了。...网页上涉及到的代码 （代码若显示不全，请向左滑动） <link rel="stylesheet" href="{% static '<em>bootstrap</em>4.0.0/css/<em>bootstrap</em>.min.css...本程序用到两个<em>主题</em>版本的css文件，其id和文件名的对应为： id 同目录下的css文件名 default-theme <em>bootstrap</em>.min.css gray-theme <em>bootstrap</em>_gray.min.css.../css/<em>bootstrap</em>.min.css'; //记录新的<em>主题</em>到cookies，这里一定要写上path=/，否则就不是修改cookies而是在不同页面创建cookies了
来源：oschina http://www.oschina.net/news/92573/bootstrap-4-0-0-releasedl Bootstrap 4.0.0 正式版现已发布，更新内容方面...新的示例 几乎每个示例都经过稳定的 v4 版本的重大修改，其中删除了一些过时的示例，添加了一些新的示例，并且彻底改变了其他一些示例。...主题方面，Bootstrap 的主题今年将得到重大更新，官方表示将会推出十个全新的主题。当前的目标是第一季度推出的主题都建立在 Bootstrap 4 上（都没有 v3 版本的）。...Bootstrap 4 的示例（https://getbootstrap.com/docs/4.0/examples/）和迁移说明（https://getbootstrap.com/docs/4.0/migration
Bootstrap 4.0.0 正式版现已发布，更新内容方面，相对于之前的测试版，正式版没有重大的改变，但做出了一些关键的改进，并解决了一些棘手的错误。 新的示例 ?...几乎每个示例都经过稳定的 v4 版本的重大修改，其中删除了一些过时的示例，添加了一些新的示例，并且彻底改变了其他一些示例。...主题方面，Bootstrap 的主题今年将得到重大更新，官方表示将会推出十个全新的主题。当前的目标是第一季度推出的主题都建立在 Bootstrap 4 上（都没有 v3 版本的）。...Bootstrap 4 的示例和迁移说明。
Bootstrap4 食用摘记（非入门教程）(暂未完成) 这篇文章主要记录了自己在bootstrap3转bootstrap4的时候遇到的一些，非入门教程 附上官方教程链接 https://getbootstrap.com...BootStrap 引用文件 在引用文件中出现了popper.js <!...允许移动设备优先的Meta信息 为了让 Bootstrap 开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的 head 之中添加 viewport meta 标签，如下所示： <meta
/style.css"> 当前主题为:系统主题 <button id="toggle"...'深色主题' : '浅色主题' document.getElementById('toggle').innerHTML= isDarkMode ?...'切换为浅色主题' : '切换为深色主题' }) document.getElementById('reset-to-system').addEventListener('click', async...在main.js主进程里面通过nativeTheme.themeSource来设置主题。...它用于覆盖和取代Chromium选择在内部主题使用的值。
Bootstrap4 卡片 简单的卡片 我们可以通过 Bootstrap4 的 .card 与 .card-body 类来创建一个简单的卡片，实例如下: 实例 简单的卡片 Bootstrap4 的卡片类似 Bootstrap 3 中的面板、图片缩略图、well。.../div> 内容 底部 ---- 多种颜色卡片 Bootstrap...实例 Card title John Doe Some example text.
Bootstrap4 轮播 轮播是一个循环的幻灯片： ---- 如何创建轮播 以下实例创建了一个简单的图片轮播效果 ： 实例 <div id="demo" class="carousel
Bootstrap4 颜色 Bootstrap 4 提供了一些有代表意义的颜色类：.text-muted, .text-primary, .text-success, .text-info, .text-warning
Bootstrap4 按钮 Bootstrap 4 提供了不同样式的按钮。...>黑色 浅色 ---- 不同大小的按钮 Bootstrap...4 可以设置按钮的大小： 实例 大号按钮 <button type="button
Bootstrap4 徽章（Badges） 徽章（Badges）主要用于突出显示新的或未读的项。...badge badge-secondary">New 测试标题 New ...测试标题 New 测试标题 <span class="badge badge-secondary"...以下实例将徽章嵌入到按钮内： 实例 Messages 4<
Bootstrap4 按钮组 Bootstrap 4 中允许我们将按钮放在同一行上。 可以在 元素上添加 .btn-group 类来创建按钮组。
Bootstrap4 Flex（弹性）布局 Bootstrap4 通过 flex 类来控制页面的布局。...---- 弹性盒子(flexbox) Bootstrap 3 与 Bootstrap 4 最大的区别就是 Bootstrap 4 使用弹性盒子来布局，而不是使用浮动来布局。...的一种新的布局模式，更适合响应式的设计，如果你还不了解 flex，可以阅读我们的 CSS3 弹性盒子(Flex Box) 教程 注意：IE9 及其以下版本不支持弹性盒子，所以如果你需要兼容 IE8-9，请使用 Bootstrap
Bootstrap4 下拉菜单 Bootstrap4 下拉菜单依赖于 popper.min.js。 下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。
Bootstrap4 输入框组 我们可以使用 .input-group 类来向表单输入框中添加更多的样式，如图标、文本或者按钮。...Bootstrap4 实例 ---- 输入框大小 使用 .input-group-sm 类来设置小的输入框， .input-group-lg 类设置大的输入框： Bootstrap4...Large ---- 多个输入框和文本 Bootstrap4...Bootstrap4 实例 <button type
Bootstrap4 实例 <input type="checkbox" class=...Bootstrap4 实例 ---- 自定义控件显示在同一行 我们可以在外部元素上使用 .custom-control-inline 类来包裹自定义表单控件，这样自定义表单控件就能显示在同一行： Bootstrap4...option> ---- 自定义滑块控件 我们可以在 input 为 type="range" 的输入框中添加 .custom-range 类来设置自定义滑块控件: Bootstrap4...Bootstrap4 实例 <input type="file" class="custom-file-input" id=
Bootstrap4 信息提示框 Bootstrap 4 可以很容易实现信息提示框。
Bootstrap4 面包屑导航（Breadcrumb） 面包屑导航是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。...Bootstrap 中的面包屑导航是一个简单的带有 .breadcrumb class 的无序列表。...分隔符会通过 CSS（bootstrap.min.css）中的 ::before 和 content 来添加，下面所示的 class 自动被添加： .breadcrumb-item + .breadcrumb-item...::before { display: inline-block; padding-right: 0.5rem; color: #6c757d; content: "/"; } Bootstrap4...breadcrumb-item">Library Data 我们也可以不用列表形式： Bootstrap4
Bootstrap4 信息提示框 Bootstrap 4 可以很容易实现信息提示框。
1 命令操作 1.1 主题命令操作 查看操作主题命令参数： [atguigu@hadoop102 kafka]$ bin/kafka-topics.sh 参数描述 --bootstrap-server，...（4）修改分区数（分区数只能增加，不能减少） [atguigu@hadoop102 kafka]$ kafka-topics.sh --bootstrap-server hadoop102:9092...消费主题first中的信息(从末尾开始） [atguigu@hadoop102 kafka]$ kafka-console-consumer.sh --bootstrap-server hadoop102...参考链接 【精选】Kafka基本原理详解_昙花逐月的博客-CSDN博客 这是最详细的Kafka应用教程了 - 掘金 Kafka : Kafka入门教程和JAVA客户端使用-CSDN博客 简易教程 | Kafka...Kafka 架构及基本原理简析 Kafka 架构及基本原理简析 kafka详解(一)--kafka是什么及怎么用 再过半小时，你就能明白kafka的工作原理了 Kafka 设计与原理详解 Kafka【入门
1.2 大量主题 默认包含大量美观的主题。可以从 bootstrap, readthedocs 和 12 款 bootswatch 主题中选择。...1.3 即时预览 内建的开发服务器使你在撰写文档的时候就即时预览. 它甚至能在保存更改时自动载入, 只需刷新浏览器就可以查看更改。 1.4 易于配置 可以配置文档主题。...2 什么是Materialfor MkDocs 一个MkDocs的MaterialDesign主题。...4 用mkdocs创建静态网页 4.1项目创建 管理员模式打开cmd，输入 mkdocs new my-project cd my-project mkdocs serve 生成一个my-project...4.2网页内容配置 因为mkdocs的即时预览，你修改的配置会直接载入网页。
领取专属 10元无门槛券
手把手带您无忧上云
