pre_eminent
pre_eminent

Bootstrap_文档_03_表单_按钮_图片_辅助类

Bootstrap_文档_03_表单_按钮_图片_辅助类_第1张图片


表单

基本实例

单独的表单控件会被自动赋予一些全局样式。

所有设置了 .form-control 类的 、


多选和单选框

多选框（checkbox）用于选择列表中的一个或多个选项，

而单选框（radio）用于从多个选项中只选择一个。

Disabled checkboxes and radios are supported, 

but to provide a "not-allowed" cursor on hover of the parent , 

you'll need to add the .disabled class to the parent .radio, .radio-inline, .checkbox, or .checkbox-inline.


默认外观（堆叠在一起）

效果如下:

Bootstrap_文档_03_表单_按钮_图片_辅助类_第4张图片

代码如下:

 class="checkbox">
  
     type="checkbox" value="">
    Option one is this and that—be sure to include why it's great
class="checkbox disabled"> type="checkbox" value="" disabled> Option two is disabled
class="radio"> type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> Option one is this and that—be sure to include why it's great
class="radio"> type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> Option two can be something else and selecting it will deselect option one
class="radio disabled"> type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled> Option three is disabled



内联单选和多选框

通过将 .checkbox-inline 或 .radio-inline 类 

应用到一系列的多选框（checkbox）或单选框（radio）控件上，

可以使这些控件排列在一行

效果如下:

Bootstrap_文档_03_表单_按钮_图片_辅助类_第5张图片

代码如下:

 class="checkbox-inline">
   type="checkbox" id="inlineCheckbox1" value="option1"> 1

 class="checkbox-inline">
   type="checkbox" id="inlineCheckbox2" value="option2"> 2

 class="checkbox-inline">
   type="checkbox" id="inlineCheckbox3" value="option3"> 3



 class="radio-inline">
   type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1

 class="radio-inline">
   type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2

 class="radio-inline">
   type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3



不带label文本的Checkbox 和 radio

如果需要  内没有文字，输入框（input）正是你所期望的。

 目前只适用于非内联的 checkbox 和 radio。

请记住，仍然需要为使用辅助技术的用户提供某种形式的 label（例如，使用 aria-label）。

效果如下:

Bootstrap_文档_03_表单_按钮_图片_辅助类_第6张图片

代码如下:

 class="checkbox">
  
     type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
class="radio"> type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">


下拉列表（select）

注意，很多原生选择菜单 - 

即在 Safari 和 Chrome 中 - 的圆角是无法通过修改 border-radius 属性来改变的。

效果如下:


代码如下: 

 class="form-control">
  1
  2
  3
  4
  5






对于标记了 multiple 属性的 


静态控件

如果需要在表单中将一行纯文本和 label 元素放置于同一行，

为 

 元素添加 .form-control-static 类即可。

1. 效果如下:

Bootstrap_文档_03_表单_按钮_图片_辅助类_第8张图片

1. 代码如下:

 class="form-horizontal">
   class="form-group">
     class="col-sm-2 control-label">Email
     class="col-sm-10">
       class="form-control-static">[email protected]
class="form-group"> for="inputPassword" class="col-sm-2 control-label">Password class="col-sm-10"> type="password" class="form-control" id="inputPassword" placeholder="Password">



2. 效果如下:


2. 代码如下:

注意: sr-only即screen reader only


 class="form-inline">
   class="form-group">
     class="sr-only">Email
     class="form-control-static">[email protected]

  

   class="form-group">
     for="inputPassword2" class="sr-only">Password
     type="password" class="form-control" id="inputPassword2" placeholder="Password">
  

   type="submit" class="btn btn-default">Confirm identity

 


焦点状态

我们将某些表单控件的默认 outline 样式移除，然后对 :focus 状态赋予 box-shadow 属性。

效果如下:


演示:focus 状态

在本文档中，我们为上面实例中的输入框赋予了自定义的样式，

用于演示 .form-control 元素的 :focus状态。


禁用状态

为输入框设置 disabled 属性可以禁止其与用户有任何交互（焦点、输入等）。

被禁用的输入框颜色更浅，并且还添加了 not-allowed 鼠标状态。

效果如下:


 class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled />


被禁用的 fieldset

为

 设置 disabled 属性,可以禁用 
 中包含的所有控件。

 标签的链接功能不受影响

默认情况下，浏览器会将 

 内所有的原生的表单控件

如（、 


     class="checkbox">
      
         type="checkbox"> Can't check this
      
    

     type="submit" class="btn btn-primary">Submit




只读状态

为输入框设置 readonly 属性可以禁止用户修改输入框中的内容。

处于只读状态的输入框颜色更浅（就像被禁用的输入框一样），但是仍然保留标准的鼠标状态。

效果如下:


代码如下:

 class="form-control" type="text" placeholder="Readonly input here…" readonly />


Help text

Block level help text for form controls.

Associating help text with form controls

Help text should be explicitly associated with the form control 

it relates to using the aria-describedbyattribute. 

This will ensure that assistive technologies – such as screen readers – 

will announce this help text when the user focuses or enters the control.


效果如下:

Bootstrap_文档_03_表单_按钮_图片_辅助类_第10张图片

代码如下:

 class="sr-only" for="inputHelpBlock">Input with help text
 type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
 id="helpBlock" class="help-block">
    A block of help text that breaks onto a new line and may extend beyond one line.



校验状态

Bootstrap 对表单控件的校验状态，如 error、warning 和 success 状态，都定义了样式。

使用时，添加 .has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。

任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。

将验证状态传达给辅助设备和盲人用户

使用这些校验样式只是为表单控件提供一个可视的、基于色彩的提示，

但是并不能将这种提示信息传达给使用辅助设备的用户 - 例如屏幕阅读器 - 或者色盲用户。

为了确保所有用户都能获取正确信息，Bootstrap 还提供了另一种提示方式。

例如，你可以在表单控件的  标签上以文本的形式显示提示信息（就像下面代码中所展示的）；

包含一个 Glyphicon 字体图标（还有赋予 .sr-only 类的文本信息 - 参考Glyphicon 字体图标实例）；

或者提供一个额外的 辅助信息 块。

另外，对于使用辅助设备的用户，无效的表单控件还可以赋予一个 aria-invalid="true" 属性。


效果如下:

Bootstrap_文档_03_表单_按钮_图片_辅助类_第11张图片

代码如下:

 class="form-group has-success">
   class="control-label" for="inputSuccess1">Input with success
   type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
   id="helpBlock2" class="help-block">
    A block of help text that breaks onto a new line and may extend beyond one line.
  


 class="form-group has-warning">
   class="control-label" for="inputWarning1">Input with warning
   type="text" class="form-control" id="inputWarning1">


 class="form-group has-error">
   class="control-label" for="inputError1">Input with error
   type="text" class="form-control" id="inputError1">


 class="has-success">
   class="checkbox">
    
       type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    
  


 class="has-warning">
   class="checkbox">
    
       type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    
  


 class="has-error">
   class="checkbox">
    
       type="checkbox" id="checkboxError" value="option1">
      Checkbox with error



添加额外的图标

你还可以针对校验状态为输入框添加额外的图标。

只需设置相应的 .has-feedback 类并添加正确的图标即可。

反馈图标（feedback icon）只能使用在文本输入框  元素上。

图标、label 和输入控件组

对于不带有 label 标签的输入框以及右侧带有附加组件的输入框组，需要手动为其图标定位。

为了让所有用户都能访问你的网站，我们强烈建议为所有输入框添加 label 标签。

如果你不希望将 label 标签展示出来，可以通过添加 .sr-only 类来实现。

如果的确不能添加 label 标签，请调整图标的 top 值。

对于输入框组，请根据你的实际情况调整 right 值。

向辅助技术设备传递图标的含义

