Mazey

Mazey 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

Mazey 发布了文章 · 2月28日

Bootstrap 学习 - 菜单 - 按钮 - 导航

1、下拉菜单(基本用法)

在使用 Bootstrap 框架的下拉菜单时,必须调用 Bootstrap 框架提供的 bootstrap.js 文件。当然,如果你使用的是未编译版本,在 js 文件夹下你能找到一个名为 dropdown.js 的文件。你也可以调用这个 js 文件。在使用 Bootstrap 框架中的下拉菜单组件时,其结构运用的正确与否非常的重要,如果结构和类名未使用正确,直接影响组件是否能正常运用。

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
        下拉菜单
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
        …
        <li role="presentation" class="divider"></li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    </ul>
</div>

2、下拉菜单(原理分析)

Bootstrap 框架中的下拉菜单组件,其下拉菜单项默认是隐藏的,因为 dropdown-menu 默认样式设置了 display:none,当用户点击父菜单项时,下拉菜单将会被显示出来,当用户再次点击时,下拉菜单将继续隐藏。现在我们来分析一下实现原理,非常简单,通过 js 技术手段,给父容器 div.dropdown 添加或移除类名 open 来控制下拉菜单显示或隐藏。也就是说,默认情况,div.dropdown 没有类名 open,当用户第一次点击时,div.dropdown 会添加类名 open;当用户再次点击时,div.dropdown 容器中的类名 open 又会被移除。

3、下拉菜单(下拉分隔线)

在 Bootstrap 框架中的下拉菜单还提供了下拉分隔线,假设下拉菜单有两个组,那么组与组之间可以通过添加一个空的 <li>,并且给这个 <li> 添加类名 divider 来实现添加下拉分隔线的功能。

4、下拉菜单(菜单标题)

通过添加 divider 可以将下拉菜单分组,为了让这个分组更明显,还可以给每个组添加一个头部(标题)。

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
        下拉菜单
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation" class="dropdown-header">第一部分菜单头部</li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
        …
        <li role="presentation" class="divider"></li>
        <li role="presentation" class="dropdown-header">第二部分菜单头部</li>
        …
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    </ul>
</div

5、下拉菜单(对齐方式)

Bootstrap 框架中下拉菜单默认是左对齐,如果你想让下拉菜单相对于父容器右对齐时,可以在 dropdown-menu 上添加一个 pull-right 或者 dropdown-menu-right 类名。同时一定要为 .dropdown 添加 float:left css 样式。

.dropdown{
  float: left;
}

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
      下拉菜单
      <span class="caret"></span>
  </button>
  <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1">
   …
  </ul>
</div>

6、下拉菜单(菜单项状态)

下拉菜单项的默认的状态(不用设置)有悬浮状态(:hover)和焦点状态(:focus),下拉菜单项除了上面两种状态,还有当前状态(.active)和禁用状态(.disabled)。

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
      下拉菜单
      <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    ….
    <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
  </ul>
</div>

7、按钮(按钮组)

按钮组和下拉菜单组件一样,需要依赖于 button.js 插件才能正常运行。不过我们同样可以直接只调用 bootstrap.js 文件。因为这个文件已集成了 button.js 插件功能。对于结构方面,非常的简单。使用一个名为 btn-group 的容器,把多个按钮放到这个容器中。除了可以使用 <button> 元素之外,还可以使用其他标签元素,比如 <a> 标签。唯一要保证的是:不管使用什么标签,.btn-group 容器里的标签元素需要带有类名 .btn

<div class="btn-group">
  <button type="button" class="btn btn-default">
     <span class="glyphicon glyphicon-step-backward"></span>
  </button>
   …
  <button type="button" class="btn btn-default">
     <span class="glyphicon glyphicon-step-forward"></span>
  </button>
</div>
glyphicon glyphicon-search
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
glyphicon glyphicon-download
glyphicon glyphicon-upload

8、按钮(按钮工具栏)

那么 Bootstrap 框架按钮工具栏也提供了这样的制作方法,你只需要将按钮组 btn-group 按组放在一个大的容器 btn-toolbar 中,实现原理主要是让容器的多个分组 btn-group 元素进行浮动,并且组与组之前保持 5px 的左外距。在介绍按钮一节中,我们知道按钮是通过 btn-lgbtn-smbtn-xs 三个类名来调整 paddingfont-sizeline-heightborder-radius 属性值来改变按钮大小。那么按钮组的大小,我们也可以通过类似的方法。

<div class="btn-toolbar">
  <div class="btn-group">
    …
  </div>
  <div class="btn-group">
    …
  </div>
  <div class="btn-group">
    …
  </div>
  <div class="btn-group">
    …
  </div>
</div>

9、按钮(嵌套分组)

很多时候,我们常把下拉菜单和普通的按钮组排列在一起,实现类似于导航菜单的效果。使用的时候,只需要把当初制作下拉菜单的 dropdown 的容器换成 btn-group,并且和普通的按钮放在同一级。 

<div class="btn-group">
    <button class="btnbtn-default" type="button">首页</button>
    <button class="btnbtn-default" type="button">产品展示</button>
    <button class="btnbtn-default" type="button">案例分析</button>
    <button class="btnbtn-default" type="button">联系我们</button>
    <div class="btn-group">
        <button class="btnbtn-default dropdown-toggle" data-toggle="dropdown" type="button">关于我们<span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><a href="##">公司简介</a></li>
            <li><a href="##">企业文化</a></li>
            <li><a href="##">组织结构</a></li>
            <li><a href="##">客服服务</a></li>
        </ul>
    </div>
</div>

10、按钮(垂直分组)

实际运用当中,总会碰到垂直显示的效果。在 Bootstrap 框架中也提供了这样的风格。我们只需要把水平分组的 btn-group 类名换成 btn-group-vertical 即可。

11、按钮(等分按钮)

等分按钮的效果在移动端上特别的实用。整个按钮组宽度是容器的 100%,而按钮组里面的每个按钮平分整个容器宽度。例如,如果你按钮组里面有五个按钮,那么每个按钮是 20% 的宽度,如果有四个按钮,那么每个按钮是 25% 宽度,以此类推。等分按钮也常被称为是自适应分组按钮,其实现方法也非常的简单,只需要在按钮组 btn-group 上追加一个 btn-group-justified 类名,实现原理非常简单,把 btn-group-justified 模拟成表格(display:table),而且把里面的按钮模拟成表格单元格(display:table-cell)。在制作等分按钮组时,请尽量使用 <a> 标签元素来制作按钮,因为使用 <button> 标签元素时,使用 display:table 在部分浏览器下支持并不友好。

