benhuo931115
benhuo931115

Bootstrap学习（二）——Bootstrap 布局组件

Bootstrap 布局组件

Bootstrap 字体图标(Glyphicons)

什么是字体图标？

字体图标是在 Web 项目中使用的图标字体。

获取字体图标

Bootstrap 3.x 版本，在 fonts 文件夹内可以找到字体图标，它包含了下列这些文件：

  • glyphicons-halflings-regular.eot
  • glyphicons-halflings-regular.svg
  • glyphicons-halflings-regular.ttf
  • glyphicons-halflings-regular.woff

字体图标列表

http://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm

用法

如需使用图标，只需要简单地使用下面的代码即可。请在图标和文本之间保留适当的空间。

Bootstrap 下拉菜单（Dropdowns）

如需使用下列菜单，只需要在 class .dropdown 内加上下拉菜单即可

按钮上拉菜单

菜单也可以往上拉伸的，只需要简单地向父 .btn-group 容器添加 .dropup 即可

选项

对齐

  • 通过向 .dropdown-menu 添加 class .pull-right 来向右对齐下拉菜单

标题

  • 使用 class dropdown-header 向下拉菜单的标签区域添加标题

Bootstrap 按钮组

按钮组允许多个按钮被堆叠在同一行上

.btn-group-vertical : 该 class 让一组按钮垂直堆叠显示，而不是水平堆叠显示。

.btn-toolbar:该 class 有助于把几组

结合到一个
中，一般获得更复杂的组件。

.btn-group-lg, .btn-group-sm, .btn-group-xs:这些 class 可应用到整个按钮组的大小调整，而不需要对每个按钮进行大小调整。

嵌套

在一个按钮组内嵌套另一个按钮组，即，在一个 .btn-group 内嵌套另一个 .btn-group

Bootstrap 输入框组

通过向输入域添加前缀和后缀的内容，可以向用户输入添加公共的元素

向 .form-control 添加前缀或后缀元素的步骤如下：

  • 把前缀或后缀元素放在一个带有 class .input-group 的
    中。
  • 接着，在相同的
    内，在 class 为 .input-group-addon 的 内放置额外的内容。

  • 把该 放置在 元素的前面或者后面。

    
     $
     
     .00

输入框组的大小

通过向 .input-group 添加相对表单大小的 class（比如 .input-group-lg、input-group-sm、input-group-xs）来改变输入框组的大小

复选框和单选插件

按钮插件

可以把按钮作为输入框组的前缀或者后缀元素，使用 class .input-group-btn 来包裹按钮

带有下拉菜单的按钮

在输入框组中添加带有下拉菜单的按钮，只需要简单地在一个 .input-group-btn class 中包裹按钮和下拉菜单即可

Bootstrap 导航元素

表格导航或标签

创建一个标签式的导航菜单：

  • 以一个带有 class .nav 的无序列表开始。

  • 添加 class .nav-tabs。

    标签式的导航菜单

Bootstrap学习（二）——Bootstrap 布局组件_第1张图片

胶囊式的导航菜单

基本的胶囊式导航菜单

如果需要把标签改成胶囊的样式，只需要使用 class .nav-pills 代替 .nav-tabs 即可

基本的胶囊式导航菜单

这里写图片描述

垂直的胶囊式导航菜单
在使用 class .nav、.nav-pills 的同时使用 class .nav-stacked，让胶囊垂直堆叠

垂直的胶囊式导航菜单

Bootstrap学习（二）——Bootstrap 布局组件_第2张图片

两端对齐的导航

在屏幕宽度大于 768px 时，通过在分别使用 .nav、.nav-tabs 或 .nav、.nav-pills 的同时使用 class .nav-justified，让标签式或胶囊式导航菜单与父元素等宽

两端对齐的导航元素

Bootstrap学习（二）——Bootstrap 布局组件_第3张图片

禁用链接

对每个 .nav class，如果添加了 .disabled class，则会创建一个灰色的链接，同时禁用了该链接的 :hover 状态

下拉菜单

导航菜单与下拉菜单使用相似的语法。默认情况下，列表项的锚与一些数据属性协同合作来触发带有 .dropdown-menu class 的无序列表

  • 带有下拉菜单的标签

    向标签添加下拉菜单的步骤如下：

Bootstrap学习（二）——Bootstrap 布局组件_第4张图片

  • 带有下拉菜单的胶囊
    步骤与创建带有下拉菜单的标签相同，只是需要把 .nav-tabs class 改为 .nav-pills

Bootstrap 导航栏

默认的导航栏

创建一个默认的导航栏的步骤如下：

<img 6>

响应式的导航栏

为了给导航栏添加响应式特性，折叠的内容必须包裹在带有 classes .collapse、.navbar-collapse 的

中。折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是 data-target，指示要切换到哪一个元素。三个带有 class .icon-bar 的 创建所谓的汉堡按钮。这些会切换为 .nav-collapse
中的元素。为了实现以上这些功能，您必须包含 Bootstrap 折叠（Collapse）插件。

Bootstrap学习（二）——Bootstrap 布局组件_第5张图片

导航栏中的表单

使用 .navbar-form class,这确保了表单适当的垂直对齐和在较窄的视口中折叠的行为

<img 8>

导航栏中的按钮

使用 class .navbar-btn 向不在

中的

<img 9>

导航栏中的文本

如果需要在导航中包含文本字符串，请使用 class .navbar-text。这通常与

标签一起使用，确保适当的前导和颜色

非导航链接

使用 class navbar-link 来为默认的和倒转的导航栏选项添加适当的颜色

 
    Runoob 登录