为了确保辅助技术- 如屏幕阅读器 - 正确传达一个图标的含义，

额外的隐藏的文本应包含在 .sr-only 类中，并明确关联使用了 aria-describedby 的表单控件。

或者，以某些其他形式（例如，文本输入字段有一个特定的警告信息）传达含义，

例如改变与表单控件实际相关联的  的文本。

虽然下面的例子已经提到各自表单控件本身的  文本的验证状态，

上述技术（使用 .sr-only 文本 和 aria-describedby) ）已经包括了需要说明的目的。



1. 效果如下:

Bootstrap_文档_03_表单_按钮_图片_辅助类_第12张图片

1. 代码如下:

 class="form-group has-success has-feedback">
   class="control-label" for="inputSuccess2">Input with success
   type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
   class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true">
   id="inputSuccess2Status" class="sr-only">(success)


 class="form-group has-warning has-feedback">
   class="control-label" for="inputWarning2">Input with warning
   type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
   class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true">
   id="inputWarning2Status" class="sr-only">(warning)


 class="form-group has-error has-feedback">
   class="control-label" for="inputError2">Input with error
   type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
   class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true">
   id="inputError2Status" class="sr-only">(error)


 class="form-group has-success has-feedback">
   class="control-label" for="inputGroupSuccess1">Input group with success

   class="input-group">
     class="input-group-addon">@
     type="text" class="form-control" id="inputGroupSuccess1" 
        aria-describedby="inputGroupSuccess1Status" />
  

   class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true">
   id="inputGroupSuccess1Status" class="sr-only">(success)



为水平排列的表单和内联表单设置可选的图标

2. 效果如下:

Bootstrap_文档_03_表单_按钮_图片_辅助类_第13张图片

2. 代码如下:

 class="form-horizontal">
   class="form-group has-success has-feedback">
     class="control-label col-sm-3" for="inputSuccess3">Input with success

     class="col-sm-9">
       type="text" class="form-control"         id="inputSuccess3" aria-describedby="inputSuccess3Status">
       class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true">
       id="inputSuccess3Status" class="sr-only">(success)
    

  



   class="form-group has-success has-feedback">
     class="control-label col-sm-3" for="inputGroupSuccess2">        Input group with success    

     class="col-sm-9">

       class="input-group">
         class="input-group-addon">@
         type="text" class="form-control" id="inputGroupSuccess2" 
            aria-describedby="inputGroupSuccess2Status" />
      

       class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true">
       id="inputGroupSuccess2Status" class="sr-only">(success)






3. 效果如下:

Bootstrap_文档_03_表单_按钮_图片_辅助类_第14张图片

3. 代码如下:

 class="form-inline">
   class="form-group has-success has-feedback">
     class="control-label" for="inputSuccess4">Input with success
     type="text" class="form-control"         id="inputSuccess4" aria-describedby="inputSuccess4Status">
     class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true">    
     id="inputSuccess4Status" class="sr-only">(success)
  


 class="form-inline">
   class="form-group has-success has-feedback">
     class="control-label" for="inputGroupSuccess3">Input group with success

     class="input-group">
       class="input-group-addon">@
       type="text" class="form-control" id="inputGroupSuccess3" 
            aria-describedby="inputGroupSuccess3Status" />
    

     class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true">
     id="inputGroupSuccess3Status" class="sr-only">(success)





效果可选的图标与设置 .sr-only 类的 label

如果你使用 .sr-only 类来隐藏表单控件的  （而不是使用其它标签选项，如 aria-label 属性）， 

一旦它被添加，Bootstrap 会自动调整图标的位置。

效果如下:

Bootstrap_文档_03_表单_按钮_图片_辅助类_第15张图片

代码如下:

 class="form-group has-success has-feedback">
   class="control-label sr-only" for="inputSuccess5">Hidden label
   type="text" class="form-control" id="inputSuccess5"     aria-describedby="inputSuccess5Status">

   class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true">  
   id="inputSuccess5Status" class="sr-only">(success)






 class="form-group has-success has-feedback">
   class="control-label sr-only" for="inputGroupSuccess4">Input group with success

   class="input-group">
     class="input-group-addon">@
     type="text" class="form-control" id="inputGroupSuccess4" 
        aria-describedby="inputGroupSuccess4Status" />
  

   class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true">
   id="inputGroupSuccess4Status" class="sr-only">(success)


 

控件尺寸

通过 .input-lg 类似的类可以为控件设置高度，通过 .col-lg-* 类似的类可以为控件设置宽度。

高度尺寸

创建大一些或小一些的表单控件以匹配按钮尺寸.

效果如下:

Bootstrap_文档_03_表单_按钮_图片_辅助类_第16张图片

代码如下:

 class="form-control input-lg" type="text" placeholder=".input-lg">
 class="form-control" type="text" placeholder="Default input">
 class="form-control input-sm" type="text" placeholder=".input-sm">

 class="form-control input-lg">...
 class="form-control">...
 class="form-control input-sm">...


水平排列的表单组的尺寸

通过添加 .form-group-lg 或 .form-group-sm 类，

为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸。

效果如下:

Bootstrap_文档_03_表单_按钮_图片_辅助类_第17张图片

代码如下:

 class="form-horizontal">
   class="form-group form-group-lg">
     class="col-sm-2 control-label" for="formGroupInputLarge">Large label
     class="col-sm-10">
       class="form-control" type="text"           id="formGroupInputLarge" placeholder="Large input">
    
  

   class="form-group form-group-sm">
     class="col-sm-2 control-label" for="formGroupInputSmall">Small label
     class="col-sm-10">
       class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">




调整列（column）尺寸

用栅格系统中的列（column）包裹输入框或其任何父元素，都可很容易的为其设置宽度。

效果如下:


代码如下:

 class="row">
   class="col-xs-2">
     type="text" class="form-control" placeholder=".col-xs-2">
  
   class="col-xs-3">
     type="text" class="form-control" placeholder=".col-xs-3">
  
   class="col-xs-4">
     type="text" class="form-control" placeholder=".col-xs-4">




按钮

可作为按钮使用的标签或元素

为 、 class="btn btn-default" type="button" value="Input"> class="btn btn-default" type="submit" value="Submit">

针对组件的注意事项

虽然按钮类可以应用到  和 

链接被作为按钮使用时的注意事项

如果  元素被作为按钮使用 -- 并用于在当前页面触发某些功能 --

 而不是用于链接其他页面或链接当前页面中的其他部分，

那么，务必为其设置 role="button" 属性。

跨浏览器展现

我们总结的最佳实践是：

强烈建议尽可能使用 



预定义样式

使用下面列出的类可以快速创建一个带有预定义样式的按钮。

效果如下:

Bootstrap_文档_03_表单_按钮_图片_辅助类_第19张图片

代码如下:


 type="button" class="btn btn-default">（默认样式）Default


 type="button" class="btn btn-primary">（首选项）Primary


 type="button" class="btn btn-success">（成功）Success


 type="button" class="btn btn-info">（一般信息）Info


 type="button" class="btn btn-warning">（警告）Warning


 type="button" class="btn btn-danger">（危险）Danger


 type="button" class="btn btn-link">（链接）Link

Conveying meaning to assistive technologies

为按钮添加不同的颜色只是一种视觉上的信息表达方式，

但是，对于使用辅助技术 -- 例如屏幕阅读器 -- 的用户来说，颜色是不可见的。

建议，确保通过颜色表达的信息或者通过内容自身表达出来（按钮上的文字），

或者通过其他方式 -- 例如通过 .sr-only 类隐藏的额外文本 -- 表达出来。


尺寸

需要让按钮具有不同尺寸吗？使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮。

效果如下:

Bootstrap_文档_03_表单_按钮_图片_辅助类_第20张图片