<div class="btn-wrap">
    <div class="btn-group btn-group-justified">
        <a class="btnbtn-default" href="#">首页</a>
        <a class="btnbtn-default" href="#">产品展示</a>
        <a class="btnbtn-default" href="#">案例分析</a>
        <a class="btnbtn-default" href="#">联系我们</a>
    </div>
</div>

12、按钮下拉菜单

按钮下拉菜单其实就是普通的下拉菜单,只不过把 <a> 标签元素换成了 <button> 标签元素。唯一不同的是外部容器 div.dropdown 换成了 div.btn-group

<div class="btn-group">
      <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button>
      <ul class="dropdown-menu">
          <li><a href="##">按钮下拉菜单项</a></li>
          <li><a href="##">按钮下拉菜单项</a></li>
          <li><a href="##">按钮下拉菜单项</a></li>
          <li><a href="##">按钮下拉菜单项</a></li>
      </ul>
</div>

13、按钮的向下向上三角形

按钮的向下三角形,我们是通过在 <button> 标签中添加一个 <span> 标签元素,并且命名为 caret,有的时候我们的下拉菜单会向上弹起(接下来一个小节会介绍),这个时候我们的三角方向需要朝上显示,实现方法:需要在 .btn-group 类上追加 dropup 类名(这也是做向上弹起下拉菜单要用的类名)。

14、向上弹起的下拉菜单

有些菜单是需要向上弹出的,比如说你的菜单在页面最底部,而这个菜单正好有一个下拉菜单,为了让用户有更好的体验,不得不让下拉菜单向上弹出。在 Bootstrap 框架中专门为这种效果提代了一个类名 dropup。使用方法正如前面所示,只需要在 btn-group 上添加这个类名(当然,如果是普通向上弹出下拉菜单,你只需要在 dropdown 类名基础上追加 dropup 类名即可)。

<div class="btn-group dropup">
    <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">按钮下拉菜单<span class="caret"></span></button>
    <ul class="dropdown-menu">
         <li><a href="##">按钮下拉菜单项</a></li>
         <li><a href="##">按钮下拉菜单项</a></li>
         <li><a href="##">按钮下拉菜单项</a></li>
         <li><a href="##">按钮下拉菜单项</a></li>
    </ul>
</div>

15、导航(基础样式)

Bootstrap 框架中制作导航条主要通过 .nav 样式。默认的 .nav 样式不提供默认的导航样式,必须附加另外一个样式才会有效,比如 nav-tabsnav-pills 之类。

16、导航(标签形 tab 导航)

标签形导航,也称为选项卡导航。特别是在很多内容分块显示的时,使用这种选项卡来分组十分适合。标签形导航是通过 nav-tabs 样式来实现。在制作标签形导航时需要在原导航 nav 上追加此类名,其实上例的效果和我们平时看到的选项卡效果并不一致。一般情况之下,选项卡教会有一个当前选中项。其实在 Bootstrap 框架也相应提供了。假设我们想让 Home 项为当前选中项,只需要在其标签上添加类名 class="active" 即可。除了当前项之外,有的选项卡还带有禁用状态,实现这样的效果,只需要在标签项上添加 class="disabled" 即可。

<ul class="nav nav-tabs">
    <li class="active"><a href="##">Home</a></li>
    …
</ul>

17、导航(胶囊形 pills 导航)

胶囊形(pills)导航听起来有点别扭,因为其外形看起来有点像胶囊形状。但其更像我们平时看到的大众形导航。当前项高亮显示,并带有圆角效果。其实现方法和 nav-tabs 类似,同样的结构,只需要把类名 nav-tabs 换成 nav-pills 即可。

<ul class="nav nav-pills">
      <li class="active"><a href="##">Home</a></li>
      <li><a href="##">CSS3</a></li>
      <li><a href="##">Sass</a></li>
      <li><a href="##">jQuery</a></li>
      <li class="disabled"><a href="##">Responsive</a></li>
</ul>

18、导航(垂直堆叠的导航)

在实际运用当中,除了水平导航之外,还有垂直导航,就类似前面介绍的垂直排列按钮一样。制作垂直堆叠导航只需要在 nav-pills 的基础上添加一个 nav-stacked 类名即可。

<ul class="nav nav-pills nav-stacked">
     <li class="active"><a href="##">Home</a></li>
     <li><a href="##">CSS3</a></li>
     <li><a href="##">Sass</a></li>
     <li><a href="##">jQuery</a></li>
     <li class="disabled"><a href="##">Responsive</a></li>
</ul>

19、自适应导航(使用)

自适应导航指的是导航占据容器全部宽度,而且菜单项可以像表格的单元格一样自适应宽度。自适应导航和前面使用 btn-group-justified 制作的自适应按钮组是一样的。只不过在制作自适应导航时更换了另一个类名 nav-justified。当然他需要和 nav-tabs 或者 nav-pills 配合在一起使用。

<ul class="nav nav-tabs nav-justified">
     <li class="active"><a href="##">Home</a></li>
     <li><a href="##">CSS3</a></li>
     <li><a href="##">Sass</a></li>
     <li><a href="##">jQuery</a></li>
     <li><a href="##">Responsive</a></li>
</ul>

20、自适应导航(实现原理)

实现原理并不难,列表(<ul>)上设置宽度为 100%,然后每个菜单项(<li>)设置了 display:table-cell,让列表项以模拟表格单元格的形式显示。

21、导航加下拉菜单(二级导航)

前面介绍的都是使用 Bootstrap 框架制作一级导航,但很多时候,在 Web 页面中是离不开二级导航的效果。那么在 Bootstrap 框架中制作二级导航就更容易了。只需要将 li 当作父容器,使用类名 dropdown,同时在 li 中嵌套另一个列表 ul,使用前面介绍下拉菜单的方法就可以。

<ul class="nav nav-pills">
     <li class="active"><a href="##">首页</a></li>
     <li class="dropdown">
        <a href="##" class="dropdown-toggle" data-toggle="dropdown">教程<span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a href="##">CSS3</a></li>
            …
       </ul>
     </li>
     <li><a href="##">关于我们</a></li>