组件对齐方式

使用实用工具 class .navbar-left 或 .navbar-right 向左或向右对齐导航栏中的 导航链接、表单、按钮或文本 这些组件

导航栏的位置

Bootstrap 导航栏可以动态定位。默认情况下，它是块级元素，它是基于在 HTML 中放置的位置定位的。通过一些帮助器类，可以把它放置在页面的顶部或者底部，或者可以让它成为随着页面一起滚动的静态导航栏。

  1. 固定到顶部：向 .navbar class 添加 class .navbar-fixed-top

  2. 固定到底部：向 .navbar class 添加 class .navbar-fixed-bottom

  3. 静态的顶部（随着页面一起滚动的导航栏）：添加 .navbar-static-top class

  4. 倒置的导航栏（带有黑色背景白色文本的倒置的导航栏）：向 .navbar class 添加 .navbar-inverse class

<img 10>

Bootstrap 面包屑导航（Breadcrumbs）

面包屑导航（Breadcrumbs）是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置。

Bootstrap 中的面包屑导航（Breadcrumbs）是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通过 CSS（bootstrap.min.css）中下面所示的 class 自动被添加：

.breadcrumb > li + li:before {
    color: #CCCCCC;
    content: "/ ";
    padding: 0 5px;
}

eg:

    
  
  1. Home
    2. 
  
  2. 2013
    3. 
  
  3. 十一月
    4.

<img 11>

Bootstrap 分页

分页（Pagination）

下表列出了 Bootstrap 提供的处理分页的 class。

Bootstrap学习（二）——Bootstrap 布局组件_第6张图片

默认的分页

<img 13>

翻页（Pager）

创建一个简单的分页链接为用户提供导航，可通过翻页来实现。与分页链接一样，翻页也是无序列表。默认情况下，链接是居中显示。

Bootstrap学习（二）——Bootstrap 布局组件_第7张图片

<img 15>

<img 16>

Bootstrap 标签

class .label 标签可用于计数、提示或页面上其他的标记显示。使用修饰的 class label-default、label-primary、label-success、label-info、label-warning、label-danger 来改变标签的外观

默认标签
主要标签
成功标签
信息标签
警告标签
危险标签

<img 17>

Bootstrap 徽章（Badges）

徽章与标签相似，主要的区别在于徽章的边角更加圆滑。
徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要把 添加到链接、Bootstrap 导航等这些元素上即可

列表导航中的激活状态

Bootstrap学习（二）——Bootstrap 布局组件_第8张图片

Bootstrap 超大屏幕（Jumbotron）

该组件可以增加标题的大小，并为登陆页面内容添加更多的外边距（margin）。使用超大屏幕（Jumbotron）的步骤如下：

  • 创建一个带有 class .jumbotron. 的容器
    。

  • 除了更大的

    ，字体粗细 font-weight 被减为 200px。

    
   
    
      
    欢迎登陆页面！
    
      
    这是一个超大屏幕（Jumbotron）的实例。
    
      
    
         学习更多

Bootstrap学习（二）——Bootstrap 布局组件_第9张图片

Bootstrap 页面标题（Page Header）

页面标题（Page Header）会在网页标题四周添加适当的间距,如需使用页面标题（Page Header），把标题放置在带有 class .page-header 的

中


   
页面标题实例
      子标题

Bootstrap 缩略图

使用 Bootstrap 创建缩略图的步骤如下：

添加自定义的内容

Bootstrap学习（二）——Bootstrap 布局组件_第10张图片

Bootstrap 警告（Alerts）

创建一个

，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框

可取消的警告（Dismissal Alerts）

创建一个可取消的警告（Dismissal Alert）步骤如下：

  • 通过创建一个
    ，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。
  • 同时向上面的
    class 添加可选的 .alert-dismissable。

  • 添加一个关闭按钮。

    
   
   成功！很好地完成了提交。

<img 21>

警告（Alerts）中的链接

在警告（Alerts）中创建链接的步骤如下：

  • 通过创建一个
    ，并向其添加一个 .alert class 和四个上下文 class（即 .alert-success、.alert-info、.alert-warning、.alert-danger）之一，来添加一个基本的警告框。
  • 使用 .alert-link 实体类来快速提供带有匹配颜色的链接。

Bootstrap 进度条

默认的进度条

  • 创建一个基本的进度条的步骤如下：
  • 添加一个带有 class .progress 的
    。
  • 接着，在上面的
    内，添加一个带有 class .progress-bar 的空的
    。

  • 添加一个带有百分比表示的宽度的 style 属性，例如 style=”60%”; 表示进度条在 60% 的位置。

    
   
    
      40% 完成

<img 22>

条纹的进度条

创建一个条纹的进度条的步骤如下：

  • 添加一个带有 class .progress 和 .progress-striped 的
    。
  • 接着，在上面的
    内，添加一个带有 class .progress-bar 和 class progress-bar-* 的空的
    。其中，* 可以是 success、info、warning、danger。
  • 添加一个带有百分比表示的宽度的 style 属性，例如 style=”60%”; 表示进度条在 60% 的位置。

动画的进度条

创建一个动画的进度条的步骤如下：

  • 添加一个带有 class .progress 和 .progress-striped 的
    。同时添加 class .active。
  • 接着，在上面的
    内，添加一个带有 class .progress-bar 的空的
    。
  • 添加一个带有百分比表示的宽度的 style 属性，例如 style=”60%”; 表示进度条在 60% 的位置。