代码如下:


   type="button" class="btn btn-primary btn-lg">（大按钮）Large button
   type="button" class="btn btn-default btn-lg">（大按钮）Large button




   type="button" class="btn btn-primary">（默认尺寸）Default button
   type="button" class="btn btn-default">（默认尺寸）Default button




   type="button" class="btn btn-primary btn-sm">（小按钮）Small button
   type="button" class="btn btn-default btn-sm">（小按钮）Small button




   type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button
   type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button


通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，

而且按钮也变为了块级（block）元素。

效果如下:

Bootstrap_文档_03_表单_按钮_图片_辅助类_第21张图片

代码如下:

 type="button" class="btn btn-primary btn-lg btn-block">（块级元素）Block level button
 type="button" class="btn btn-default btn-lg btn-block">（块级元素）Block level button



激活状态

当按钮处于激活状态时，其表现为被按压下去（底色更深、边框夜色更深、向内投射阴影）。

对于  type="button" class="btn btn-default btn-lg active">Button


链接（）元素

可以为基于  元素创建的按钮添加 .active 类。

效果如下:

Bootstrap_文档_03_表单_按钮_图片_辅助类_第23张图片

代码如下:

 href="#" class="btn btn-primary btn-lg active" role="button">Primary link
 href="#" class="btn btn-default btn-lg active" role="button">Link


禁用状态

通过为按钮的背景设置 opacity 属性就可以呈现出无法点击的效果。


button 元素

为  type="button" class="btn btn-default btn-lg" disabled="disabled">    Button

跨浏览器兼容性

如果为 


链接（）元素

为基于  元素创建的按钮添加 .disabled 类。

效果如下:

Bootstrap_文档_03_表单_按钮_图片_辅助类_第25张图片

代码如下:

 href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link
 href="#" class="btn btn-default btn-lg disabled" role="button">Link

我们把 .disabled 作为工具类使用，就像 .active 类一样，因此不需要增加前缀。

链接的原始功能不受影响

上面提到的类只是通过设置 pointer-events: none 来禁止  元素作为链接的原始功能，

但是，这一 CSS 属性并没有被标准化，并且 Opera 18 及更低版本的浏览器并没有完全支持这一属性，

同样，Internet Explorer 11 也不支持。

In addition, even in browsers that do support pointer-events: none, 

keyboard navigation remains unaffected,

 meaning that sighted keyboard users and users of assistive technologies 

will still be able to activate these links. 

因此，为了安全起见，建议通过 JavaScript 代码来禁止链接的原始功能。

图片

响应式图片

在 Bootstrap 版本 3 中，通过为图片添加 .img-responsive 类可以让图片支持响应式布局。

其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性，

从而让图片在其父元素中更好的缩放。


如果需要让使用了 .img-responsive 类的图片水平居中，

请使用 .center-block 类，不要用 .text-center。

 请参考助手类章节 了解更多关于 .center-block 的用法。

SVG 图像和 IE 8-10

在 Internet Explorer 8-10 中，设置为 .img-responsive 的 SVG 图像显示出的尺寸不匀称。

为了解决这个问题，在出问题的地方添加 width: 100% \9; 即可。

Bootstrap 并没有自动为所有图像元素设置这一属性，因为这会导致其他图像格式出现错乱。

 src="..." class="img-responsive" alt="Responsive image">


图片形状

通过为  元素添加以下相应的类，可以让图片呈现不同的形状。

效果如下:

Bootstrap_文档_03_表单_按钮_图片_辅助类_第26张图片

跨浏览器兼容性

请时刻牢记：Internet Explorer 8 不支持 CSS3 中的圆角属性。

 src="..." alt="..." class="img-rounded">
 src="..." alt="..." class="img-circle">
 src="..." alt="..." class="img-thumbnail">

辅助类

情境文本颜色

通过颜色来展示意图，Bootstrap 提供了一组工具类。

这些类可以应用于链接，并且在鼠标经过时颜色可以还可以加深，就像默认的链接一样。

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

 class="text-muted">...

 class="text-primary">...

 class="text-success">...

 class="text-info">...

 class="text-warning">...

 class="text-danger">...

处理差异

Sometimes emphasis classes cannot be applied due to the specificity of another selector. 

In most cases, a sufficient workaround is to wrap your text in a  with the class.

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, 

which will not be conveyed to users of assistive technologies – such as screen readers. 

Ensure that information denoted by the color is either obvious from the content itself

 (the contextual colors are only used to reinforce meaning that is already present in the text/markup), 

or is included through alternative means, such as additional text hidden with the .sr-only class.


情境背景色

和情境文本颜色类一样，使用任意情境背景色类就可以设置元素的背景。

链接组件在鼠标经过时颜色会加深，就像上面所讲的情境文本颜色类一样

效果如下:

Bootstrap_文档_03_表单_按钮_图片_辅助类_第27张图片

代码如下:

 class="bg-primary">...

 class="bg-success">...

 class="bg-info">...

 class="bg-warning">...

 class="bg-danger">...

处理差异

Sometimes contextual background classes cannot be applied due to the specificity of another selector. 

In some cases, a sufficient workaround is to wrap your element's content in a 

 with the class.

Conveying meaning to assistive technologies

As with contextual colors, ensure that any meaning conveyed through color is also conveyed in a format 

that is not purely presentational.

关闭按钮

通过使用一个象征关闭的图标，可以让模态框和警告框消失。

效果如下:


 type="button" class="close" aria-label="Close">     aria-hidden="true">×


三角符号

通过使用三角符号可以指示某个元素具有下拉菜单的功能。

注意，向上弹出式菜单中的三角符号是反方向的。

 class="caret">


快速浮动

通过添加一个类，可以将任意元素向左或向右浮动。

!important 被用来明确 CSS 样式的优先级。

这些类还可以作为 mixin（参见 less 文档） 使用。

 class="pull-left">...
class="pull-right">...
// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

不能用于导航条组件中

排列导航条中的组件时可以使用这些工具类：.navbar-left 或 .navbar-right 。 

参见导航条文档以获取更多信息。


让内容块居中

为任意元素设置 display: block 属性并通过 margin 属性让其中的内容居中。

下面列出的类还可以作为 mixin 使用。

 class="center-block">...
// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}


清除浮动

通过为父元素添加 .clearfix 类可以很容易地清除浮动（float）。

这里所使用的是 Nicolas Gallagher 创造的 micro clearfix 方式。

此类还可以作为 mixin 使用。


 class="clearfix">...
// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage as a mixin
.element {
  .clearfix();
}


显示或隐藏内容

.show 和 .hidden 类可以强制任意元素显示或隐藏(对于屏幕阅读器也能起效)。

这些类通过 !important 来避免 CSS 样式优先级问题，就像 quick floats 一样的做法。

注意，这些类只对块级元素起作用，另外，还可以作为 mixin 使用。


.hide 类仍然可用，但是它不能对屏幕阅读器起作用，

并且从 v3.0.1 版本开始就不建议使用了。请使用 .hidden或 .sr-only 。


另外，.invisible 类可以被用来仅仅影响元素的可见性，

也就是说，元素的 display 属性不被改变，并且这个元素仍然能够影响文档流的排布。


 class="show">...
 class="hidden">...
// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}


屏幕阅读器和键盘导航

.sr-only 类可以对屏幕阅读器以外的设备隐藏内容。

.sr-only 和 .sr-only-focusable 联合使用的话可以在元素有焦点的时候再次显示出来（例如，使用键盘导航的用户）。

对于遵循 可访问性的最佳实践 很有必要。

这个类也可以作为 mixin 使用。

 class="sr-only sr-only-focusable" href="#content">Skip to main content
// Usage as a mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}


图片替换

使用 .text-hide 类或对应的 mixin 可以用来将元素的文本内容替换为一张背景图。

 class="text-hide">Custom heading