</ul>

22、面包屑式导航

面包屑(Breadcrumb)一般用于导航,主要是起的作用是告诉用户现在所处页面的位置(当前位置)。

<ol class="breadcrumb">
  <li><a href="#">首页</a></li>
  <li><a href="#">我的书</a></li>
  <li class="active">《图解CSS3》</li>
</ol>

附录

阅读原文:https://blog.mazey.net/1962.html

查看原文

赞 0 收藏 0 评论 0

Mazey 发布了文章 · 2月27日

Bootstrap 学习 - 网格系统

1、实现原理

网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分 12 份(也有平分成 24 份或 32 份,但 12 份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统。Bootstrap 框架中的网格系统就是将容器平分成 12 份。

<div class="row">
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
    <div class="col-md-1">.col-md-1</div>
</div>

2、工作原理

数据行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和内距(padding)。在行(.row)中可以添加列(.column),但列数之和不能超过平分的总列数,比如 12。具体内容应当放置在列容器(.column)之内,而且只有列(.column)才可以作为行容器(.row)的直接子元素。通过设置内距(padding)从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距(margin)来抵消内距(padding)的影响。

简单对图解释一下:最外边框,带有一大片白色区域,就是相当于浏览器的可视区域。在 Bootstrap 框架的网格系统中带有响应式效果,其带有四种类型的浏览器(超小屏,小屏,中屏和大屏),其断点(像素的分界点)是 768px992px1220px。第二个边框(1)相当于容器(.container)。针对不同的浏览器分辨率,其宽度也不一样:自动、750px970px1170px。2 号横条阐述的是,将容器的行(.row)平分了 12 等份,也就是列。每个列都有一个 padding-left: 15px(图中粉红色部分)和一个 padding-right: 15px(图中紫色部分)。这样也导致了第一个列的 padding-left 和最后一列的 padding-right 占据了总宽度的 30px,从而致使页面不美观,当然,如果你需要留有一定的间距,这个做法是不错的。3 号横条就是行容器(.row),其定义了 margin-leftmargin-right 值为 -15px,用来抵消第一个列的左内距和最后一列的右内距。将行与列给合在一起就能看到横条 4 的效果。也就是我们期望看到的效果,第一列和最后一列与容器(.container)之间没有间距。横条5只是想向大家展示,你可以根据需要,任意组合列与列,只是他们的组合数之和不要超过总列数。

官方解释:通过为 “列(.column)” 设置 padding 属性,从而创建列与列之间的间隔(gutter)。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding,也就间接为 “行(.row)” 所包含的 “列(.column)” 抵消掉了 padding

3、基本用法

网格系统用来布局,其实就是列的组合。Bootstrap 框架的网格系统中有四种基本的用法。

列组合简单理解就是更改数字来合并列(原则:列总和数不能超 12),有点类似于表格的 colspan 属性。

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-8">.col-md-8</div>
  </div>
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3">.col-md-3</div>
    <div class="col-md-6">.col-md-6</div>
    <div class="col-md-3">.col-md-3</div>
 </div>
</div>

实现列组合方式非常简单,只涉及两个 CSS 两个特性:浮动与宽度百分比。

4、列偏移

有的时候,我们不希望相邻的两个列紧靠在一起,但又不想使用 margin 或者其他的技术手段来。这个时候就可以使用列偏移(offset)功能来实现。使用列偏移也非常简单,只需要在列元素上添加类名 col-md-offset-*(其中星号代表要偏移的列组合数),那么具有这个类名的列就会向右偏移。例如,你在列元素上添加 col-md-offset-4,表示该列向右移动 4 个列的宽度。实现原理非常简单,就是利用十二分之一(1/12)的 margin-left。然后有多少个 offset,就有多少个 margin-left。不过有一个细节需要注意,使用 col-md-offset-* 对列进行向右偏移时,要保证列与偏移列的总数不超过 12,不然会致列断行显示。

<div class="container">
    <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-2 col-md-offset-4">列向右移动四列的间距</div>
        <div class="col-md-2">.col-md-3</div>
    </div>
    <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4 col-md-offset-4">列向右移动四列的间距</div>
    </div>
</div>

试试制作一个网格:

1)一个有 4 列网格。

2)第一列网格占 2 格宽不偏移。

3)第二列、第三列网格占 2 格宽,并且偏移 1 个网格。

4)第四列网格占 3 格宽,并且偏移 1 个网格。

<div class="row">
    <div class="col-md-2">.col-md-2</div>
    <div class="col-md-2 col-md-offset-1">col-md-2 col-md-offset-1</div>
    <div class="col-md-2 col-md-offset-1">col-md-2 col-md-offset-1</div>
    <div class="col-md-3 col-md-offset-1">col-md-3 col-md-offset-1</div>
</div>

5、列排序

列排序其实就是改变列的方向,就是改变左右浮动,并且设置浮动的距离。在 Bootstrap 框架的网格系统中是通过添加类名 col-md-push-*col-md-pull-* (其中星号代表移动的列组合数)。

6、列的嵌套

Bootstrap 框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行(.row)容器,然后在这个行容器中插入列(像前面介绍的一样使用列)。但在列容器中的行容器(.row),宽度为 100% 时,就是当前外部列的宽度。嵌套的列总数也需要遵循不超过 12 列。不然会造成末位列换行显示。

附录

阅读原文:https://blog.mazey.net/1959.html

查看原文

赞 0 收藏 0 评论 0

Mazey 发布了文章 · 2月26日

解决 IE 模式下背景图片不显示

初衷是想给这个提交按钮 <input type="submit" value=" /> 加上背景图片,用了以下 CSS 样式:

.subtn input {
    background-attachment: scroll;
    background-image: url(images/btn.gif);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    height: 20px;
    width: 60px;
    border-style: none;
}

但是不知道是怎么回事,在 Internet Explorer 6、7、8 中皆无法显示该背景图片按钮,依然是默认的按钮形式,而在 Firefox 和 Chrome 中皆可以正常显示,可以排除图片链接的有效性,尝试修改了很多次都没有成功。后来使用 background 简写属性,在一个声明中设置所有的背景属性,在 Internet Explorer 居然可以正常显示了:

