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,布局)

  • 【面试题系列Vue04】Vue.js中 $nextTick 原理及作用 周三有雨 面试题vuevue.js前端javascript
    作用：$nextTick主要用于延迟执行某个函数，直到下一次DOM更新循环结束之后。这通常在你修改了一些数据，并且想要等待Vue完成DOM的重新渲染后，才执行依赖于新DOM的操作时使用。常见的使用场景包括：在DOM更新后执行DOM依赖的操作，如操作滚动位置、聚焦输入框、或是基于新布局的计算。在进行了一系列数据更新后，确保所有的DOM变更都已完成。原理：Vue.js使用异步队列的方式来处理DOM更新
  • Vue 面试题 单页应用和多页应用的区别 莫道一龙 Vuevue.js前端javascript
    一、定义1.单页面应用单页面应用又称SPA(SinglePageApplication)指的是使用单个HTML完成多个页面切换和功能的应用。这些应用只有一个html文件作为入口，一开始只需加载一次js，css等相关资源。使用js完成页面的布局和渲染。页面展示和功能是根据路由完成的。单页面应用跳转，就是切换相关组件，仅刷新局部资源。优点：用户体验好前后端分离页面效果会比较炫酷（比如切换页面内容时的转
  • 华为rh2288v3服务器显示f02,华为RH2288 V3内部简介_华为 FusionServer RH2288 V3_服务器评测与技术-中关村在线... weixin_39789499
    华为RH2288V3内部简介内部结构的设计往往对服务器的稳定性有着重大的影响，不同部件不同布局可能对服务器的稳定性有着巨大的影响。接下来我们来看下这款RH2288V3服务器的内部结构。通过机器顶盖上的锁扣即可轻易打开。为了方便用户对内部的查看，RH2288V3服务器采用免工具拆卸设计，在机器顶盖上有一个锁扣，用户通过锁扣即可快速打开机器，查看产品内部情况。在服务器的背面板，也采用了精简设计，同时不
  • HarmonyOS应用开发实战-自定义TabBar,并添加动画效果 成功之路必定艰辛 harmonyos华为
    鸿蒙项目开发中，主界面中都会有TabBar，普通的TabBar大家都会使用了，今天来聊聊异于普通样式的TabBar，并添加一些动画效果，更加的美观。1.话不多说，先展示样式2.设计思路因普通的TabBar样式满足不了开发需求，想要中间添加一个+号会比较困难。基于这一点打算发挥自己创新思维，整体使用Stack()帧布局方式，给TabBar提前预留一个+号的位置，然后使用+号的Image给帧到对应位置
  • Redis基础知识学习笔记（一） 晚睡早起₍˄·͈༝·͈˄*₎◞ ̑̑ redisredis学习笔记
    文章目录Redis简介Redis简介REmoteDIctionaryServer(Redis)是一个由SalvatoreSanfilippo写的key-value存储系统，是跨平台的非关系型数据库,其是一个开源的使用ANSIC语言编写、遵守BSD协议、支持网络、可基于内存、分布式、可选持久性的键值对(Key-Value)存储数据库，并提供多种语言的API。Redis通常被称为数据结构服务器，因为值
  • 样式（2）———样式继承BaseOn Nobody-H C#c#
    楔子：新的布局时，样式想跟之前的不一样，但又想继承之前的样式，有什么办法？解决这个问题方式之一，可以通过样式继承的方式。如下面的代码片段：定义了一个按钮样式ButtonPrimary，这个样式基于另一个名为ButtonBaseStyle的基础样式，并设置了按钮的背景和边框颜色使用动态资源PrimaryBrush。以下是对这段代码的解释和如何使用它：样式键（x:Key）:ButtonPrimary是
  • 破解赚钱两级化 尘世知行者
    昨天文章谈到真正赚钱的都是闷声发财，这个不难理解，赚钱的本质还是稀缺，占据资源稀缺处的好事当然是知道的越少越好，等到竞争激烈、市场饱和，那就利润稀薄了，所以最好是有强大的壁垒，能参与的少，技术要做专利布局，比如高通，商业模式要做势能布局，强者越强，而金融市场有数据模型，比如当年的彼特林奇，闷声发财直到退休才公开公式模型，现在的文艺复兴公司年年收益率那么高，肯定是有关键性指标或者数据模型，钱是往资源
  • 《第二十九章 性能优化 - 界面流畅度优化》 黑色叉腰丶大魔王 性能优化
    一、引言在Android应用开发中，界面的流畅度直接影响着用户体验。一个卡顿、不流畅的界面可能会导致用户的不满和流失。在这一章中，我们将重点探讨如何通过减少布局层级和避免过度绘制来优化界面流畅度。二、减少布局层级（一）布局层级过多的影响布局层级过多会导致以下问题：加载时间延长：Android系统在解析和绘制布局时，需要处理更多的节点，从而增加了加载时间。内存占用增加：每个布局节点都需要占用一定的内
  • 鸿蒙界面开发（十）：轮播 (Swiper)图布局&宽高比例apsectRatio weightOneMillion 鸿蒙前端学习鸿蒙前端harmonyos
    轮播——Swiper组件Swiper组件提供滑动轮播显示的能力。Swiper本身是一个容器组件，当设置了多个子组件后，可以对这些子组件进行轮播显示。通常，在一些应用首页显示推荐的内容时，需要用到轮播显示的能力。针对复杂页面场景，可以使用Swiper组件的预加载机制，利用主线程的空闲时间来提前构建和布局绘制组件，优化滑动体验。Swiper作为一个容器组件，如果设置了自身尺寸属性，则在轮播显示过程中均
  • 南無始祖報身佛工巧明展显之 科技艺术 生命在一呼一吸之间
    科技艺术即是采用科技和艺术而设计，通过机械仪器科学数据，光源、温度、速度三维空间而组成的一种新型立体艺术，如整个画面立体画在一个平平的纸面上，可以看到很深、很远，画面可以飞出框外，犹如立体雕塑一样。又如玻璃画，双面透澈如天庭龙宫，在灯光的配合下，迷幻舒心。又如摄影，即是照像，照风景或照人、动物等，也是通过光线、布局、色彩而用照相机拍下来的美的艺术图片。但是，多杰羌佛第三世云高益西诺布顶圣如来将其在
  • Python 利用模板生成Word文档的三种方法 nuclear2011 pythonword
    目录引言方法一、替换模板中的占位符文本生成Word文档方法二、替换模板中的书签生成Word文档方法三、替换模板中的合并域生成Word文档引言模板是预先设计好格式和布局的文档，它包含了特定的样式、格式和元素，为我们创建新文档提供了一个便捷的起点。使用模板创建Word文档的好处在于我们无需从头开始设计文档的外观和结构，而是可以选择一个适合的模板，并根据需要修改其内容。这样做不仅可以节省大量时间和精力，
  • WebForms DataList 控件深入解析 lly202406 开发语言
    WebFormsDataList控件深入解析概述在ASP.NETWebForms的众多服务器控件中，DataList控件是一个功能强大的数据绑定控件，它允许开发者以表格形式展示和操作数据。DataList控件类似于Repeater控件，但提供了更多的内置布局和样式选项。本文将深入探讨DataList控件的使用方法、属性、事件以及在实际开发中的应用场景。DataList控件基础控件定义DataLis
  • 2019-03-21 蜜思1013
    SPA:单页应用https://baike.baidu.com/item/SPA/175363131.场景（1）中后台管理系统（2）H5前端开发（3）跨端APP开发2.技术栈（1）SpringBootvue-cliIDEnpmElementUI（2）vue-cliSPA,npm,建议自己布局写样式（3）uni-app,Flutter,RN,cordova(调用底层API)3.IDE（1）WSVSc
  • View画矩形统计图(可动态添加) ✎ℳ๓Eternity✾ 进阶
    布局画矩形统计图publicclassMyViewextendsView{privatePaintmLinePaint,mTextPaint,mRectPaint;ArrayListlist;publicMyView(Contextcontext){super(context);init();}publicMyView(Contextcontext,AttributeSetattrs){super
  • 从打开电源到开机操作系统启动的全过程 hkhl_235 操作系统操作系统开机启动
    从打开电源到开始操作，计算机的启动是一个非常复杂的过程我一直搞不清楚，这个过程到底是怎么回事，只看见屏幕快速滚动各种提示……这几天，我查了一些资料，试图搞懂它。下面就是我整理的笔记。零、boot的含义先问一个问题，”启动”用英语怎么说？回答是boot。可是，boot原来的意思是靴子，”启动”与靴子有什么关系呢？原来，这里的boot是bootstrap（鞋带）的缩写，它来自一句谚语：“pullone
  • 银发产业快讯——京东健康与国药太极合作 AgeClub 人工智能大数据银发经济新老年中老年
    2024年8月27日星期二京东健康与国药太极合作，共建中医药数字健康新生态前海管理局与香港数码港合作，共推乐龄科技协同发展国药大健康合作官栈，发布中式养生新品泰康之家启动首期老年长期照护护士专科培训计划威海迪尚服装取得适用于卧床老人保暖裤的专利大连康养产业集团等合作聚焦康养领域人才培养恒锋信息控股子公司已布局养老服务全业态北京农商银行养老助残卡累计发行600万张穗港签署推进两地养老合作意向书住建部
  • 微信小程序 - picker-viewer实现省市选择器 卡卡舅舅 微信小程序微信小程序
    简介本文会基于微信小程序pickerviewer组件实现省市选择器的功能。实现效果实现代码布局{{item.name}}{{item.name}}js代码借助observers，监听provincecode的变化，实现cities的更新。Page({data:{provinces:[],cities:[],value:[0,0],provinceCode:0},onLoad(){varprovin
  • CSS基础 水平垂直居中 呼叫6945 CSS篇css前端css3
    几种实现水平垂直居中方式利用定位+margin:auto利用定位+margin:负值利用定位+transformtable布局flex布局grid布局利用定位+margin:auto先上代码：.father{width:500px;height:300px;border:1pxsolid#0a3b98;position:relative;}.son{width:100px;height:40px;
  • 《CSS 揭秘》案例dome kingrome2009 css3动画css揭秘
    本书是一本注重实践的教程，作者为我们揭示了47个鲜为人知的CSS技巧，主要内容包括背景与边框、形状、视觉效果、字体排印、用户体验、结构与布局、过渡与动画等。本书将带领读者循序渐进地探寻更优雅的解决方案，攻克每天都会遇到的各种网页样式难题。史上最全的实例建议不要买书因为电子版的更适合我们下载链接css揭秘pdfdomeDocument*{margin:0;padding:0;}body{backgr
  • D37-《高效能人士的七个习惯》-先诊断后开方 小月亮06
    image（雪瓶老师带领我们解读《高效能人士的七个习惯》，以下是我的复盘笔记，希望对大家有所帮助，欢迎大家在留言区讨论，如果大家觉得喜欢，可以点个赞哦~感谢~）【背景】1、调研昨天阅读完成情况及感受2、小伙伴们分享阅读感受3、雪瓶老师用鞋业拆解先诊断后开方【新知】1、如何快速了解一个陌生行业？1）先看行业报告2）行业现状→行业未来发展方向3）布局再看：国家政策，市场格局，领军企业，核心竞争力2、当
  • Logo 设计神器 大华创业日记 ai
    利用AI技术，可以在几秒钟内生成独特的logo设计，我们只需输入一些关键词和商业名称即可。例如，我们输入名称「机器之能」以及行业「AIMedia」，它一口气生成了10000个Logo。是的，你没看错：就是10000个！五花八门、各式各样的Logo看得人眼花缭乱。可以自定义生成logo，包括字体、颜色、布局等，可下载多种格式的文件。
  • 【自用14.19】C++俄罗斯方块 .远_ Pro学习笔记C++c++java算法
    该系列文章会根据项目的编写步骤来出由于设备问题，暂时出的代码是未进行运行检验的，后期会补上运行后的版本设计消除功能-check函数实现#include//C语言形式的输入输出#include//图形库的头文件#include#include//kbhit()intscore=0;//总分intrank=0;//等级#defineBLOCK_COUNT5#defineBLOCK_WIDTH5#def
  • vue 调用移动录像_vue H5项目调用手机摄像头录像并上传 weixin_39791446 vue调用移动录像
    上传文件input.file{position:relative;-moz-opacity:0;filter:alpha(opacity:0);opacity:0;z-index:2;}.wrapper{color:#fff;background-color:#31b0d5;border-color:#269abc;margin-top:5px;margin-bottom:5px;display:
  • springboot配置文件加载顺序，配置文件优先级 AiJann
    1.若application.yml和bootStrap.yml在同一目录下，则bootStrap.yml的加载顺序要高于application.yml,即bootStrap.yml会优先被加载。原理：bootstrap.yml用于应用程序上下文的引导阶段。bootstrap.yml由父SpringApplicationContext加载。•bootstrap.yml可以理解成系统级别的一些参数配
  • 2020-04-18 王星唯
    短期震荡行情低多为主高空为辅太多假象利好消息真能带动行情上涨？咱们先持怀疑态度，不追高谨防冷门！BTC:小时线均线来看，均在价格下方形成层层支撑，币价有短期再次回暖的趋势；关注日内7000支撑的防守情况，在7000一线仍旧可以布局一次打底仓超短线多单。若回撤刺破7000，关注4小时线6930一线重要支撑，也就是6900可以比较稳健的去做一下多单，毕竟是支撑位。【具体进场点位+VBTCWXW】4小时
  • 为获得更好的效果，我们是如何把控照明设计的 乔_f159
    在建筑和室内设计中，照明是表达空间形态、营造环境气氛的基本元素，能在视觉上美化或破坏空间。其影响根据照明设计的环境、目的及内外空间等的改变而不同，诸如外墙和景观项目。在这里我们假设有两个具有相同尺寸和布局环境空间，一个有且仅有一个未指定的照明点，而第二个空间则考虑评估了空间的使用及建筑设计等方面的问题后，做了照明设计。毫无疑问，我们会选择第二个更为舒适的空间。当然，不好的照明设计会破坏空间，那么我
  • 前端 css基础 湫風如兮 css
    1.什么是css是一组样式设置的规则，用于控制页面的外观样式2.为什么使用css1.实现内容与样式的分离，便于团队开发2.样式复用，便于网站的后期维护3.页面的精确控制，让页面更精美3.css作用1.页面外观美化2.布局和定位4.css应用方式也称为CSS引用方式，有三种方式：内部样式、行内样式、外部样式4.1.内部样式在title标签下面建一个style标签写css代码优点：在同一个页面内部便于
  • Visio2021下载与安装：附软件安装包+详细安装步骤 文采飞扬的阿文 流程图学习
    Visio是一款十分专业和优秀好用的流程图绘制软件，MicrosoftOfficeVisio2021可以轻松直观地创建流程图、网络图、组织结构图、工程设计以及其他使用现代形状和模板的内容。使用Visio这款工具，可以绘制业务流程图、组织结构图、项目管理图、营销图表、办公室布局图、网络图、电子线路图、数据库模型图、工艺管道图、因果图和方向图等，便于IT和商务专业人员就复杂信息、系统和流程进行可视化处
  • linux 进程映射空间 libc,linux进程地址空间布局浅析 钟程杰 linux进程映射空间libc
    此文章是围绕该文章的思路进行总结的，原文记录的笔记详尽，在此基础上，我总结了本身的一下(想对浅显)。若是对具体细节想要了解的，能够访问这篇文章，在文章最后付了一段代码，跟该成程序的内存映射图，若是有哪里写的不正确，欢迎补充和指正。linux程序是什么抽象的来讲当咱们打开电脑点击应用程序图标，一个程序就运行起来了，可是在操做系统层面来看，实际上是产生了一个进程，这是一个程序的实体。ios接下来以li
  • 面试题提升—浏览器+网络部分高频面试题 6230_ 面试合集javascript网络html前端面试跳槽改行学it
    一、浏览器1、什么是reflow(回流/重排)reflow的本质：其实就是：重新计算layout树(布局树)具体解释：当进行了会影响布局树的操作后，需要重新计算布局树，会引发layout。为了避免连续多次操作后，导致布局树反复计算，浏览器会合并这些操作，当JS代码全部完成后再进行统一计算。所以，改动属性造成的reflow是异步完成的。也同样因为如此，当JS获取布局属性时，就可能会造成：无法获取到最
  • 多线程编程之存钱与取钱 周凡杨 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