// Usage as a mixin
.heading {
  .text-hide();
}

响应式工具

为了加快对移动设备友好的页面开发工作，

利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。

另外还包含了针对打印机显示或隐藏内容的工具类。

有针对性的使用这类工具类，从而避免为同一个网站创建完全不同的版本。

相反，通过使用这些工具类可以在不同设备上提供不同的展现形式。


可用的类

通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容。

  超小屏幕手机 (<768px) 小屏幕平板 (≥768px) 中等屏幕桌面 (≥992px) 大屏幕桌面 (≥1200px)
.visible-xs-* 可见
.visible-sm-* 可见
.visible-md-* 可见
.visible-lg-* 可见
.hidden-xs 可见 可见 可见
.hidden-sm 可见 可见 可见
.hidden-md 可见 可见 可见
.hidden-lg 可见 可见 可见


从 v3.2.0 版本起，形如 .visible-*-* 的类针对每种屏幕大小都有了三种变体，

每个针对 CSS 中不同的 display属性，列表如下：

类组 CSS display
.visible-*-block display: block;
.visible-*-inline display: inline;
.visible-*-inline-block display: inline-block;

因此，以超小屏幕（xs）为例，可用的 .visible-*-* 类是：

.visible-xs-block、.visible-xs-inline 和 .visible-xs-inline-block。


.visible-xs、.visible-sm、.visible-md 和 .visible-lg 类也同时存在。

但是从 v3.2.0 版本开始不再建议使用。

除了 

 相关的元素的特殊情况外，它们与 .visible-*-block 大体相同。


打印类

和常规的响应式类一样，使用下面的类可以针对打印机隐藏或显示某些内容。

class 浏览器 打印机
.visible-print-block
.visible-print-inline
.visible-print-inline-block		 可见
.hidden-print 可见

.visible-print 类也是存在的，但是从 v3.2.0 版本开始不建议使用。

它与 .visible-print-block 类大致相同，除了 

 相关元素的特殊情况外。


测试用例

调整你的浏览器大小，或者用其他设备打开页面，都可以测试这些响应式工具类.

Bootstrap_文档_03_表单_按钮_图片_辅助类_第28张图片

。


使用 Less

.

Bootstrap 的 CSS 文件是通过 Less 源码编译而来的。

Less 是一门预处理语言，支持变量、mixin、函数等额外功能。

对于希望使用 Less 源码而非编译而来的 CSS 文件的用户，

Bootstrap 框架中包含的大量变量、mixin 将非常有价值。

针对栅格系统的变量和 mixin 包含在栅格系统章节。


编译 Bootstrap

可以通过两种方式使用 Bootstrap ：使用编译后的 CSS 文件或者使用 Less 源码文件。

若要编译 Less 文件，请参考“起步”章节的内容以了解如何设置开发环境并运行必须的编译指令。


变量

整个 Bootstrap 项目中使用了大量的变量，这些变量被用来代表颜色、空白（内部、边距）、字体等。

详细内容请参考定制工具。


颜色

Bootstrap 使用了两种颜色模式：灰度颜色和语义颜色。

灰度颜色用于快速获取常用的黑色色调；语义颜色包含了各种赋予语义的颜色值

Bootstrap_文档_03_表单_按钮_图片_辅助类_第29张图片


你在项目中可以使用这些预定义的颜色变量，或者重新为其赋予别名，使其更有语义。

// Use as-is
.masthead {
  background-color: @brand-primary;
}

// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}


Scaffolding

某几个变量是改变网站外观的关键要素。

// Scaffolding
@body-bg:    #fff;
@text-color: @black-50;

链接

仅仅通过改变一个变量，可以很容易地为链接赋予正确的颜色。

// Variables
@link-color:       @brand-primary;
@link-hover-color: darken(@link-color, 15%);

// Usage
a {
  color: @link-color;
  text-decoration: none;

  &:hover {
    color: @link-hover-color;
    text-decoration: underline;
  }
}

注意：@link-hover-color 使用了 Less 提供的一个内置函数，用于自动为鼠标悬停设置合适的颜色。

你还可以使用 darken、lighten、saturate 和 desaturate 等 Less 内置的函数。


排版

通过几个变量就能轻松的设置字体、字号、行距等。

Bootstrap 利用这些变量提供了简单地定制排版的功能。

@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          14px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px

@headings-font-family:    inherit;
@headings-font-weight:    500;
@headings-line-height:    1.1;
@headings-color:          inherit;


图标

以下两个变量用于设置图标文件的位置和文件名。

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";


组件

组件贯穿整个 Bootstrap 框架，他们通过一些变量来设置默认值。

下面列出的是常用的几个。

@padding-base-vertical:          6px;
@padding-base-horizontal:        12px;

@padding-large-vertical:         10px;
@padding-large-horizontal:       16px;

@padding-small-vertical:         5px;
@padding-small-horizontal:       10px;

@padding-xs-vertical:            1px;
@padding-xs-horizontal:          5px;

@line-height-large:              1.33;
@line-height-small:              1.5;

@border-radius-base:             4px;
@border-radius-large:            6px;
@border-radius-small:            3px;

@component-active-color:         #fff;
@component-active-bg:            @brand-primary;

@caret-width-base:               4px;
@caret-width-large:              5px;


特定浏览器厂商的 mixin

特定浏览器厂商的 mixin 用于为不同厂商的浏览器使用相应的 CSS 属性前缀来支持各厂商的浏览器。


Box-sizing

通过这一个 mixin 来为所有组件设置盒模型。请参考这篇 来自 Mozilla 的文章。

此 mixin 从 v3.2.0 版本开始就被列为 不建议使用 了，取而代之的是使用 Autoprefixer。

为了保持向后兼容，在 v4 版本之前，Bootstrap 将在内部继续使用这些 mixin。

.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Safari <= 5
     -moz-box-sizing: @box-model; // Firefox <= 19
          box-sizing: @box-model;
}


圆角

现在，所有现代浏览器都支持不带厂商前缀的 border-radius 属性了。

有鉴于此，我们没有提供 .border-radius() mixin，

但是，Bootstrap does 提供了用于快速设置同一侧圆角的 mixin 。

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}


Box (Drop) 隐形

如果你的目标用户使用的是最新版本和更高级的浏览器和设备，只需单独使用 box-shadow 属性即可。

如果你需要兼容较老的 Android (低于 v4) 和 iOS 设备 (低于 iOS 5)，

可以使用下面这个 不建议使用 的 mixin，便于帮你添加 -webkit 前缀。

由于 Bootstrap 并未官方提供对过时（不支持标准属性）平台的支持，此 mixin 从 v3.1.0 版本期就 不建议使用 了。

为了保持向后兼容，Bootstrap 将继续在内部使用此 mixin， 直到 Bootstrap v4。

在设置 box 阴影时务必使用 rgba() 颜色，这样可以使他们尽可能地与背景无缝融入。

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}


过渡效果

有多个 mixin 供你灵活使用。

可以一次性设置所有的过渡效果的属性，或者根据需要只是指定延时和持续时间。

此 mixin 从 v3.2.0 版本开始就被列为 不建议使用 了，取而代之的是使用 Autoprefixer。

为了保持向后兼容，在 v4 版本之前，Bootstrap 将在内部继续使用这些 mixin。

.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
  -webkit-transition-timing-function: @timing-function;
          transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}


变形

旋转、缩放、平移（移动）或倾斜任何对象。

此 mixin 从 v3.2.0 版本开始就被列为 不建议使用 了，取而代之的是使用 Autoprefixer。

为了保持向后兼容，在 v4 版本之前，Bootstrap 将在内部继续使用这些 mixin。

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9 only
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // IE9 only
          transform-origin: @origin;
}


动画