.subtn input {
    background: url(images/btn.gif) no-repeat scroll 0px 0px;
    height: 20px;
    width: 60px;
    border-style: none;
}

刚开始我在想是不是我的网页代码存在特殊性,其他代码可能影响了该样式,但是后来我单独新建了一个 .html,里面只写了个 form,一个输入框,一个提交框,在使用上面的 background 属性分开写的 CSS 属性后,结果问题依旧,可以说明这是一个普遍性的问题!CSS 文档中有提到:

通常建议使用简写属性,而不是分别使用单个属性,因为简写属性在较老的浏览器中能够得到更好的支持,而且需要键入的字母也更少。

但是我想现在的问题已经不是浏览器版本老的问题了,而是 Internet Explorer 的问题了。

浏览器能正常显示的怪现象。最后我在网上找到了这段话:IE 图片格式问题会导致 IE 无法显示图片。对于 IE 来说,直接改后缀名会导致图片不能显示。如果后缀名跟文件自身的格式不相符合,也是一样会无法显示。Firefox 这些浏览器不会有影响,他们可以自己识别。真相大白了,在 CSS 里换了一张图片,没问题了,IE 和 Firefox 都能显示了。没想到 IE 这么脆弱,说罢工就罢工。

链接图片的反括号和定位值一定要加个空格,如:url(images/bg_media_lihover.gif) 5px 6px no-repeat #00a1de

为了保证背景图片能够正常显示,建议使用绝对路径,而不是相对于 CSS 的路径。还是莎士比亚说得好:“There are a thousand BUG in a thousand Internet Explorer”。

background: url(../images/in_bon_02.png) no-repeat scroll 0 0 rgba(0, 0, 0, 0);

IE 不显示原来是 rgba(0, 0, 0, 0) 的原因。

附录

阅读原文:https://blog.mazey.net/1955.html

查看原文

赞 0 收藏 0 评论 0

Mazey 发布了文章 · 2月26日

Vue 学习 - 基础语法

Vue

Vue.js 的指令是以 v- 开头的,它们作用于 HTML 元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为,我们可以将指令看作特殊的 HTML 特性(attribute)。

v-if 指令

v-if 是条件渲染指令,它根据表达式的真假来删除和插入元素,它的基本语法如下:

v-if="expression"

expression 是一个返回 bool 值的表达式,表达式可以是一个 bool 属性,也可以是一个返回 bool 的运算式。例如:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <h1>Hello, Vue.js!</h1>
            <h1 v-if="yes">Yes!</h1>
            <h1 v-if="no">No!</h1>
            <h1 v-if="age >= 25">Age: {{ age }}</h1>
            <h1 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
        </div>
    </body>
    <script data-original="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                yes: true,
                no: false,
                age: 28,
                name: 'keepfool'
            }
        })
    </script>
</html>

v-show 指令

v-show 也是条件渲染指令,和 v-if 指令不同的是,使用 v-show 指令的元素始终会被渲染到 HTML,它只是简单地为元素设置 CSS 的 style 属性(display: none;)。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <h1>Hello, Vue.js!</h1>
            <h1 v-show="yes">Yes!</h1>
            <h1 v-show="no">No!</h1>
            <h1 v-show="age >= 25">Age: {{ age }}</h1>
            <h1 v-show="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
        </div>
    </body>
    <script data-original="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                yes: true,
                no: false,
                age: 28,
                name: 'keepfool'
            }
        })
    </script>
</html>

v-else 指令

可以用 v-else 指令为 v-ifv-show 添加一个“else 块”。v-else 元素必须立即跟在 v-ifv-show 元素的后面——否则它不能被识别。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <h1 v-if="age >= 25">Age: {{ age }}</h1>
            <h1 v-else>Name: {{ name }}</h1>
            <h1>---------------------分割线---------------------</h1>
            <h1 v-show="name.indexOf('keep') >= 0">Name: {{ name }}</h1>
            <h1 v-else>Sex: {{ sex }}</h1>
        </div>
    </body>
    <script data-original="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                age: 28,
                name: 'keepfool',
                sex: 'Male'
            }
        })
    </script>
</html>

v-else 元素是否渲染在 HTML 中,取决于前面使用的是 v-if 还是 v-show 指令。这段代码中 v-iftrue,后面的 v-else 不会渲染到 HTML;v-showtrue,但是后面的 v-else 仍然渲染到 HTML 了。

v-for 指令

v-for 指令基于一个数组渲染一个列表,它和 JavaScript 的遍历语法相似:

v-for="item in items"

items 是一个数组,item 是当前被遍历的数组元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="styles/demo.css" />
    </head>
    <body>
        <div id="app">
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Age</th>
                        <th>Sex</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="person in people">
                        <td>{{ person.name  }}</td>
                        <td>{{ person.age  }}</td>
                        <td>{{ person.sex  }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
    <script data-original="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                people: [{
                    name: 'Jack',
                    age: 30,
                    sex: 'Male'
                }, {
                    name: 'Bill',
                    age: 26,
                    sex: 'Male'
                }, {
                    name: 'Tracy',
                    age: 22,
                    sex: 'Female'
                }, {
                    name: 'Chris',
                    age: 36,
                    sex: 'Male'
                }]
            }
        })
    </script>
</html>

v-bind 指令

v-bind 指令可以在其名称后面带一个参数,中间放一个冒号隔开,这个参数通常是 HTML 元素的特性(attribute),例如:v-bind:class

v-bind:argument="expression"

下面这段代码构建了一个简单的分页条,v-bind 指令作用于元素的 class 特性上。

这个指令包含一个表达式,表达式的含义是:高亮当前页。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="styles/demo.css" />
    </head>
    <body>
        <div id="app">
            <ul class="pagination">
                <li v-for="n in pageCount">
                    <a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n + 1 }}</a>
                </li>
            </ul>
        </div>
    </body>
    <script data-original="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                activeNumber: 1,
                pageCount: 10
            }
        })
    </script>
</html>

注意 v-for="n in pageCount" 这行代码,pageCount 是一个整数,遍历时 n 从 0 开始,然后遍历到 pageCount – 1 结束。

v-on 指令

v-on 指令用于给监听 DOM 事件,它的用语法和 v-bind 是类似的,例如监听 <a> 元素的点击事件:

<a v-on:click="doSomething">