堆叠的进度条


   

      40% 完成
   

   

      30% 完成（信息）
   

   

      20% 完成（警告）

<img 23>

Bootstrap 多媒体对象（Media Object）

在 HTML 标签中添加以下两种形式来设置媒体对象：

  • .media：该 class 允许将媒体对象里的多媒体（图像、视频、音频）浮动到内容区块的左边或者右边。

  • .media-list：如果你需要一个列表，各项内容是无序列表的一部分，可以使用该 class。可用于评论列表与文章列表。

    
   
      媒体对象
   
   
    
      
    媒体标题
    
      这是一些示例文本。这是一些示例文本。 
      这是一些示例文本。这是一些示例文本。
      这是一些示例文本。这是一些示例文本。
      这是一些示例文本。这是一些示例文本。
      这是一些示例文本。这是一些示例文本。
   
    

    

    
   
      媒体对象
   
   
    
      
    媒体标题
    
      这是一些示例文本。这是一些示例文本。 
      这是一些示例文本。这是一些示例文本。
      这是一些示例文本。这是一些示例文本。
      这是一些示例文本。这是一些示例文本。
      这是一些示例文本。这是一些示例文本。
      
    
         
            媒体对象
         
         
    
            
    媒体标题
    
            这是一些示例文本。这是一些示例文本。
            这是一些示例文本。这是一些示例文本。
            这是一些示例文本。这是一些示例文本。 
            这是一些示例文本。这是一些示例文本。
            这是一些示例文本。这是一些示例文本。

Bootstrap学习（二）——Bootstrap 布局组件_第11张图片

Bootstrap 列表组

列表组件用于以列表形式呈现复杂的和自定义的内容。创建一个基本的列表组的步骤如下：

  • 向元素
      添加 class .list-group。

    • 向

    • 添加 class .list-group-item。

        
   
      • 免费域名注册
        • 
   
      • 免费 Window 空间托管
        • 
   
      • 图像的数量
        • 
   
      • 24*7 支持
        • 
   
      • 每年更新成本
        •

    Bootstrap学习（二）——Bootstrap 布局组件_第12张图片

    向列表组添加链接

    
   免费域名注册

24*7 支持
免费 Window 空间托管
图像的数量
每年更新成本

    Bootstrap学习（二）——Bootstrap 布局组件_第13张图片

    Bootstrap 面板（Panels）

    面板组件用于把 DOM 组件插入到一个盒子中。创建一个基本的面板，只需要向

    元素添加 class .panel 和 class .panel-default 即可

    面板标题

    通过以下两种方式来添加面板标题：

    • 使用 .panel-heading class 可以很简单地向面板添加标题容器。to easily add a heading container to your panel.

    • 使用带有 .panel-title class 的

      -

      来添加预定义样式的标题。

      
   
      
      不带 title 的面板标题
   
      
   
      
      面板内容
   
      

      


      
   
      
      
      
         带有 title 的面板标题
      
      
   
      
   
      
      面板内容

    Bootstrap学习（二）——Bootstrap 布局组件_第14张图片

    面板脚注

    把按钮或者副文本放在带有 class .panel-footer 的

    中

    
   
    
      这是一个基本的面板
   
    
   
    面板脚注

    带语境色彩的面板

    使用语境状态类 panel-primary、panel-success、panel-info、panel-warning、panel-danger，来设置带语境色彩的面板

    带表格的面板

    
   
    
      
    面板标题
    
   
    
   
    
      这是一个基本的面板
   
    
   
    
      
    产品价格 
      
    产品 A200
    
      
    产品 B400
    
   
    

    

    
   
    面板标题
    
   
    
      
    产品价格 
      
    产品 A200
    
      
    产品 B400

    Bootstrap学习（二）——Bootstrap 布局组件_第15张图片

    Bootstrap Well

    Well 是一种会引起内容凹陷显示或插图效果的容器

    。为了创建 Well，只需要简单地把内容放在带有 class .well 的
    中即可。

    您好，我在大的 Well 中！
    

    您好，我在小的 Well 中！

    Bootstrap学习（二）——Bootstrap 布局组件_第16张图片

    参考：http://www.runoob.com/bootstrap/bootstrap-glyphicons.html