仅适用一个 mixin 就可以在一个声明中使用所有 CSS3 所提供的动画属性，其他 mixin 用于设置单个属性。

T此 mixin 从 v3.2.0 版本开始就 不建议使用 了，取而代之的是使用 Autoprefixer。

为了保持向后兼容，在 v4 版本之前，Bootstrap 将在内部继续使用这些 mixin。

.animation(@animation) {
  -webkit-animation: @animation;
          animation: @animation;
}
.animation-name(@name) {
  -webkit-animation-name: @name;
          animation-name: @name;
}
.animation-duration(@duration) {
  -webkit-animation-duration: @duration;
          animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
  -webkit-animation-timing-function: @timing-function;
          animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
  -webkit-animation-delay: @delay;
          animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
  -webkit-animation-iteration-count: @iteration-count;
          animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
  -webkit-animation-direction: @direction;
          animation-direction: @direction;
}


透明度

为所有浏览器设置透明度，并为IE8提供 filter 备用滤镜。

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}


占位符文本

为表单控件中每个文本域提供占位符（Placeholder）文本的颜色。

.placeholder(@color: @input-color-placeholder) {
  &::-moz-placeholder           { color: @color; } // Firefox
  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}


列

通过CSS在一个单独的元素中生成列。

.content-columns(@width; @count; @gap) {
  -webkit-column-width: @width;
     -moz-column-width: @width;
          column-width: @width;
  -webkit-column-count: @count;
     -moz-column-count: @count;
          column-count: @count;
  -webkit-column-gap: @gap;
     -moz-column-gap: @gap;
          column-gap: @gap;
}


渐变

便于把任何两种颜色变成背景渐变色。

想要使他更高级些，可以设置一个direction（方向），使用三种颜色，

也可以使用径向（radial）渐变。使用一个mixin（混入），你就可以得到所有需要的前缀语法。

#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);

你也可以为标准的里两颜色线性渐变指定角度：

#gradient > .directional(#333; #000; 45deg);

如果你需要一个条纹风格的渐变，这也很容易。

只要指定一个颜色，我们将该颜色半透明的条纹覆盖其上。

#gradient > .striped(#333; 45deg);

再来试试三种颜色。利用此 mixin ，并为其设置第一种颜色、第二种颜色、

第二种颜色的色标（例如 25%），还有第三种颜色：

#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);

当心！ 如果你想删除某个渐变，确保将你所添加的针对 IE 的 filter 一并删除。

你可以通过使用 .reset-filter() mixin 和 background-image: none; 达到目的。


实用工具 mixin

实用工具 mixin 用于与不相关的 CSS 结合以达到特定目的或任务。


Clearfix -- 清除浮动

建议为需要清除浮动的元素使用 .clearfix() mixin ，尽量不要直接添加 class="clearfix" 类。

基于 Nicolas Gallagher 的 micro clearfix 代码。

// Mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage
.container {
  .clearfix();
}


水平居中

让元素在其父元素中水平居中。

需要设置 width 或 max-width 属性。

// Mixin
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage
.container {
  width: 940px;
  .center-block();
}


尺寸助手 mixin

用于方便的指定对象的尺寸。

// Mixins
.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}

// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }


可调整大小的文本域

方便设置任何文本域或其他元素的尺寸可调整。

默认依循浏览器默认行为 (both)，即垂直、水平都可以调整。

.resizable(@direction: both) {
  // Options: horizontal, vertical, both
  resize: @direction;
  // Safari fix
  overflow: auto;
}


截断文本

此 mixin 用来以省略号代替被截断的文本。

元素必须是 block 或 inline-block 级。

// Mixin
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Usage
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}


视网膜屏幕（Retina）下的图片

通过指定两个图片路径和 @1x 图片尺寸，Bootstrap 还提供了对 @2x 媒体查询的支持。

 如果你的页面上有很多图片，建议在一个单独的媒体查询中手工编写针对视网膜屏幕的 CSS 代码。

.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}");

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}

// Usage
.jumbotron {
  .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}

使用 Sass

虽然 Bootstrap 是基于 Less 构建的，我们还提供了一套官方支持的 Sass 移植版代码。

我们将这个版本放在单独的 GitHub 仓库中进行维护，并通过脚本处理源码更新。


包含的内容

由于 Sass 移植版存放于单独的仓库，并针对不同的使用群体，这个项目中的内容与 Bootstrap 主项目有很大不同。

这也是为了保证 Sass 移植版与更多基于 Sass 的系统相兼容。

路径 描述
lib/ Ruby gem code (Sass configuration, Rails and Compass integrations)
tasks/ Converter scripts (turning upstream Less to Sass)
test/ Compilation tests
templates/ Compass package manifest
vendor/assets/ Sass, JavaScript, and font files
Rakefile Internal tasks, such as rake and convert

请访问 Sass 移植版在 GitHub 上的仓库 来了解这些文件。


安装

关于如何安装并使用 Bootstrap 的 Sass 移植版，请参考GitHub 仓库中的 readme 文件。 

此仓库中包含了最新的源码以及如何与 Rails、Compass 以及标准 Sass 项目一同使用的详细信息。
























未完待续,下一章节,つづく