有两种形式调用方法:绑定一个方法(让事件指向方法的引用),或者使用内联语句。

Greet 按钮将它的单击事件直接绑定到 greet() 方法,而Hi按钮则是调用 say() 方法。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <p><input type="text" v-model="message"></p>
            <p>
                <!--click事件直接绑定一个方法-->
                <button v-on:click="greet">Greet</button>
            </p>
            <p>
                <!--click事件使用内联语句-->
                <button v-on:click="say('Hi')">Hi</button>
            </p>
        </div>
    </body>
    <script data-original="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'Hello, Vue.js!'
            },
            // 在 `methods` 对象中定义方法
            methods: {
                greet: function() {
                    // // 方法内 `this` 指向 vm
                    alert(this.message)
                },
                say: function(msg) {
                    alert(msg)
                }
            }
        })
    </script>
</html>

v-bindv-on 的缩写

Vue.js 为最常用的两个指令 v-bindv-on 提供了缩写方式。v-bind 指令可以缩写为一个冒号,v-on 指令可以缩写为 @ 符号。

<!--完整语法-->
<a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n + 1 }}</a>
<!--缩写语法-->
<a href="javascripit:void(0)" :class="activeNumber=== n + 1 ? 'active' : ''">{{ n + 1 }}</a>
<!--完整语法-->
<button v-on:click="greet">Greet</button>
<!--缩写语法-->
<button @click="greet">Greet</button>

综合示例

现在我们已经介绍了一些 Vue.js 的基础知识了,结合以上知识我们可以来做个小 Demo。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="styles/demo.css" />
    </head>
    <body>
        <div id="app">
            <fieldset>
                <legend>
                    Create New Person
                </legend>
                <div class="form-group">
                    <label>Name:</label>
                    <input type="text" v-model="newPerson.name"/>
                </div>
                <div class="form-group">
                    <label>Age:</label>
                    <input type="text" v-model="newPerson.age"/>
                </div>
                <div class="form-group">
                    <label>Sex:</label>
                    <select v-model="newPerson.sex">
                    <option value="Male">Male</option>
                    <option value="Female">Female</option>
                </select>
                </div>
                <div class="form-group">
                    <label></label>
                    <button @click="createPerson">Create</button>
                </div>
        </fieldset>
        <table>
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>Sex</th>
                    <th>Delete</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="person in people">
                    <td>{{ person.name }}</td>
                    <td>{{ person.age }}</td>
                    <td>{{ person.sex }}</td>
                    <td :class="'text-center'"><button @click="deletePerson($index)">Delete</button></td>
                </tr>
            </tbody>
        </table>
        </div>
    </body>
    <script data-original="js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                newPerson: {
                    name: '',
                    age: 0,
                    sex: 'Male'
                },
                people: [{
                    name: 'Jack',
                    age: 30,
                    sex: 'Male'
                }, {
                    name: 'Bill',
                    age: 26,
                    sex: 'Male'
                }, {
                    name: 'Tracy',
                    age: 22,
                    sex: 'Female'
                }, {
                    name: 'Chris',
                    age: 36,
                    sex: 'Male'
                }]
            },
            methods:{
                createPerson: function(){
                    this.people.push(this.newPerson);
                    // 添加完newPerson对象后,重置newPerson对象
                    this.newPerson = {name: '', age: 0, sex: 'Male'}
                },
                deletePerson: function(index){
                    // 删一个数组元素
                    this.people.splice(index,1);
                }
            }
        })
    </script>
</html>

附录

阅读原文:https://blog.mazey.net/1953.html

查看原文

赞 0 收藏 0 评论 0

Mazey 发布了文章 · 2月24日

SQLServer 存储过程实现单条件分页

SQLServer - 代码:

SQLServer Procedure Pagination_basic:
ALTER PROCEDURE [qiancheng].[Pagination_basic] (
@Table_name VARCHAR (255),
--name of table
@Rows_target VARCHAR (1000) = '*',
--search rows
@Rows_condition VARCHAR (1000) = '',
--the condition to find target (no where)
@Rows_order VARCHAR (255) = '',
--the rows to rank
@Order_type INT = 0,
-- *Q*C* 0 normal 1 down
@PageSizes INT = 10,
--the size of each page
@PageIndex INT = 1,
--current page
@ShowPages INT,
--whether show the pages *Q*C* 1-yes 0-no
@ShowRecords INT,
--whether show the record *Q*C* 1-yes 0-no
@Records_total INT OUTPUT,
--returned total records
@Pages_total INT OUTPUT --returned total pages
) AS
DECLARE @MainSQL_QC nvarchar (2000) --Main SQL sentence
DECLARE @Var_QC VARCHAR (100) --Temporary variate
DECLARE @Order_QC VARCHAR (400) --the sort to rank
SET @Records_total = 0
SET @Pages_total = 0
IF @ShowRecords = 1
OR @ShowPages = 1
BEGIN

IF @Rows_condition != ''
SET @MainSQL_QC = 'select @Records_total = count(1) from [' + @Table_name + '] where ' +@Rows_condition
ELSE

SET @MainSQL_QC = 'select @Records_total = count(1) from [' + @Table_name + ']' EXEC sp_executesql @MainSQL_QC,
 N'@Records_total int out' ,@Records_total OUTPUT
END
IF @ShowPages = 1
BEGIN

IF @Records_total <= @PageSizes
SET @Pages_total = 1
ELSE

BEGIN

SET @Pages_total = @Records_total /@PageSizes
IF (@Records_total %@PageSizes) > 0
SET @Pages_total = @Pages_total + 1
END
END
IF @Order_type = 1
BEGIN

SET @Var_QC = '<(select min'
SET @Order_QC = ' order by [' + @Rows_order + '] desc'
END
ELSE

BEGIN

SET @Var_QC = '>(select max'
SET @Order_QC = ' order by [' + @Rows_order + '] asc'
END
IF @PageIndex = 1
BEGIN

IF @Rows_condition != ''
SET @MainSQL_QC = 'select top ' + str(@PageSizes) + ' ' +@Rows_target + ' from [' + @Table_name + '] where ' + @Rows_condition + ' ' + @Order_QC
ELSE

SET @MainSQL_QC = 'select top ' + str(@PageSizes) + ' ' +@Rows_target + ' from [' + @Table_name + '] ' + @Order_QC
END
ELSE

