你是否使用过智能手机浏览真正的网页? 你是否因为自己作为后端程序员而不能开发出较漂亮的页面? 你是否开发过能够同时适应不同分辨率的屏幕的页面?...本章主要讲解Bootstrap 的历史由来，如何在项目中使用Bootstrap，以及Bootstrap 框架中包含的内容。...Bootstrap 中包含了丰富的Web 组件，根据这些组件，可以快速地搭建一个漂亮、功能完备的网站和管理系统。...Bootstrap 包含的组件如下：字体图标、下拉菜单、按钮组、按钮式下拉菜单、输入框组、导航、导航条、分页、标签、徽章、巨幕、页头、缩略图、提示框、进度条、媒体对象、列表组、面板、对话框等。...简单模板 在使用Bootstrap 时，需要在页面中引用Bootstrap.css 样式。如果要使用到相应的组件，还要引入jQuery.js 以及Bootstrap.js 文件。
按钮是网页上的交互元素，通常用于触发某种操作或链接到其他页面。Bootstrap 提供了一系列按钮样式，使按钮看起来更漂亮、一致且易于使用。这些按钮样式包括不同的颜色、尺寸和状态。...Bootstrap 图标的基本结构 使用 Bootstrap 图标非常简单，只需在 HTML 中添加一个图标元素即可。...您可以使用 Bootstrap 的文本颜色类来实现这一效果，如 text-primary、text-success、text-warning 等。...以下是一个示例，展示如何在按钮中使用图标： 喜欢 这个示例中...不论您是新手还是有一定经验的开发者，掌握 Bootstrap 中按钮和图标的使用都将有助于提升您的网页设计和用户体验。
z-index 属性设置元素的堆叠顺序，拥有更高的堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面 该属性设置一个定位元素沿着 z 轴的位置，z 轴定义为垂直延申到显示区的轴，如果为正数，则离用户更加近...有哪些的隐藏内容的方法？ 使用display:none来隐藏所有内容 display:none可以让网页中所有内容不显示，如代码、文字、链接、图片、div层，是推荐的内容隐藏方式。...我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行（row）与列（column）的组合创建页面布局，然后你的内容就可以放入到你创建好的布局当中。...下面就简单介绍一下Bootstrap栅格系统的工作原理： 网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询...Bootstrap框架中的网格系统就是将容器平分成12份。 你用过媒体查询，或针对移动端的布局/CSS 吗？
天蓝 panel-warning 黄 panel-danger 红 媒体对象 媒体对象是用来生成组件来包裹需要和文字对齐的媒体（图片、视频、声音）。...Bootstrap的媒体对象用在这里很方便，使用它可以很容易的创建很多层嵌套。...如程序片段所示，媒体需要包含一个media-object，并且本体被标签包裹。然后，您可以通过在一个元素上添加一个 pull-left或pull-right的类来将媒体对齐到任何元素。...使用符号代替小图像有很多优点，包括： 为小图像或精灵保存多个请求； 由于它们是字体图标，它们的颜色和大小可以在使用CSS属性的过程中变化； 在所有的展示中，他们看起来都很干脆利落。...要使用Glyphicons符号，您需要使用这样的标记: 这段代码显示了一个心图标，图标中的每个图标都有一个独特的类
并且，它提供了所有必要的CSS资源，只需在HTML模板中包含“css/ get-shit-done.css”即可使用。 2. Shards Dashboard Lite React ?...免费下载 Stream UI Kit是一款开源Bootstrap4 UI Kit，包含5个漂亮的完整页面，包括20多个可重复使用和可自定义的UI模块，例如色彩，排版，字体，按钮等等。...免费下载 这款时尚简约的工具包包括523 UI组件，用于创建现代化的在线商店，博客，杂志或在线媒体。...免费下载 Material Admin是完全使用Bootstrap框架构建的免费管理模板，提供按钮、图标、表格、排版等基础组件。...希望你能从这些免费的Bootstrap模板中获取灵感，并在下一个设计项目中使用起来。 相关阅读： 想让网站销量爆涨？
使用Bootstrap 3+ Framework，HTML5和CSS3，等技术开发而成。 inspinia admin 包含大量的可重复使用的UI组件的集合，并与最新的jQuery插件集成。...可以用于所有类型的Web应用程序，如自定义管理面板，项目管理系统，管理仪表板，应用程序后端，CMS或CRM。...font-awesome图标 /static/css/animate.css CSS3动画库 /static/css/style.css 常规的style /static/css/metisMenu.css...导航栏插件 /static/css/iconfont/iconfont.css 阿里巴巴矢量图标库 /static/css/bootstrap-datetimepicker.min.css bootstrap...日期控件 /static/css/sweetalert.css 漂亮的弹窗口插件 整体前端框架使用到的js文件，后续还会用到echarts /static/js/inspinia.js 一套后台管理模板
我们也可以使用另一种格式，如 svg... 我想向您介绍一种工具，可以帮助您轻松创建网站图标，设计精美且完全免费，免费的网站图标制作工具。...37、CSS 3D 变换 地址：https://polypane.app/css-3d-transform-examples/ 这是使用透视属性为网页创建 3D 对象的方法的集合。...40、Bootstrap Icons 地址：https://icons.getbootstrap.com/ 以前，Bootstrap Icons 的诞生是为了满足构建 Bootstrap 组件、文档的需求...41、Squircley 地址：https://squircley.app/ Squircley 帮助我们为 Web 中的对象创建漂亮的形状，例如背景、图标、徽标...... 42、mailgo 地址.../home CSS Spider 是 Google Chrome、Firefox 的扩展，主要任务是帮助我们查看属性并获取网页中任何对象的 CSS 代码。
Bootstrap 是一个流行的前端框架，提供了丰富的组件，用于创建各种网页元素和交互效果。这些组件可以帮助开发者轻松构建漂亮、响应式的网页，而无需深入的前端开发知识。...Bootstrap 按钮 按钮是网页中的常见组件，用于触发操作或导航到其他页面。Bootstrap 提供了丰富的按钮样式，使按钮看起来更漂亮、一致且易于使用。...Bootstrap 表格 表格是用于展示和组织数据的重要组件，Bootstrap 提供了一系列表格样式，使表格看起来更漂亮、一致且易于阅读。...Bootstrap 提供了易于使用的导航栏组件，使您能够轻松创建专业的导航。...Bootstrap 允许您创建可关闭的警告框，用户可以点击关闭图标来关闭警告。
本篇博客将深入探讨 Bootstrap 导航条和分页条的使用，适用于那些希望提升网页设计技能的初学者。 什么是 Bootstrap？...它是一个强大的工具，旨在帮助开发人员轻松创建漂亮的网页和应用程序。...class="navbar-toggler-icon"：这是 Bootstrap 提供的按钮图标，用于在小屏幕上切换导航栏的可见性。 class="navbar-nav"：这是导航条的导航项容器。...以下是一个示例，展示如何在导航条中创建下拉菜单： <a class=...我们使用 Bootstrap 的 .dropdown 类来创建下拉菜单。
······ 从第三方下载回来的库【只用不改】 ├─ /favicon.ico ················ 站点图标 └─ /index.html ················...约定编码规范 HTML约定： 在head中引入必要的CSS文件，优先引用第三方的CSS，方便我们自己的样式覆盖 在body末尾引入必要的JS文件，优先引入第三方的JS，注意JS文件之间的依赖关系，比如bootstrap.js...第三方依赖 jQuery——Bootstrap框架中的所有JS组件都依赖于jQuery实现 html5shiv——让低版本浏览器可以识别HTML5的新标签，如header、footer、section...--html5shiv让浏览器可以识别HTML5的新标签--> 10 11 <!...——栅格系统——响应式工具类 （2）预置界面组件 导航——导航条——面包屑导航——下拉菜单——按钮式下拉菜单——按钮组——警告框——页头——分页——列表组——面板——媒体对象——进度条——Glyphicons
的 Element UI 的后台模板 vue-electron：将选择的API封装到Vue对象中的插件 cleave：基于cleave.js的Cleave组件 vue-events：简化事件的VueJS...指令 v-media-query：vue中添加用于配合媒体查询的方法 vue-observe-visibility：当元素在页面上可见或隐藏时检测 vue-ts-loader：在Vue装载机检查脚本...-VueJS：使用移动框架的示例 cnode-vue：基于vue和vue-router构建的cnodejs web网站SPA vue-cli-multipage-bootstrap：将vue官方在线示例整合到组件中...– 简化事件的VueJS插件 http-vue-loader – 从html及js环境加载vue文件 vue-electron – 将选择的API封装到Vue对象中的插件 vue-router-transition...– 非阻塞通知库 v-media-query – vue中添加用于配合媒体查询的方法 vuex-shared-mutations – 分享某种Vuex mutations vue-lazy-component
这些新工具是运行在浏览器上的矢量图应用，它们替代了使用如Adobe Illustrator那样昂贵的桌面程序，来完成信息图设计。...优点 • 创建信息图、讲稿、动画、广告条以及自定义布局 • 通过改变数据值直接插入和编辑图表对象 • 巨大的图标和图片库 • 直接嵌入YouTube视频 • 学生和教师特价优惠 不足 • 免费的基本版功能有限制...Canva充满各种选项， 无论你在做的项目是用于工作、个人或是社交媒体，每个新项目都始于一个模版。这样，在给定的布局范内，你可以将注意力集中在秒杀一个漂亮的设计。...优点 • 出色且精练的入门教程让你上手，以及很多进阶概念的教程 • 模版涵盖社交媒体、博客、讲稿、海报、商业名牌、邀请等等 • 使用简单直观 • 很大的图片库可供选择 不足 • 没有可编辑的图表对象，你得导入自己的数据可视化...他们的程序易用性好，并且在使用其简单图形工具建立和编辑信息图方面，提供了非常大的自由度。他们提供了分类的图标、尺寸可调的画布、设计驱动的图表以及交互图。
难度：2 问题：水平堆叠数组a和b。 输入： 输出： 答案： 10.没有硬编码的情况下，在numpy中如何生成自定义序列？ 难度：2 问题：创建以下模式而不使用硬编码。...输入： 答案： 22.如何使用科学记数法（如1e10）漂亮地打印一个numpy数组？...难度：1 问题：使用科学记数法（如1e10）漂亮的打印数组rand_arr 输入： 输出： 答案： 23.如何限制numpy数组输出中打印元素的数量？...答案： 66.如何将numpy的datetime64对象转换为datetime的datetime对象？...难度：4 问题：从给定的一维数组arr，使用步长生成一个二维数组，窗口长度为4，步长为2，如[[0,1,2,3]，[2,3,4,5]，[4,5,6,7]..]
工具类 方便操作对象，数组等的工具库 underscore.js lo-dash 与underscore.js的api基本一致。...但貌似只能在弹出层中显示，而没有下拉这种方式显示。 zebra-datepicker 可配置性很强。但貌似只能在弹出在右上方。。。...bootstrap-datepicker bootstrap风格。 dateRangePicker 选取时间段。bootstrap风格。...transit 对元素进行css的变换 视觉差插件 scrollorama 比较简单 superscrollorama 能做的效果更多，但要用第三方Tween的库，使用起来比较复杂。...scrolldeck flash swfobj 能够自动检测PC、Mac机器上各种主流浏览器对Flash插件的支持情况。它使得插入Flash媒体资源尽量简捷、安全。
这需要理解手中数据的内容，其回报是抓住读者的注意力，并引导他们的理解，而不是让读者迷失在随意堆叠的无意义的数字中，并最终失去他们。用信息图说话，来看一个好的例子。 ?...下面两个信息图在强调钩子方面做的很好，它们用了位置，大小和颜色。 ? ? 3 展示，不要“告诉” 这个貌似很明显，但是还是要尽可能减少文字到使用量。使用简介的遣词，局部聚集的文字，一语中的。...在不得不使用文字的地方，确保用图标、有趣的排版活着周边留白加以均衡处理，避免密集文字区块。不论是好还是坏，读（文字）是个不怎么21世纪的事（图和视频更受欢迎）。 同样，先上信息图，再做解释 ?...这个信息图是一个工作职位列表，但它不是简单地逐点罗列出对候选人的要求，而是使用视觉上更吸引人的一版图标。整体上来说，在格式和颜色方面，这个设计做到了完美的平衡。...最后，是另一个柱状图，但将其表现为一个台阶造型，以区别于之前的柱状图。 5 颜色和字体 对于任何形式的设计，选择漂亮的颜色和明显的字体非常关键。对于颜色，使用三色调调色板通常是一个好的选择。
应用程序图标：PWAs可以在用户的主屏幕上以类似于移动应用的方式添加，并且可以使用自定义图标。 推送通知：PWAs支持向用户发送推送通知，这有助于提高用户参与度。...要将Web应用转变为PWA，您需要执行以下操作： 添加一个Web App Manifest文件，其中包含有关应用的信息，如名称、图标和颜色。 注册Service Worker以启用离线功能。...响应式设计的主要原则包括： 弹性网格：使用相对单位（如百分比）来布局页面元素，以便它们可以适应各种屏幕尺寸。 媒体查询：使用CSS媒体查询来根据屏幕尺寸和特性应用不同的样式。...适应性内容：根据不同屏幕尺寸提供不同的内容，以确保用户在移动设备上获得最有用的信息。 响应式设计可以通过使用CSS框架（如Bootstrap、Foundation）来简化。...font-size: 12px; } } 这个示例中，我们使用CSS媒体查询来根据屏幕宽度应用不同的段落字体大小。
具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。...基本上都是基于Bootstrap 的响应式设计。...媒体查询 ---- css3 媒体查询更加完善，不管用什么UI框架媒体查询也是逃不掉的，可以做一些细节适配。...具体使用不说了，查看文档即可： CSS3 @media 查询 响应式 Web 设计 - 媒体查询 Sass和媒体查询 LESS @media内部作用域/扩展 sass 和 less 可以支持嵌套媒体查询...，响应式需要动态触发需求的时候可以用到，如侧边栏开关。
Jenkins 使用 图 1 所示的静态对象模型结构来组织项目。 Jenkins 用户界面中的顶级项目是工作（至少是我们感兴趣的顶级项目）。...您可以下载插件内容，并详细了解如何在实践中使用这些新组件。或者，您可以更改此插件，只是为了了解如何对这些新组件进行参数设置。...因此，在接下来的部分中，我将提供一些示例和新概念，插件可以将这些示例和新概念用作其自身内容的构建块。 现代化图表 Jenkins 插件通常不经常使用图标。大多数插件都提供了操作图标，仅此而已。...您可以在这些卡中显示插件的任何图标，但是建议使用现有的 Font Awesome 图标之一，以在 Jenkins 的插件生态系统中获得一致的外观。...您可以在一个图表中显示多条线，可以显示堆叠的值，甚至可以显示某些值之间的差异。您也可以查看 charts of the warnings plugin，了解其中一些功能。
转换 svg 图标 8️⃣ 结合使用 rem 和 em 等相对单位, 创建更有弹性的组件 3....内联 CSS 不支持复杂的样式配置, 例如伪元素, 伪类, 动画定义, 媒体查询和媒体回退(对象不允许同名属性, 例如display: -webkit-flex; display: flex;) 内联样式通过...关于 Theme 对象的设计我觉得可以参考传统的 UI 框架, 例如Foundation或者Bootstrap, 经过多年的迭代它们代码组织非常好, 非常值得学习....点击这里了解更多, 另外在这里了解如何在 Typescript 中声明 theme 类型 8....svg 图标代替了 font 图标 对比SVG vs Image, SVG vs Iconfont ---- 8️⃣ 结合使用 rem 和 em 等相对单位, 创建更有弹性的组件 Bootstrap
元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding 3.栅格类适用于与屏幕宽度大于或等于分界点大小的设备 .col-md-*此为栅格类 二，媒体查询.../* 超小屏幕（手机，小于 768px） */ /* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？）...的栅格系统是如何在多种屏幕设备上工作的。...超小屏幕 手机 (<768px)小屏幕 平板 (≥768px)中等屏幕 桌面显示器 (≥992px)大屏幕 大桌面显示器 (≥1200px) 栅格系统行为 总是水平排列 开始是堆叠在一起的，当大于这些阈值时将变为水平排列...打印类 和常规的响应式类一样，使用下面的类可以针对打印机隐藏或显示某些内容。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