你可能感兴趣的:(Bootstrap)

  • 思科路由器交换机密码破解过程详解 zhane_hao
    路由启动过程加电自检(POST)加载bootstrap代码检查配置寄存器寻找CiscoIOS加载CiscoIOS寻找配置文件加载配置文件若没有配置文件，进入Setup模式，进行初始化配置运行路由器操作系统查看命令•showversion：检查配置寄存器的值,硬件配置,IOS版本•showflash：检查Flash中的IOS,或是flash大小,使用情况(占用多少,剩下多少)•showstartup
  • Kafka系列之：kafka命令详细总结 快乐骑行^_^ 日常分享专栏KafkaKafka系列kafka命令详细总结
    Kafka系列之：kafka命令详细总结一、添加和删除topic二、修改topic三、平衡领导者四、检查消费者位置五、管理消费者群体一、添加和删除topicbin/kafka-topics.sh--bootstrap-serverbroker_host:port--create--topicmy_topic_name\--partitions20--replication-factor3--con
  • html5carousel图片轮播,全面解析Bootstrap中Carousel轮播的使用方法 RemusrickCat
    本文实例为大家全面的解析了Bootstrap中Carousel的使用方法，供大家参考，具体内容如下源码文件：Carousel.scssCarousel.js实现原理：隐藏所有要显示的元素，然后指定当前要显示的为block，宽、高自适应源码分析：1、Html结构：主要分为以四个部分1.1、容器：最外层div，需要一个data-ride=”carousel”来指定为轮播放插件，并且提供一个Id，方便圆
  • 移动WEB开发（第四天）__响应式布局 加蓓努力我先飞 5.移动web开发资料前端
    移动WEB开发（第四天）__响应式布局移动端WEB开发之响应式布局1.0响应式开发原理1.1响应式开发原理1.2响应式布局容器2.0bootstrap的介绍2.1Bootstrap简介2.2bootstrap优点2.3版本简介2.4bootstrap基本使用2.5bootstrap布局容器2.6bootstrap栅格系统3.0阿里百秀案例制作3.1技术选型移动端WEB开发之响应式布局1.0响应式开
  • css 个人喜欢的样式 速查笔记 waterHBO css笔记前端
    起因，目的:记录自己喜欢的，觉得比较好看的css.下次用的时候，直接复制，很方便。1.个人html模板，导入常用的link设置英语字体:Noto导入默认的css使用网络icon图标导入Bootstrapcss框架html-->2.常用css模板todo,以后再增加。*{font-family:"NotoSerif",system-ui;font-optical-sizing:auto;}Noto字
  • (代码可运行)Bootstrap框架的HTML示例 程序员大侠 前端CSShtmlbootstrap前端
    Bootstrap：一套流行的前端开发框架，基于HTML、CSS和JavaScript，适用于快速构建响应式Web应用。以下是一个使用Bootstrap构建的简单响应式Web应用的HTML示例：BootstrapExampleHello,Bootstrap!CardtitleSomequickexampletexttobuildonthecardtitleandmakeupthebulkofthe
  • bootstrap直接对form表进行校验 IT和金融
    form表单可以前端进行校验，当然也可以直接采用bootstrap对form表单进行校验如form表单中有等相关字段进行校验，可直接用bootstrap的校验，方式如下：$("#auth_add_form").bootstrapValidator({//auth_add_form为form的id值feedbackIcons:{valid:'glyphiconglyphicon-ok',invali
  • node模块 weiweiweb888 前端javascriptbootstrap
    模块系统模块化介绍传统开发的问题随着项目的扩大，然后代码就越来越庞大，如果没有很好的规划，后期维护非常复杂（甚至就维护不了）。比如：前端html中有很多特效会依赖js文件。比如：index.html:bootstrap以上就是一个依赖关系，bootstrap依赖于jquery。先引入jquery后引入bootstrap。而且随着项目的扩大，我们的html页面也就随之增加，并且每一个html页面都会
  • mirantis OpenStack9.0在virtualbox上的部署 Caroline_33 openstackmirantisvirtualbox
    实验环境安装包-VirtualBox-4.3.12-93733-Win.exe-Oracle_VM_VirtualBox_Extension_Pack-5.1.2-108956.vbox-extpack-Mirantis_Openstack9.0.iso-bootstrap.zip-mirrors.zip-xtfp-xshell实验机器-cpu:i3-3220以上-Ram:至少8G说明-保证内存至
  • es遇到的问题 云帆@ elasticsearchelasticsearch
    一、目录ERROR:[1]bootstrapchecksfailed.Youmustaddressthepointsdescribedinthefollowing[1]linesbeforestartingElasticsearch.ERROR:Elasticsearchexitedunexpectedly,withexitcode78二、实现ERROR:[1]bootstrapchecksfai
  • JS基础-ClassList -移动端插件的引入-touch事件-sessionStorage 和 localStorage 垦利不 javascript开发语言ecmascript
    目录1.classList属性添加类删除类切换类检查类是否存在替换类移动端touch事件2.消除点击延迟Fastclick插件的引入引入FastClick初始化3.Swiper插件的引入和使用通过CDN引入通过npm安装（vue中建议）使用SwiperHTML结构初始化Swiper4.zyMedia插件简介4.1下载与引入4.2使用4.3js初始化4.4参数说明5.bootstrap的安装和使用5
  • 前端框架有哪些？ 赎罪゛ 前端框架前端javascript
    熟悉掌握HTML、服务器端脚本语言、CSS和JavaScript之后，学习Web框架可以加快Web开发速度，节约时间。PHP程序员可选的框架包括CakePHP、CodeIgniter、Zend等，Python程序员喜欢使用Django和webpy，Ruby程序员常用RoR。随着Web越来越规范和标准的统一，Web组件化技术不断革新，移动端开发不断升华，以下是一些常见开源前端框架：Bootstrap
  • CoreUI免费Laravel管理模板安装与使用指南 皮静滢Annette
    CoreUI免费Laravel管理模板安装与使用指南coreui-free-laravel-admin-templateCoreUIFreeLaravelBootstrapAdminTemplate项目地址:https://gitcode.com/gh_mirrors/co/coreui-free-laravel-admin-template1.项目目录结构及介绍CoreUI免费Laravel管理
  • 81.MySQL-PXC高可用集群 戒掉贪嗔痴(薛双奇) 数据库运维-MySQLmysql数据库
    1.第一个节点启动。Linux7:my.cnf文件需要拷贝到：/etc/my.cnf(非常重要)[root@mysql51~]#mysqlpxcbootstrap-pxcBootstrappingPXC(PerconaXtraDBCluster)InitializingMySQ[OK]se:StartingMySQL(PerconaXtraDBCluster)..[OK]当前集群只有一个节点。my
  • 如何查看当前的gruop_id 的kafka 消费情况 这个可以查看到是否存在消费阻塞问题 树下水月 kafka分布式
    如何查看当前的gruop_id的kafka消费情况这个可以查看到是否存在消费阻塞问题命令如下:/kafka/bin/kafka-consumer-groups.sh--bootstrap-server127.0.0.1:9092--groupGWW --describe其中127.0.0.1为zookeeper服务器ipGWW为对应要查看的group_id如下图所示:运行这个命令后，Kafka会返
  • **脑图制作的Bootstrap Bundle项目指南** 潘惟妍
    脑图制作的BootstrapBundle项目指南bootstrap-bundleBraincraftedBootstrapBundleintegratesBootstrapintoSymfony2byprovidingtemplates,Twigextensions,servicesandcommands.项目地址:https://gitcode.com/gh_mirrors/bo/bootstr
  • linux的webkit桌面应用,使用node-webkit构建桌面应用程序 萌萌爱恋
    Web前端的现状目前的Web前端的现状较之5-6年前，简直不能同日而语：从所使用的技术、工具、框架到开发一个产品所需要付出的工作量，从前端开发从业人员的数量到Web应用的数量，从企业对于Web前端的重要程度的认识到Web实际上为企业带来的回报，一切都有了翻天覆地的变化。借助HTML5+CSS3的普及，加上一些开箱即用的CSS框架(如bootstrap，foundation等)支持，人们已经可以非常
  • bootstrap 列表 SkTj
    有序列表:olli无序列表：ulli不定义样式：ulclass="list-unstyled"横向显示：ulclass="list-inline"dtdddlclass="dl-horizontal"dtddimage.pngBootstrap实例-列表有序列表Item1Item2Item3Item4无序列表Item1Item2Item3Item4未定义样式列表Item1Item2Item3Ite
  • 前端框架有哪些？以及每种框架的详细介绍 cesske 前端框架
    目录前言1.React2.Vue.js3.Angular4.Bootstrap5.Foundation总结前言前端框架是Web开发中不可或缺的工具，它们为开发者提供了丰富的工具和抽象，使得构建复杂的Web应用变得更加容易。当前，前端框架种类繁多，其中一些最受欢迎的框架包括React、Vue.js、Angular、Bootstrap和Foundation等。以下是对这些框架的简要介绍：提示：以下是本
  • logstash 墨咖 logstash中间件服务器运维
    kafkainput{kafka{bootstrap_servers=>"127.0.0.1:9092"topics=>["SCHOOL_AQDL"]group_id=>"logstash-group"consumer_threads=>3codec=>"json"}}sysloginput{syslog{port=>12345codec=>cefsyslog_field=>"syslog"gro
  • springboot集成Kafka Maruko310 javaKafkakafkaspringbootjava
    yml配置如果下游的数据处理不及时，可以提高每批次拉取的数量，配置时不仅要设置max-poll-records属性（批量消费最大数量），也要将type设置为batch（默认single（单条），batch（批量）），不然会报类型无法转换的错误。kafka:#kafka的连接地址（注意，是kafka所在服务器的公网ip，不要写成zookeeper的了）bootstrap-servers:localh
  • Kafka~Kafka命令行参数使用教程 飞Link 大数据kafkazookeeper分布式
    一、kafka-topics.sh1.参数参数描述–bootstrap-server连接的KafkaBroker主机名称和端口号–topic操作的topic名称–create创建主题–delete删除主题–alter修改主题–list查看所有主题–describe查看主题详细描述–partition设置分区数–replication-factor设置分区副本–config更新系统默认的配置2.实例
  • kafka ---- producer与broker配置详解以及ack机制详解 husterlichf #kafkakafkajava分布式
    一、producer配置1、bootstrap.serverskafkabroker集群的ip列表，格式为：host1:port1,host2:port2,…2、client.id用于追踪消息的源头3、retries当发送失败时客户端会进行重试，重试的次数由retries指定，默认值是2147483647，即Integer.MAX_VALUE；在重试次数耗尽和delivery.timeout.ms
  • 前端框架大盘点 HITZXL 前端开发#VUE前端框架前端javascript
    最近项目中用到了很多前后端分离的框架。很多框架虽然类似，但项目中却总用混用的情况，看到陌生的框架，总是一头雾水，干脆来个大盘点。一扫心中困惑。目前对于前端的各种技术，还有很多理解不到的地方。例如前端框架，前端组件，UI库，这些总感觉有些傻傻分不清楚。毕竟都是用来协助项目快速开发和上手的，因此，看到了别人的总结，感觉清晰明了。放在这里压住阵脚：css框架：Bootstrap、Layui、Zui、Am
  • Bootstrap 按钮（实例 ） 2401_84093443 程序员bootstrap前端javascript
    默认大小的原始按钮默认大小的按钮小的原始按钮小的按钮特别小的原始按钮特别小的按钮块级的原始按钮块级的按钮按钮状态Bootstrap提供了激活、禁用等按钮状态的class，下面将进行详细讲解。激活状态按钮在激活时将呈现为被按压的外观（深色的背景、深色的边框、阴影）。下表列出了让按钮元素和锚元素呈激活状态的class：下面的实例演示了这点：Bootstrap实例-按钮激活状态默认按钮激活按钮原始按钮激
  • Spring Cloud 系列五《Nacos+gateway（配置中心+网关）》 哈叮 微服务springcloudspringspringbootjava
    0、前言上篇已经集成Nacos，本篇把网关（SpringCloudGateway）加上1、代码截图代码是在上篇基础上修改的，有些重叠的就不贴代码了。2、Common增加了一个通用服务，主要用来引入通用包pom：注意openfeign，loadbalancer，bootstrap，都是不可获取的。com.alibaba.cloudspring-cloud-starter-alibaba-nacos-
  • Bootstrap - 表单 廖马儿
    Bootstrap给HTML大部分表单都设置了默认样式，我们可以给表单添加相应类名，以实现表单的水平排列，个性化定制等。代码：这是一个输入框:这是一个输入框:北京北京北京这是一个输入框:效果：图片.pngclass:对标签添加：class="form-inline"可以让它水平排列：图片.png对Input设置大小可以添加class：input-sminput-lg应该使用form-group设置
  • vue.js项目实战案例源码 前端码趣逗士 vue.js
    案例一：博客系统项目概述：一个简单的博客系统，包括文章列表展示、文章详情查看、分类筛选、用户登录注册等功能。技术栈：Vue.jsVueRouterVuexAxiosBootstrap主要功能实现：文章列表展示：使用Axios从后端API获取文章列表数据。在Vue组件中展示文章标题、摘要和发布日期等信息。博客文章列表{{article.title}}{{article.summary}}{{arti
  • python ImportError: No module named requests 陈桐Caliburn
    curlhttps://bootstrap.pypa.io/get-pip.py-oget-pip.pypythonget-pip.pypipinstallrequests
  • Java反射机制思维导图(全） ZHANGJINTAO_ java反射设计模式
    Java反射机制思维导图(全）类加载器概述当我们的程序在运行后，第一次使用某个类的时候，会将此类的class文件读取到内存，并将此类的所有信息存储到一个Class对象中，类加载器就是是负责将磁盘上的某个class文件读取到内存并生成Class的对象的。分类启动/引导类加载器(BootstrapClassLoader)：用于加载系统类库扩展类加载器(ExtensionClassLoader)：用于加
  • 多线程编程之卫生间 周凡杨 java并发卫生间线程厕所
    如大家所知，火车上车厢的卫生间很小，每次只能容纳一个人，一个车厢只有一个卫生间，这个卫生间会被多个人同时使用，在实际使用时，当一个人进入卫生间时则会把卫生间锁上，等出来时打开门，下一个人进去把门锁上，如果有一个人在卫生间内部则别人的人发现门是锁的则只能在外面等待。问题分析：首先问题中有两个实体，一个是人，一个是厕所，所以设计程序时就可以设计两个类。人是多数的，厕所只有一个（暂且模拟的是一个车厢）。
  • How to Install GUI to Centos Minimal sunjing linuxInstallDesktopGUI
    http://www.namhuy.net/475/how-to-install-gui-to-centos-minimal.html   I have centos 6.3 minimal running as web server. I’m looking to install gui to my server to vnc to my server. You can insta
  • Shell 函数 daizj shell函数
    Shell 函数 linux shell 可以用户定义函数，然后在shell脚本中可以随便调用。 shell中函数的定义格式如下： [function] funname [()]{ action; [return int;] } 说明： 1、可以带function fun() 定义，也可以直接fun() 定义,不带任何参数。 2、参数返回
  • Linux服务器新手操作之一 周凡杨 Linux 简单 操作
    1.whoami      当一个用户登录Linux系统之后，也许他想知道自己是发哪个用户登录的。      此时可以使用whoami命令。      [ecuser@HA5-DZ05 ~]$ whoami       e
  • 浅谈Socket通信（一） 朱辉辉33 socket
    在java中ServerSocket用于服务器端，用来监听端口。通过服务器监听，客户端发送请求，双方建立链接后才能通信。当服务器和客户端建立链接后，两边都会产生一个Socket实例，我们可以通过操作Socket来建立通信。    首先我建立一个ServerSocket对象。当然要导入java.net.ServerSocket包    ServerSock
  • 关于框架的简单认识 西蜀石兰 框架
    入职两个月多，依然是一个不会写代码的小白，每天的工作就是看代码，写wiki。 前端接触CSS、HTML、JS等语言，一直在用的CS模型，自然免不了数据库的链接及使用，真心涉及框架，项目中用到的BootStrap算一个吧，哦，JQuery只能算半个框架吧，我更觉得它是另外一种语言。 后台一直是纯Java代码，涉及的框架是Quzrtz和log4j。 都说学前端的要知道三大框架，目前node.
  • You have an error in your SQL syntax; check the manual that corresponds to your 林鹤霄
    You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'option,changed_ids  ) values('0ac91f167f754c8cbac00e9e3dc372
  • MySQL5.6的my.ini配置 aigo mysql
    注意：以下配置的服务器硬件是：8核16G内存    [client]   port=3306   [mysql]   default-character-set=utf8     [mysqld]   port=3306   basedir=D:/mysql-5.6.21-win
  • mysql 全文模糊查找 便捷解决方案 alxw4616 mysql
    mysql 全文模糊查找 便捷解决方案 2013/6/14 by 半仙 [email protected] 目的: 项目需求实现模糊查找. 原则: 查询不能超过 1秒. 问题: 目标表中有超过1千万条记录. 使用like '%str%' 进行模糊查询无法达到性能需求. 解决方案: 使用mysql全文索引. 1.全文索引 : MySQL支持全文索引和搜索功能。MySQL中的全文索
  • 自定义数据结构 链表(单项 ,双向,环形) 百合不是茶 单项链表双向链表
         链表与动态数组的实现方式差不多,    数组适合快速删除某个元素    链表则可以快速的保存数组并且可以是不连续的       单项链表;数据从第一个指向最后一个   实现代码:        //定义动态链表 clas
  • threadLocal实例 bijian1013 javathreadjava多线程threadLocal
    实例1： package com.bijian.thread; public class MyThread extends Thread { private static ThreadLocal tl = new ThreadLocal() { protected synchronized Object initialValue() { return new Inte
  • activemq安全设置—设置admin的用户名和密码 bijian1013 javaactivemq
            ActiveMQ使用的是jetty服务器, 打开conf/jetty.xml文件，找到 <bean id="adminSecurityConstraint" class="org.eclipse.jetty.util.security.Constraint"> <p
  • 【Java范型一】Java范型详解之范型集合和自定义范型类 bit1129 java
    本文详细介绍Java的范型，写一篇关于范型的博客原因有两个，前几天要写个范型方法(返回值根据传入的类型而定)，竟然想了半天，最后还是从网上找了个范型方法的写法；再者，前一段时间在看Gson, Gson这个JSON包的精华就在于对范型的优雅简单的处理，看它的源代码就比较迷糊，只其然不知其所以然。所以，还是花点时间系统的整理总结下范型吧。   范型内容 范型集合类 范型类
  • 【HBase十二】HFile存储的是一个列族的数据 bit1129 hbase
    在HBase中，每个HFile存储的是一个表中一个列族的数据，也就是说，当一个表中有多个列簇时，针对每个列簇插入数据，最后产生的数据是多个HFile，每个对应一个列族，通过如下操作验证   1. 建立一个有两个列族的表   create 'members','colfam1','colfam2'   2. 在members表中的colfam1中插入50*5
  • Nginx 官方一个配置实例 ronin47 nginx 配置实例
    user www www; worker_processes 5; error_log logs/error.log; pid logs/nginx.pid; worker_rlimit_nofile 8192; events { worker_connections 4096;} http { include conf/mim
  • java-15.输入一颗二元查找树，将该树转换为它的镜像， 即在转换后的二元查找树中，左子树的结点都大于右子树的结点。 用递归和循环 bylijinnan java
    //use recursion public static void mirrorHelp1(Node node){ if(node==null)return; swapChild(node); mirrorHelp1(node.getLeft()); mirrorHelp1(node.getRight()); } //use no recursion bu
  • 返回null还是empty bylijinnan javaapachespring编程
    第一个问题，函数是应当返回null还是长度为0的数组（或集合）？ 第二个问题，函数输入参数不当时，是异常还是返回null？ 先看第一个问题 有两个约定我觉得应当遵守： 1.返回零长度的数组或集合而不是null（详见《Effective Java》） 理由就是，如果返回empty，就可以少了很多not-null判断： List<Person> list
  • [科技与项目]工作流厂商的战略机遇期 comsci 工作流
          在新的战略平衡形成之前，这里有一个短暂的战略机遇期，只有大概最短6年，最长14年的时间，这段时间就好像我们森林里面的小动物，在秋天中，必须抓紧一切时间存储坚果一样，否则无法熬过漫长的冬季。。。。         在微软，甲骨文，谷歌，IBM,SONY
  • 过度设计-举例 cuityang 过度设计
    过度设计，需要更多设计时间和测试成本，如无必要，还是尽量简洁一些好。 未来的事情，比如 访问量，比如数据库的容量，比如是否需要改成分布式  都是无法预料的 再举一个例子，对闰年的判断逻辑： 　　1、 if($Year%4==0) return True; else return Fasle; 　　2、if (   ($Year%4==0  &am
  • java进阶，《Java性能优化权威指南》试读 darkblue086 java性能优化
    记得当年随意读了微软出版社的.NET 2.0应用程序调试，才发现调试器如此强大，应用程序开发调试其实真的简单了很多，不仅仅是因为里面介绍了很多调试器工具的使用，更是因为里面寻找问题并重现问题的思想让我震撼，时隔多年，Java已经如日中天，成为许多大型企业应用的首选，而今天，这本《Java性能优化权威指南》让我再次找到了这种感觉，从不经意的开发过程让我刮目相看，原来性能调优不是简单地看看热点在哪里，
  • 网络学习笔记初识OSI七层模型与TCP协议 dcj3sjt126com 学习笔记
      协议：在计算机网络中通信各方面所达成的、共同遵守和执行的一系列约定 　　计算机网络的体系结构：计算机网络的层次结构和各层协议的集合。 　　两类服务： 　　面向连接的服务通信双方在通信之前先建立某种状态，并在通信过程中维持这种状态的变化，同时为服务对象预先分配一定的资源。这种服务叫做面向连接的服务。 　　面向无连接的服务通信双方在通信前后不建立和维持状态，不为服务对象
  • mac中用命令行运行mysql dcj3sjt126com mysqllinuxmac
    参考这篇博客：http://www.cnblogs.com/macro-cheng/archive/2011/10/25/mysql-001.html  感觉workbench不好用（有点先入为主了）。 1，安装mysql 在mysql的官方网站下载 mysql 5.5.23 http://www.mysql.com/downloads/mysql/，根据我的机器的配置情况选择了64
  • MongDB查询（1）——基本查询[五] eksliang mongodbmongodb 查询mongodb find
    MongDB查询 转载请出自出处：http://eksliang.iteye.com/blog/2174452 一、find简介 MongoDB中使用find来进行查询。 API:如下 function ( query , fields , limit , skip, batchSize, options ){.....}  参数含义： query:查询参数 fie
  • base64，加密解密 经融加密，对接 y806839048 经融加密对接
    String data0 = new String(Base64.encode(bo.getPaymentResult().getBytes(("GBK")))); String data1 = new String(Base64.decode(data0.toCharArray()),"GBK"); // 注意编码格式，注意用于加密，解密的要是同
  • JavaWeb之JSP概述 ihuning javaweb
      什么是JSP？为什么使用JSP？ JSP表示Java Server Page，即嵌有Java代码的HTML页面。使用JSP是因为在HTML中嵌入Java代码比在Java代码中拼接字符串更容易、更方便和更高效。   JSP起源    在很多动态网页中，绝大部分内容都是固定不变的，只有局部内容需要动态产生和改变。  如果使用Servl
  • apple watch 指南 啸笑天 apple
    1. 文档 WatchKit Programming Guide（中译在线版 By @CocoaChina） 译文 译者 原文 概览 - 开始为 Apple Watch 进行开发 @星夜暮晨 Overview - Developing for Apple Watch 概览 - 配置 Xcode 项目 - Overview - Configuring Yo
  • java经典的基础题目 macroli java编程
    1.列举出 10个JAVA语言的优势 a:免费，开源，跨平台(平台独立性)，简单易用，功能完善，面向对象，健壮性，多线程，结构中立，企业应用的成熟平台, 无线应用 2.列举出JAVA中10个面向对象编程的术语 a:包，类，接口，对象，属性，方法，构造器，继承，封装，多态，抽象，范型 3.列举出JAVA中6个比较常用的包 Java.lang;java.util;java.io;java.sql;ja
  • 你所不知道神奇的js replace正则表达式 qiaolevip 每天进步一点点学习永无止境纵观千象regex
    var v = 'C9CFBAA3CAD0'; console.log(v); var arr = v.split(''); for (var i = 0; i < arr.length; i ++) { if (i % 2 == 0) arr[i] = '%' + arr[i]; } console.log(arr.join('')); console.log(v.r
  • [一起学Hive]之十五-分析Hive表和分区的统计信息(Statistics) superlxw1234 hivehive分析表hive统计信息hive Statistics
    关键字：Hive统计信息、分析Hive表、Hive Statistics   类似于Oracle的分析表，Hive中也提供了分析表和分区的功能，通过自动和手动分析Hive表，将Hive表的一些统计信息存储到元数据中。   表和分区的统计信息主要包括：行数、文件数、原始数据大小、所占存储大小、最后一次操作时间等；   14.1 新表的统计信息 对于一个新创建
  • Spring Boot 1.2.5 发布 wiselyman spring boot
        Spring Boot 1.2.5已在7月2日发布，现在可以从spring的maven库和maven中心库下载。   这个版本是一个维护的发布版，主要是一些修复以及将Spring的依赖提升至4.1.7(包含重要的安全修复)。   官方建议所有的Spring Boot用户升级这个版本。   项目首页 | 源
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他