BEGIN

IF @Rows_condition != ''
SET @MainSQL_QC = 'select top ' + str(@PageSizes) + ' ' +@Rows_target + ' from [' + @Table_name + '] where [' + @Rows_order + ']' + @Var_QC + '([' + @Rows_order + ']) from (select top ' + str((@PageIndex - 1) *@PageSizes) + ' [' + @Rows_order + '] from [' + @Table_name + '] where ' + @Rows_condition + ' ' + @Order_QC + ') as Tmep_QC) and ' + @Rows_condition + ' ' + @Order_QC
ELSE

SET @MainSQL_QC = 'select top ' + str(@PageSizes) + ' ' +@Rows_target + ' from [' + @Table_name + '] where [' + @Rows_order + ']' + @Var_QC + '([' + @Rows_order + ']) from (select top ' + str((@PageIndex - 1) *@PageSizes) + ' [' + @Rows_order + '] from [' + @Table_name + ']' + @Order_QC + ') as Tmep_QC)' + @Order_QC
END EXEC (@MainSQL_QC)

调用:execute pagination_basic 'UserDetail','*','','id','1','5','1','1','1','',''

主要是末尾的语句,拆分下来便是这样:

select top 每页数 列名 from [表名] where [排序字段名] < --1 倒序输出若列 小于之前页数的最小值

(select min ( [排序字段名] ) from --2 获得一个指定列名中的最小值并输出

(select top (当前页-1) * 每页数 [排序字段名] from [表名] where [条件] [排序类型]) --3 选择之前页数总数据倒序输出

as Tmep_QC) --4 建立一个名为 Tmep_QC 的临时表 --2 获得一个指定列名中的最小值并输出

and [条件] [排序类型] --1 倒序输出若列 小于之前页数的最小值

附录:

阅读原文:https://blog.mazey.net/1938.html

查看原文

赞 0 收藏 0 评论 0

Mazey 发布了文章 · 2月23日

JavaScript 邮箱验证 - 正则验证

一、RegExp

1.1 创建 RegExp 对象

new RegExp("必选,正则表达式","可选,匹配模式g,i,m")

1.2 RegExp 对象的方法

  • test:检索字符串中的指定值,返回 TrueFalse
  • exec:检索字符串中的指定值,返回找到的值,没有则 null
  • complie:用于改变正则表达式,或增删匹配模式。

1.2.1 test()

var r1 = new RegExp('world');
console.log(r1.test('Hello, world!')); //true
console.log(r1.test('Hello, World!')); //false
var r2 = new RegExp('world', 'i'); //大小写不敏感
console.log(r2.test('Hello, World!')); //true
var r3 = new RegExp(/world/i); //简写
console.log(r3.test('Hello, World!')); //true

1.2.2 exec()

var r1 = new RegExp('world');
console.log(r1.exec('Hello, world!')); //['world']
console.log(r1.exec('Hello, World!')); //null
var r2 = new RegExp('world', 'i'); //大小写不敏感
console.log(r2.exec('Hello, World!')); //['world']
var r3 = new RegExp(/world/i); //简写
console.log(r3.exec('Hello, World!')); //['world']
var r4 = new RegExp('o');
console.log(r4.exec('Hello, World!')); //['o']
var r5 = new RegExp('o', 'gi');
console.log(r5.exec('Hello, WOrld!')); //['o']
console.log(r5.lastIndex); //5 匹配文本的第一个字符的位置,o为4,下一个位置为5
console.log(r5.exec('Hello, WOrld!')); //['O'] 匹配完第一个o后调用继续匹配
console.log(r5.lastIndex); //9
console.log(r5.exec('Hello, WOrld!')); //null 匹配不到返回null
console.log(r5.lastIndex); //0 lastIndex重置为0

1.2.3 complie()

var r1 = new RegExp('world');
console.log(r1.exec('Hello, world!')); //['world']
r1.compile('o');
console.log(r1.exec('Hello, World!')); //['o']
r1.compile('m');
console.log(r1.exec('Hello, World!')); //null
var r2 = new RegExp('world');
console.log(r2.test('Hello, world!')); //true
r2.compile('mazey');
console.log(r2.test('Hello, world!')); //false

二、正则表达式

  • ^$:表示匹配值的开始和结尾。
  • +1+,一个或更多。
  • *0 / +,零个或更多。
  • ?0 / 1,零个或一个。
  • {1,2}:1 <= length <= 2,长度。
  • ():表示一个表达式的组。
  • []:匹配的字符范围,我理解为一个块,很多块放在一个组 () 里面。

三、示例

<form action="">
    输入:
    <input type="text" name="mazey" id="mazey" placeholder="请输入邮箱">
    <input type="button" value="验证" onclick="check();">
</form>

<script>
function check(){
    var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正则表达式
    var obj = document.getElementById("mazey"); //要验证的对象
    if(obj.value === ""){ //输入不能为空
        alert("输入不能为空!");
        return false;
    }else if(!reg.test(obj.value)){ //正则验证不通过,格式不对
        alert("验证不通过!");
        return false;
    }else{
        alert("通过!");
        return true;
    }
}
</script>

附录

阅读原文:https://blog.mazey.net/589.html

查看原文

赞 0 收藏 0 评论 0

Mazey 发布了文章 · 2月22日

JS 获取网站 StatusCode,若存在写入文件

JS 获取网站状态码,若网站存在,写入 TXT 文件,适用于 IE。

<script>
//写文件     
function writeFile(filename,filecontent) {     
    var fso, f, s ;     
    fso = new ActiveXObject("Scripting.FileSystemObject");        
    f = fso.OpenTextFile(filename,8,true);     
    f.WriteLine(filecontent);       
    f.Close();          
}

//判断网站是否能打开
function http_go(URL) {
    var http_c= new ActiveXObject("microsoft.xmlhttp");
    http_c.Open("GET",URL,false);
    try {
        http_c.Send();
    }
    catch(e) {}
    finally {
        var result = http_c.responseText;
        if(result) {
            if(http_c.Status==200) {
                return(true);
            } else {
                return(false);
            }
        } else {
            return(false);
        }
    }
}