你可能感兴趣的:(h5知识学习,bootstrap,布局)

  • 发票合并工具 小朋的软件园 前端javascriptjavahtml服务器
    "发票合并工具"是一款专为高效整理票据设计的实用工具，支持将来自不同渠道的发票文件（如PDF文档、各类图片格式）快速整合为排版规范的PDF文件，尤其适用于财务报销场景下的批量票据处理需求。核心功能亮点多格式兼容：无缝导入PDF文件及常见图片格式（.png/.jpg/.jpeg/.bmp），适配多来源发票整合需求。智能布局配置：提供灵活的页面布局选项（每页2/3/4张发票），其中"2合1"模式针对报
  • Android ViewBinding 使用与封装教程 积跬步DEV Android开发实战大全android
    AndroidViewBinding使用与封装教程：一、ViewBinding是什么？核心功能：为每个XML布局文件自动生成一个绑定类（如ActivityMainBinding），直接暴露所有带ID的视图引用。优点：避免繁琐的findViewById()，类型安全且编译时检查。对比DataBinding：ViewBinding仅处理视图引用，无数据绑定功能。DataBinding支持双向数据绑定，
  • 基于开源AI智能名片链动2+1模式与S2B2C商城小程序的渠道选择策略研究 说私域 人工智能小程序
    摘要：在数字化商业环境下，品牌与产品的渠道选择对其市场推广和运营成功至关重要。本文聚焦于如何依据自身品牌和产品特性，结合开源AI智能名片链动2+1模式与S2B2C商城小程序，运用科学的渠道选择方法，慎重挑选1-2个适宜平台，集中资源发力并取得成绩后再拓展其他渠道。通过理论分析与案例研究，探讨该策略的有效性和可行性，为企业渠道布局提供参考。关键词：渠道选择；开源AI智能名片；链动2+1模式；S2B2
  • 【unity编辑器开发与拓展EditorGUILayoyt和GUILayoyt】 死也不注释 Unity编辑器开发与拓展笔记unity编辑器游戏引擎
    EditorGUILayout与GUILayout的核心区别及使用场景详解一、对比表特性GUILayoutEditorGUILayout命名空间UnityEngineUnityEditor使用场景运行时UI+编辑器扩展仅限编辑器扩展控件风格基础游戏风格（无编辑器优化）原生Unity编辑器风格布局复杂度基础流式布局高级自动布局（带标签对齐/间距优化）序列化支持❌不支持✅直接支持SerializedP
  • h5-video标签全屏显示记录 ZhDan91 前端开发混合app
    video{width:100%;height:100%;object-fit:fill;}
  • 自测魅族手机webview加载h5时ul嵌套li标签js失效问题记录 ZhDan91 混合app前端开发
    自测魅族手机ul嵌套li标签js失效问题：可采用div嵌套option实现样式：.hot_list{width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;}.hot_listoption{text-align:center;width:30%;padding:.16rem.34rem;border:0.1remso
  • GoView 强势入驻 GitCode：拖拽低代码，打造高颜值数据大屏 GitCode 代码君 gitcode低代码开源
    信息可视化时代，数字大屏日益成为展示核心KPI、运营状态、监控预警的主流形式。然而，用传统方式开发一个定制化数字大屏需要解决多少问题？1.繁复的数据源集成，各种不同的协议和格式……2.让人晕头转向的可视化逻辑，调动艰难的样式、布局、动画，和往往难以统一的风格3.牵一发而动全身的代码结构，就想换个主题色结果开启的全局CSS大冒险……现在，一个开源项目即可搞定上述问题——拖拽式低代码数字可视化平台Go
  • Java中的Tomcat，开启Web应用腾飞【基础版】
    目录一、Tomcat初登场：揭开神秘面纱（一）啥是Tomcat（二）为啥要有Tomcat二、Tomcat的安装与启动：开启第一步（一）下载Tomcat（二）启动Tomcat三、Tomcat的目录结构：探秘内部布局（一）核心目录介绍（二）目录间的协同工作四、部署JavaWeb应用到Tomcat：让应用上线（一）打包Web应用为WAR文件（二）部署WAR文件到Tomcat五、Tomcat的配置优化：让
  • css遗忘的知识2(grid布局，&父类选择器与:has() 讲解) 不断努力的根号七 csscss前端javascript
    ---grid布局1.基础Grid布局定义gird布局和行宽.container{display:grid;grid-template-columns:100px200px300px;/*三列，宽度分别为100px,200px,300px*/grid-template-rows:100px200px;/*两行，高度分别为100px,200px*/}常用单位fr(fractionalunit)：可用
  • 游戏开发日记 future1412 学习数据结构c#
    如何用数据表来储存，位置坐标（XYZ）：决定了对象在世界中的摆放资源ID/图片URL：决定了使用什么模型或贴图事件ID/特效：是否触发某些事件（例如点击、交互）逻辑索引（GridIndex）：用于程序检索和映射用途这在策略类、模拟类、RPG游戏中非常常见，例如建筑布局、怪物摆放、地图资源点等。这个表格决定的是玩家事件，使用了的图片名称URL，格子的出入口设置，格子的类型，是否为检察点，场景id，副
  • stm32与ESP32-C3通过串口连接 林内克思 stm32嵌入式硬件单片机
    ESP32-C3是一款安全稳定、低功耗、低成本的物联网芯片，搭载RISC-V32位单核处理器，支持2.4GHzWi-Fi和Bluetooth5（LE）。ESP32-C3本身就可以作为一个单片机使用，但是我们这里只是把ESP32-C3作为一个Wi-Fi/蓝牙模块使用。STM32与ESP32-C3使用串口进行通讯。STM32可以给ESP32-C3发送命令，这种命令叫ESP-AT指令。首先通过pc串口E
  • 数字经济时代科技创业的巨大潜力
    2025年3月，42岁的字节跳动创始人张一鸣以655亿美元身家成为中国新首富。这位"80后"企业家白手起家的故事，展现了数字经济时代科技创业的巨大潜力。本文将带您了解张一鸣的成功秘诀，分析网络安全行业的最新趋势，并为计算机专业学生提供实用建议。张一鸣的成功之道张一鸣的财富增长主要得益于字节跳动的全球化布局和技术创新。2024年上半年，公司营收达730亿美元，其中海外收入占比23%。旗下TikTok
  • 【操作系统】线程 Brookty JavaEElinuxjavajava-ee学习服务器操作系统后端
    JavaEE—线程一、进程与线程1.包含管理2.资源布局2.1公共资源2.2私有资源二、并发编程1.多线程优势1.1创建1.1.1多线程1.1.2多进程1.2通信1.2.1多线程1.2.2多进程1.3调度1.3.1多线程1.3.2多进程1.4销毁1.4.1多线程1.4.2多进程2.多进程优势2.1安全性2.1.1多进程2.1.2多线程2.2稳定性2.2.1多进程2.2.2多线程三、线程数量1.调度
  • 短剧小程序开发全攻略：从0到1打造爆款内容平台 weixin_lynhgworld 小程序短剧
    核心内容：行业趋势分析：短剧市场年增长率超300%，用户规模突破5亿，抖音、快手等平台加速布局。小程序成为短剧分发核心渠道：轻量化、低成本、社交裂变优势显著。开发核心功能模块：内容管理：支持多格式上传、分集管理、标签分类。播放体验优化：弹幕互动、倍速播放、清晰度切换、离线缓存。付费系统：单集付费、会员订阅、广告解锁等多元化盈利模式。社交裂变：分享奖励、邀请排行榜、拼团观影功能。技术实现难点：视频流
  • 【Python办公】Excel透视转数据图表(饼状图\柱状图\折线图-可拓展) 小庄-Python办公 Python办公自动化pythonexcel开发语言Excel透视Excel透视工具python数据分析数据分析
    目录专栏导读前言项目概述技术栈选择核心依赖库核心架构设计类结构设计数据流设计界面设计实现布局结构动态界面更新核心功能实现1.透视表计算2.数据排序功能3.数据可视化4.数据统计功能错误处理和用户体验输入验证异常处理项目亮点和创新点1.灵活的多列组合2.智能数据类型处理3.一体化的数据处理流程4.用户友好的界面设计使用场景扩展建议功能扩展性能优化总结完整代码结尾专栏导读欢迎来到Python办公自动化
  • 一文读懂HarmonyOS知识地图，开启鸿蒙开发新征程 大雨淅淅 #HarmonyOS开发harmonyos华为
    目录一、HarmonyOS知识地图是什么？二、HarmonyOS基础概念速览（一）起源与发展（二）核心特性（三）技术架构剖析1.内核层2.系统服务层3.框架层4.应用层三、HarmonyOS知识地图板块解读（一）开发基础知识1.应用程序包2.应用配置文件3.资源分类与访问4.ArkTS语言基础（二）UI开发知识1.方舟开发框架（ArkUI）2.布局与组件3.动画与交互（三）应用模型与能力1.Abi
  • 前端开发常见问题
    技术文章大纲性能优化问题页面加载速度慢的常见原因及解决方案渲染阻塞资源的处理方法图片与媒体文件优化策略懒加载与代码分割的实现方式浏览器兼容性问题不同浏览器对CSS特性的支持差异JavaScriptAPI的兼容性处理方案Polyfill的使用场景与实现方法自动化测试工具在兼容性测试中的应用响应式设计挑战移动端与桌面端布局适配问题媒体查询的最佳实践方案视口单位与相对单位的正确使用高DPI屏幕的图像处理
  • Synopsys 逻辑综合之 MultiBit Flip-Flop 与 ICG
    目录一、普通寄存器（1-bitFlip-Flop）二、Multi-BitFlip-Flop是什么？所以Multi-BitFF的做法就是：三、为什么要用Multi-BitFF？1.降低功耗2.减小芯片面积3.布局优化更容易（PhysicalAware）四、在SynopsysDesignCompiler中怎么支持？1.启用Multi-BitFlip-Flop功能：2.与ICG协同优化：3.后端ECO友
  • 爬虫技术：从基础到高级，探索数据抓取的奥秘
    一、基础爬虫：揭开数据抓取的神秘面纱对于初学者来说，基础爬虫是入门的起点。基础爬虫的目标通常是静态网页，这些网页的内容在加载时就已经确定，不需要与服务器进行交互。通过简单的HTTP请求和HTML解析，就可以获取到网页中的数据。在基础爬虫中，最核心的技术是HTML解析。HTML是网页的结构语言，它定义了网页的布局和内容。爬虫程序需要通过解析HTML，找到其中的文本、图片、链接等元素。常用的HTML解
  • 鸿蒙南向开发实战：如何对接图形框架？ 蜀道山QAQ 鸿蒙鸿蒙南向开发OpenHarmonyharmonyos华为鸿蒙前端鸿蒙系统android
    当前，小型系统图形模块以子系统的形式在OpenHarmony中运行。开发者只需适配实现OpenHarmonyHDF层API即可。由于使用场景不同，图形子系统也支持在不同平台集成运行。例如，在Windows/Mac上开发应用程序时，可以使用QTCreator进行简单的页面布局、开发和调试。此时，图形子系统已经适配到了Windows/Mac平台上运行。如果想要将图形子系统独立集成到现有项目中，则需要进
  • IP与“谷子”齐飞，阅文“乘势而上”？
    爆火的“谷子经济”，又捧出一只“潜力股”。近日，阅文集团股价持续上涨，5日累计涨幅达13.20%。这其中，周三股价一度大涨约15%至29.15港元，强势突破20日、30日、120日等多根均线，市值突破280亿港元关口。股价持续大涨的背后，阅文集团领投卡牌潮流文化品牌Hitcard发出来新的信号。显然，这是“阅文好物”商业化提速的一次关键布局。预计阅文好物后续将与Hitcard拓展IP商业化合作范围
  • CSS和CSS3区别对比
    CSS（层叠样式表）与CSS3（CSS的第三个版本）的区别主要体现在功能扩展、语法特性以及应用场景等方面。以下是两者的核心对比：一、核心概念与版本关系CSS：是基础样式表语言，用于分离网页内容与样式，最初发布于1996年（CSS1），后续补充了CSS2（1998年），但功能较为基础，主要关注简单的布局和样式。CSS3：是CSS的最新版本（2005年起制定），向下兼容CSS2，并引入模块化设计（如F
  • 专题：2025供应链数智化与效率提升报告|附100+份报告PDF、原数据表汇总下载 拓端研究室 php开发语言
    全文链接：https://tecdat.cn/?p=42926在全球产业链重构与数字技术革命的双重驱动下，供应链正经历从传统经验驱动向数据智能驱动的范式变革。从快消品产能区域化布局到垂类折扣企业的效率竞赛，从人形机器人的成本优化到供应链金融对中小企业的赋能，技术创新与模式重构正在重塑行业价值网络。本报告洞察基于《灼识咨询：2025中国供应链金融科技行业蓝皮书》《中国银河证券：折扣业态供应链效率深度
  • Golang类型断言在反射中的应用：深入源码分析 Golang编程笔记 Golang编程笔记golang网络服务器ai
    Golang类型断言在反射中的应用：深入源码分析关键词：Golang、类型断言、反射、运行时、接口、类型系统、源码分析摘要：本文深入探讨Golang中类型断言与反射机制的底层关联，通过解析Go运行时源码和反射包实现，揭示类型断言在反射场景中的核心作用。从接口类型的内存布局出发，分析类型断言的两种实现形式（安全断言与暴力断言）在反射API中的具体应用，结合实际案例演示如何通过反射动态获取类型信息并进
  • 赛博半仙占卜系统-仅供娱乐 Mbblovey 娱乐人工智能服务器网络AI编程
    “赛博半仙占卜系统”的网页应用程序，其主要用途是为用户提供多种类型的占卜服务，包括塔罗牌占卜、星座运势查询、测字算命和八字命理分析，仅供娱乐参考。以下是对该系统各项功能的详细介绍：1.用户界面布局整体设计：网页采用暗色背景（#1a1a2e），以一个居中的容器展示内容，容器具有圆角和阴影效果，营造出科技感和神秘感。标题：页面标题为“赛博半仙占卜系统”，搭配一个星星和月牙的图标，突出主题。占卜类型选择
  • React移动端项目准备（ts版） sync98 前端框架reacttypescript
    一、创建项目使用脚手架命令创建新项目：1.通过命令行创建项目npxcreate-react-appts-geek-park-h5--templatetypescript2.src文件夹下，保留react-app-env.d.ts文件，删除其他文件，并且创建必要的文件项目结构：src>api封装接口>assets项目资源>components通用组件>hooks自定义钩子函数>pages页面组件>s
  • react create-react-app v5 从零搭建项目（不暴露 eject）_create-react-app 搭建移动端h5(1)
    cnpminstallaxios--save2.src/utils新建一个request.js文件(没有utils就新建一个目录然后再建一个request.js)3.request代码如下：这个是最简单的配置了，你可以根据自己的需求配置请求拦截里的东西。importaxiosfrom‘axios’//axios的配置文件,可以在这里去区分开发环境和生产环境等全局一些配置constdevBaseUr
  • 元旦倒计时项目实战：CSS+HTML+JS网页实现 BIG-HO
    本文还有配套的精品资源，点击获取简介：本文介绍了一个使用CSS、HTML和JavaScript技术实现的网页倒计时项目，该项目展示了距离元旦还有多少时间。CSS负责页面布局、美化和响应式设计，HTML构建页面结构并绑定数据，而JavaScript则处理时间计算、定时更新以及可能的交互事件。通过这个项目，开发者可以学习和掌握前端开发的动态效果与时间处理技巧。1.网页倒计时项目介绍在现代的数字营销和事
  • 计算机专业毕业设计-线上招聘与求职系统的设计与实现-开题报告 苦奢bu咖啡 课程设计毕业论文毕业设计软件开发开题报告求职招聘javaweb
    本系统开发采用技术为JSP、Bootstrap、Ajax、Springboot、Java、Tomcat、Maven此文章为开题报告，此系统已开发完成相关文档都很健全，相关的代码+部署+论文+ppt+代码讲解+答辩指导文件都有可私要，为本人亲自指导加编写，禁止任何人抄袭以及各类盈利性传播计算机专业毕业设计任何项目-程序-论文-想单独指导的可以私1、选题的目的和意义。通过开发一个功能全面的线上招聘与求
  • 微软刚发布的Copilot+PC为什么让Intel和AMD尴尬？2024 AI PC元年——产业布局及前景展望 高性能服务器 microsoftcopilot人工智能AIPCPC集群
    美国东部时间5月20日在微软位于华盛顿的新园区举行的发布会上，宣布将旗下AI助手Copilot全面融入Windows系统，能够在不调用云数据中心的情况下处理更多人工智能任务。“将世界作为一个提示词就从Windows系统开始”。微软的新PC将是“Copilot+PC”，是“有史以来速度最快、最适合AI的PC”。Copilot+PC十大亮点一：Copilot+PC的核心是人工智能Copilot+PC围
  • 多线程编程之存钱与取钱 周凡杨 javathread多线程存钱取钱
      生活费问题是这样的：学生每月都需要生活费，家长一次预存一段时间的生活费，家长和学生使用统一的一个帐号，在学生每次取帐号中一部分钱，直到帐号中没钱时 通知家长存钱，而家长看到帐户还有钱则不存钱，直到帐户没钱时才存钱。   问题分析：首先问题中有三个实体，学生、家长、银行账户，所以设计程序时就要设计三个类。其中银行账户只有一个，学生和家长操作的是同一个银行账户，学生的行为是
  • java中数组与List相互转换的方法 征客丶 JavaScriptjavajsonp
    1.List转换成为数组。（这里的List是实体是ArrayList) 　　调用ArrayList的toArray方法。 　　toArray 　　public T[] toArray(T[] a)返回一个按照正确的顺序包含此列表中所有元素的数组；返回数组的运行时类型就是指定数组的运行时类型。如果列表能放入指定的数组，则返回放入此列表元素的数组。否则，将根据指定数组的运行时类型和此列表的大小分
  • Shell 流程控制 daizj 流程控制if elsewhilecaseshell
    Shell 流程控制 和Java、PHP等语言不一样，sh的流程控制不可为空，如(以下为PHP流程控制写法)： <?php if(isset($_GET["q"])){ search(q);}else{// 不做任何事情} 在sh/bash里可不能这么写，如果else分支没有语句执行，就不要写这个else，就像这样 if else if if 语句语
  • Linux服务器新手操作之二 周凡杨 Linux 简单 操作
    1.利用关键字搜寻Man Pages    man -k keyword  其中-k 是选项，keyword是要搜寻的关键字 如果现在想使用whoami命令，但是只记住了前3个字符who，就可以使用 man -k who来搜寻关键字who的man命令       [haself@HA5-DZ26 ~]$ man -k
  • socket聊天室之服务器搭建 朱辉辉33 socket
    因为我们做的是聊天室，所以会有多个客户端，每个客户端我们用一个线程去实现，通过搭建一个服务器来实现从每个客户端来读取信息和发送信息。    我们先写客户端的线程。 public class ChatSocket extends Thread{ Socket socket; public ChatSocket(Socket socket){ this.sock
  • 利用finereport建设保险公司决策分析系统的思路和方法 老A不折腾 finereport金融保险分析系统报表系统项目开发
    决策分析系统呈现的是数据页面，也就是俗称的报表，报表与报表间、数据与数据间都按照一定的逻辑设定，是业务人员查看、分析数据的平台，更是辅助领导们运营决策的平台。底层数据决定上层分析，所以建设决策分析系统一般包括数据层处理（数据仓库建设）。   项目背景介绍 通常，保险公司信息化程度很高，基本上都有业务处理系统（像集团业务处理系统、老业务处理系统、个人代理人系统等）、数据服务系统（通过
  • 始终要页面在ifream的最顶层 林鹤霄
    index.jsp中有ifream，但是session消失后要让login.jsp始终显示到ifream的最顶层。。。始终没搞定，后来反复琢磨之后，得到了解决办法，在这儿给大家分享下。。 index.jsp--->主要是加了颜色的那一句 <html> <iframe name="top" ></iframe> <ifram
  • MySQL binlog恢复数据 aigo mysql
    1，先确保my.ini已经配置了binlog：   # binlog log_bin = D:/mysql-5.6.21-winx64/log/binlog/mysql-bin.log log_bin_index = D:/mysql-5.6.21-winx64/log/binlog/mysql-bin.index log_error = D:/mysql-5.6.21-win
  • OCX打成CBA包并实现自动安装与自动升级 alxw4616 ocxcab
    近来手上有个项目,需要使用ocx控件 (ocx是什么? http://baike.baidu.com/view/393671.htm) 在生产过程中我遇到了如下问题. 1. 如何让 ocx 自动安装?     a) 如何签名?     b) 如何打包?     c) 如何安装到指定目录? 2.
  • Hashmap队列和PriorityQueue队列的应用 百合不是茶 Hashmap队列PriorityQueue队列
      HashMap队列已经是学过了的,但是最近在用的时候不是很熟悉,刚刚重新看以一次,   HashMap是K,v键 ,值     put()添加元素      //下面试HashMap去掉重复的 package com.hashMapandPriorityQueue; import java.util.H
  • JDK1.5 returnvalue实例 bijian1013 javathreadjava多线程returnvalue
    Callable接口： 返回结果并且可能抛出异常的任务。实现者定义了一个不带任何参数的叫做 call 的方法。 Callable 接口类似于 Runnable，两者都是为那些其实例可能被另一个线程执行的类设计的。但是 Runnable 不会返回结果，并且无法抛出经过检查的异常。        ExecutorService接口方
  • angularjs指令中动态编译的方法(适用于有异步请求的情况) 内嵌指令无效 bijian1013 JavaScriptAngularJS
            在directive的link中有一个$http请求，当请求完成后根据返回的值动态做element.append('......');这个操作，能显示没问题，可问题是我动态组的HTML里面有ng-click，发现显示出来的内容根本不执行ng-click绑定的方法！     
  • 【Java范型二】Java范型详解之extend限定范型参数的类型 bit1129 extend
    在第一篇中，定义范型类时，使用如下的方式：   public class Generics<M, S, N> { //M,S,N是范型参数 }  这种方式定义的范型类有两个基本的问题：   1. 范型参数定义的实例字段，如private M m = null;由于M的类型在运行时才能确定，那么我们在类的方法中，无法使用m，这跟定义pri
  • 【HBase十三】HBase知识点总结 bit1129 hbase
    1. 数据从MemStore flush到磁盘的触发条件有哪些？    a.显式调用flush，比如flush 'mytable'    b.MemStore中的数据容量超过flush的指定容量，hbase.hregion.memstore.flush.size,默认值是64M 2. Region的构成是怎么样？ 1个Region由若干个Store组成
  • 服务器被DDOS攻击防御的SHELL脚本 ronin47
    mkdir /root/bin vi /root/bin/dropip.sh #!/bin/bash/bin/netstat -na|grep ESTABLISHED|awk ‘{print $5}’|awk -F:‘{print $1}’|sort|uniq -c|sort -rn|head -10|grep -v -E ’192.168|127.0′|awk ‘{if($2!=null&a
  • java程序员生存手册-craps 游戏-一个简单的游戏 bylijinnan java
    import java.util.Random; public class CrapsGame { /** * *一个简单的赌*博游戏，游戏规则如下： *玩家掷两个骰子，点数为1到6，如果第一次点数和为7或11，则玩家胜， *如果点数和为2、3或12，则玩家输， *如果和为其它点数，则记录第一次的点数和，然后继续掷骰，直至点数和等于第一次掷出的点
  • TOMCAT启动提示NB: JAVA_HOME should point to a JDK not a JRE解决 开窍的石头 JAVA_HOME
    当tomcat是解压的时候，用eclipse启动正常，点击startup.bat的时候启动报错; 报错如下：   The JAVA_HOME environment variable is not defined correctly This environment variable is needed to run this program NB: JAVA_HOME shou
  • [操作系统内核]操作系统与互联网 comsci 操作系统
         我首先申明：我这里所说的问题并不是针对哪个厂商的，仅仅是描述我对操作系统技术的一些看法       操作系统是一种与硬件层关系非常密切的系统软件，按理说，这种系统软件应该是由设计CPU和硬件板卡的厂商开发的，和软件公司没有直接的关系，也就是说，操作系统应该由做硬件的厂商来设计和开发
  • 富文本框ckeditor_4.4.7 文本框的简单使用 支持IE11 cuityang 富文本框
    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>知识库内容编辑</tit
  • Property null not found darrenzhu datagridFlexAdvancedpropery null
    When you got error message like "Property null not found ***", try to fix it by the following way: 1)if you are using AdvancedDatagrid, make sure you only update the data in the data prov
  • MySQl数据库字符串替换函数使用 dcj3sjt126com mysql函数替换
    需求：需要将数据表中一个字段的值里面的所有的  .   替换成  _   原来的数据是  site.title  site.keywords  .... 替换后要为     site_title  site_keywords   使用的SQL语句如下：   updat
  • mac上终端起动MySQL的方法 dcj3sjt126com mysqlmac
    首先去官网下载: http://www.mysql.com/downloads/ 我下载了5.6.11的dmg然后安装,安装完成之后..如果要用终端去玩SQL.那么一开始要输入很长的:/usr/local/mysql/bin/mysql 这不方便啊,好想像windows下的cmd里面一样输入mysql -uroot -p1这样...上网查了下..可以实现滴. 打开终端,输入: 1
  • Gson使用一（Gson） eksliang jsongson
    转载请出自出处：http://eksliang.iteye.com/blog/2175401 一.概述 从结构上看Json，所有的数据（data）最终都可以分解成三种类型： 第一种类型是标量（scalar），也就是一个单独的字符串（string）或数字（numbers），比如"ickes"这个字符串。 第二种类型是序列（sequence），又叫做数组（array）
  • android点滴4 gundumw100 android
    Android 47个小知识 http://www.open-open.com/lib/view/open1422676091314.html Android实用代码七段（一） http://www.cnblogs.com/over140/archive/2012/09/26/2611999.html http://www.cnblogs.com/over140/arch
  • JavaWeb之JSP基本语法 ihuning javaweb
      目录   JSP模版元素  JSP表达式  JSP脚本片断  EL表达式  JSP注释  特殊字符序列的转义处理  如何查找JSP页面中的错误   JSP模版元素    JSP页面中的静态HTML内容称之为JSP模版元素，在静态的HTML内容之中可以嵌套JSP
  • App Extension编程指南（iOS8/OS X v10.10）中文版 啸笑天 ext
             当iOS 8.0和OS X v10.10发布后，一个全新的概念出现在我们眼前，那就是应用扩展。顾名思义，应用扩展允许开发者扩展应用的自定义功能和内容，能够让用户在使用其他app时使用该项功能。你可以开发一个应用扩展来执行某些特定的任务，用户使用该扩展后就可以在多个上下文环境中执行该任务。比如说，你提供了一个能让用户把内容分
  • SQLServer实现无限级树结构 macroli oraclesqlSQL Server
    表结构如下： 数据库id path titlesort 排序 1 0 首页 0 2 0,1 新闻 1 3 0,2 JAVA 2 4 0,3 JSP 3 5 0,2,3 业界动态 2 6 0,2,3 国内新闻 1 创建一个存储过程来实现，如果要在页面上使用可以设置一个返回变量将至传过去   create procedure test as begin decla
  • Css居中div，Css居中img，Css居中文本，Css垂直居中div qiaolevip 众观千象学习永无止境每天进步一点点css
    /**********Css居中Div**********/ div.center { width: 100px; margin: 0 auto; } /**********Css居中img**********/ img.center { display: block; margin-left: auto; margin-right: auto; }
  • Oracle 常用操作(实用) 吃猫的鱼 oracle
    SQL>select text from all_source where owner=user and name=upper('&plsql_name');  SQL>select * from user_ind_columns where index_name=upper('&index_name');  将表记录恢复到指定时间段以前
  • iOS中使用RSA对数据进行加密解密 witcheryne iosrsaiPhoneobjective c
      RSA算法是一种非对称加密算法,常被用于加密数据传输.如果配合上数字摘要算法, 也可以用于文件签名. 本文将讨论如何在iOS中使用RSA传输加密数据. 本文环境 mac os  openssl-1.0.1j, openssl需要使用1.x版本, 推荐使用[homebrew](http://brew.sh/)安装. Java 8 RSA基本原理 RS