var q = ['bj','sh','sz','gz','tj','hz','nj'];
var c = ['b','c','d','f','g','h','j','k','l','m','n','p','q','r','s','t','v','w','x','y','z'];
for(var x=0;x<q.length;x++) {
    for(var i=0;i<c.length;i++)  {
        for(var j=0;j<c.length;j++) {
            for(var k=0;k<c.length;k++) {  
                var domain_m =q[x]+c[i]+c[j]+c[k]+'.com';
                var domain_m1 ='http://'+domain_m;
                var domain_m2 ='http://www'+domain_m;
                if(http_go(domain_m1)||http_go(domain_m2)){
                    writeFile('D:/WORK/domain/domain_qc.txt',domain_m);
                }
            }
        }
    }
}
</script>

当浏览者访问一个网页时,浏览者的浏览器会向网页所在服务器发出请求。 当浏览器接收并显示网页前,此网页所在的服务器会返回一个包含 HTTP 状态码的信息头(server header)用以响应浏览器的请求。 HTTP 状态码的英文为 HTTP Status Code。

下面是常见的HTTP状态码:

  • 200 - 请求成功
  • 301 - 资源(网页等)被永久转移到其它URL
  • 404 - 请求的资源(网页等)不存在
  • 500 - 内部服务器错误

附录:

阅读原文:https://blog.mazey.net/1931.html

查看原文

赞 0 收藏 0 评论 0

Mazey 发布了文章 · 2月21日

通过 JS 将 BSAE64 生成图片并下载

HTML:

<div style="display:block;margin:0 auto;width:638px;height:795px;">
    <div id="render" >CONTENT</div>
</div>

<div id="template" style="margin:10px 0 0 385px;">
    <input type="button" onclick="qc0926()" value="下载图片" />
</div>

JS:

<script type="text/javascript" data-original="html2canvas.js"></script>
<script type="text/javascript">
    var canvas,render,html,imgsrcgo;
    function renderHTMLAndSave() {
        var render= document.getElementById('render');
        html2canvas(render).then(function (canvas) {
            var imgdata-original= canvas.toDataURL();imgsrcgo=imgsrc;
        });
    }
    window.onload=renderHTMLAndSave();
    var imgsrc;
    var imgData;
    var type='png';
    var _fixType = function(type) {
        type = type.toLowerCase().replace(/jpg/i, 'jpeg');
        var r = type.match(/png|jpeg|bmp|gif/)[0];
        return 'image/' + r;
    };
    function saveFile(data, filename){
        var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
        save_link.href = data;
        save_link.download = filename;
        var event = document.createEvent('MouseEvents');
        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        save_link.dispatchEvent(event);
    };
    function qc0926(){
        imgData=imgsrcgo;
        imgData = imgData.replace(_fixType(type),'image/octet-stream'); // 加工image data,替换mime type
        var filename = 'zgsjdomaincertification' + '_name' + '.' + type; // 下载后的文件名
        window.load=saveFile(imgData,filename); //下载域名证书
    };
</script>

html2canvas.js - 代码:

/*
  html2canvas 0.5.0-alpha2 <http://html2canvas.hertzen.com>
  Copyright (c) 2015 Niklas von Hertzen

  Released under MIT License
*/
// 篇幅太长,无法保存请查看原文

附录:

Base64:Base64 是网络上最常见的用于传输 8Bit 字节码的编码方式之一,Base64 就是一种基于 64 个可打印字符来表示二进制数据的方法。Base64 编码是从二进制到字符的过程,可用于在 HTTP 环境下传递较长的标识信息。采用 Base64 编码具有不可读性,需要解码后才能阅读。

Canvas:Canvas API(画布)是在 HTML5 中新增的标签用于在网页实时生成图像,并且可以操作图像内容,基本上它是一个可以用 JavaScript 操作的位图(bitmap)。Canvas 对象表示一个 HTML 画布元素 - <canvas>。它没有自己的行为,但是定义了一个 API 支持脚本化客户端绘图操作。

阅读原文:https://blog.mazey.net/1926.html

查看原文

赞 0 收藏 0 评论 0

Mazey 发布了文章 · 2月20日

Bootstrap 学习 - 排版 - 表单

1、标题

<h1> ~ <h6>,所有标题的行高都是 1.1(也就是 font-size 的 1.1 倍)。

2、副标题

<small>,行高都是 1,灰色(#999)。

<h1>
    主标题
    <small>副标题</small>
</h1>

3、Body 样式

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
    background-color: #fff;
}

4、<p>,段落样式

p { margin: 0 0 10px; }

5、强调样式 .lend

.lead {
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 200;
    line-height: 1.4;
}

6、粗体 <b><strong>

b, strong {
    font-weight: bold; /*文本加粗*/
}

7、斜体 <i><em>

<em><strong> 一般是展现给爬虫看的(偏重语义),<i><b> 是展现给用户的(偏重视觉效果)。

8、字体颜色

.text-muted:提示,使用浅灰色(#999
.text-primary:主要,使用蓝色(#428bca
.text-success:成功,使用浅绿色(#3c763d
.text-info:通知信息,使用浅蓝色(#31708f
.text-warning:警告,使用黄色(#8a6d3b
.text-danger:危险,使用褐色(#a94442

9、文字对齐方式

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

.text-justify {
    text-align: justify;
}

10、列表去点 .list-unstyled

.list-unstyled {
    padding-left: 0;
    list-style: none;
}

11、水平导航 .list-inline

.list-inline {
    padding-left: 0;
    margin-left: -5px;
    list-style: none;
}

.list-inline > li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
}
<ul class="list-inline">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

12、定义列表

<dl>
    <dt>主题一</dt>
    <dd>内容一</dd>
    <dt>主题二</dt>
    <dd>内容二</dd>
</dl>

水平定义列表 .dl-horizontal

13、输入代码样式

(1)<code>:一般是针对于单个单词或单个句子的代码
(2)<pre>:一般是针对于多行代码(也就是成块的代码)
(3)<kbd>:一般是表示用户要通过键盘输入的内容

14、表格样式

.table:基础表格 - 不可缺少
.table-striped:斑马线表格
.table-bordered:带边框的表格
.table-hover:鼠标悬停高亮的表格 - 可以与其他表格样式叠加使用
.table-condensed:紧凑型表格
.table-responsive:响应式表格 - 小屏添加滚动条

表格背景颜色

15、基础表单

role 是一个 html5 的属性,role="form" 告诉辅助设备(如屏幕阅读器)这个元素所扮演的角色是个表单。

16、水平表单

类名 .form-horizontal

17、内联表单

<div class="form-group">
  <label >QQQ</label>
  <input type="">
</div>

18、输入框 input

输入类型 - email

email 输入类型用于应该包含电邮地址的输入字段。

当提交表单时,会自动地对 email 字段的值进行验证。

19、复选框 checkbox 和单选择按钮 radio

.checkbox

<div class="checkbox">
    <label>
      <input type="checkbox" value="">
      QQQ
    </label>
</div>

.radio 

<div class="radio">
    <label>
      <input type="radio" value="love" checked>
      CCC
    </label>
</div>

水平显示

<div class="form-group">
    <label class="radio-inline">
        <input type="radio" value="mazey" name="mazey">
        男性
    </label>
    <label class="radio-inline">
        <input type="radio" value="mazey" name="mazey">
        中性
    </label>
    <label class="radio-inline">
        <input type="radio" value="mazey" name="mazey">
        女性
    </label>
</div>
  1. 如果 checkbox 需要水平排列,只需要在 label 标签上添加类名 checkbox-inline
  2. 如果 radio 需要水平排列,只需要在 label 标签上添加类名radio-inline

20、表单控件大小 - 仅改变高度

  1. input-sm:让控件比正常大小更小
  2. input-lg:让控件比正常大小更大

21、表单验证状态

  1. .has-warning:警告状态(黄色)
  2. .has-error:错误状态(红色)
  3. .has-success:成功状态(绿色)

显示勾号叉号要加 .has-feedback

<div class="form-group has-success has-feedback">
      <label class="control-label" for="qqq">E-Mail地址</label>
      <input type="text" class="form-control" id="qqq" placeholder="qqq">
      <span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>

表单提示文字 .help-block

<div class="form-group has-error has-feedback">    
    <label class="control-label" for="inputError1">错误状态</label>
    <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
    <span class="help-block">你输入的信息是错误的</span>
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>

22、按钮样式

.btn.btn-default 可以用在 aspandiv 等标签中。

<button class="btn" type="button">基础按钮.btn</button>
<button class="btn btn-default" type="button">默认按钮.btn-default</button>
<button class="btn btn-primary" type="button">主要按钮.btn-primary</button>
<button class="btn btn-success" type="button">成功按钮.btn-success</button>
<button class="btn btn-info" type="button">信息按钮.btn-info</button>
<button class="btn btn-warning" type="button">警告按钮.btn-warning</button>
<button class="btn btn-danger" type="button">危险按钮.btn-danger</button>
<button class="btn btn-link" type="button">链接按钮.btn-link</button>

HTML <button> 标签的 type 属性值描述:

  • submit 该按钮是提交按钮(除了 Internet Explorer,该值是其他浏览器的默认值)。
  • button 该按钮是可点击的按钮(Internet Explorer 的默认值)。
  • reset 该按钮是重置按钮(清除表单数据)

23、按钮大小

<button class="btn btn-primary btn-lg" type="button">大型按钮.btn-lg</button>
<button class="btn btn-primary" type="button">正常按钮</button>
<button class="btn btn-primary btn-sm" type="button">小型按钮.btn-sm</button>
<button class="btn btn-primary btn-xs" type="button">超小型按钮.btn-xs</button>

24、块状按钮

.btn-block 使按钮充满整个容器(父级元素)。

25、按钮状态

当按钮处理正在点击状态(也就是鼠标按下的未松开的状态),对于 <button> 元素是通过 :active 伪类实现,而对于 <a> 这样的标签元素则是通过添加类名 .active 来实现。

禁用状态 .disabled

disabled="disabled" 用类禁用可能有禁用样式,但没有禁用效果,依然可以点。

26、图像

  1. img-responsive:响应式图片,主要针对于响应式设计
  2. img-rounded:圆角图片
  3. img-circle:圆形图片
  4. img-thumbnail:缩略图片

由于样式没有对图片做大小上的样式限制,所以在实际使用的时候,需要通过其他的方式来处理图片大小。比如说控制图片容器大小。(注意不可以通过 CSS 样式直接修改 img 图片的大小,这样操作就不响应了)对于圆角图片和圆形图片效果,因为是使用了 CSS3 的圆角样式来实现的,所以注意对于 IE8 以及其以下版本不支持,是没有圆角效果的。

27、图标

这里说的图标就是 Web 制作中常看到的小 icon 图标,可以说这些小 icon 图标是一个优秀 Web 中不可缺少的一部分,起到画龙点睛的效果。在 Bootstrap 框架中也为大家提供了近 200 个不同的 icon 图片,而这些图标都是使用 CSS3 的 @font-face 属性配合字体来实现的 icon 效果。

<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-asterisk"></span>
<span class="glyphicon glyphicon-plus"></span>
<span class="glyphicon glyphicon-cloud"></span>

还有 Font Awesome 字体。

定制图标网站:https://www.runoob.com/try/demo_source/bootstrap-glyph-customization.htm

附录:

阅读原文:https://blog.mazey.net/1923.html

查看原文

赞 0 收藏 0 评论 0

Mazey 发布了文章 · 2月19日

Bootstrap 学习 - 环境安装

1、<meta http-equiv="X-UA-Compatible" content="IE=edge">

让 IE 运行最新的渲染模式。

2、<meta name="viewport" content="width=device-width, initial-scale=1">

初始化移动浏览显示。

  • width=device-width:让宽度等于设备宽度。
  • initial-scale=1:设置初始缩放比例为 1,即不缩放。

3、

<!--[if lt IE 9]>
      <script data-original="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script data-original="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

(1)<script data-original="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>

IE 版本低于 IE9,使浏览器支持 HTML5 标签。

(2)<script data-original="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

对 CSS3 支持。

4、<script data-original="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>

引入 jQuery,Bootstrap 不自带 jQuery。

5、<link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">

引入基础 CSS 样式。

6、<script data-original="/bootstrap/js/bootstrap.min.js"></script>

引入基础 JS 插件。

附录:

阅读原文:https://blog.mazey.net/1919.html

查看原文

赞 0 收藏 0 评论 0

认证与成就

  • 获得 0 次点赞
  • 获得 1 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 1 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2018-11-27
个人主页被 254 人浏览