Bootstrap的全局css样式部分

Bootstrap的栅格系统:api

 

1.ide

为了合适的排列与内补,行(row)写在.container或者.container-fluid中;布局

在手机上(超小屏幕<768px:老是水平排列的, .container最大宽度自动,类前缀是.col-xs-,最大列宽(column)自动;优化

在平板上(小屏幕>=768px:开始是堆叠,当大于阙值是为水平排列;.container最大宽度750px;类前缀是.col-sm-;最大列宽62pxui

在桌面显示器上(中等屏幕>=992xp:开始是堆叠,当大于阙值是为水平排列;.container最大宽度970px;类前缀是.col-md-;最大列宽81pxthis

在大桌面显示器(大屏幕>=1200px:开始是堆叠,当大于阙值是为水平排列;.container最大宽度1170px;类前缀是.col-lg-;最大列宽97pxspa

 

示例:3d

<div class="row">orm

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

  <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><div class="row">

  <div class="col-md-8">.col-md-8</div>

  <div class="col-md-4">.col-md-4</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-6">.col-md-6</div>

  <div class="col-md-6">.col-md-6</div></div>

当大屏幕时:

 

 

 

当小屏幕时:

 

 

 

 

 

2.

流式布局:将最外面的包裹div类名.container修改成.container-fluid;就能将固定的栅格布局转换为100%宽度布局;

 

3.

使用.col-xs-.col-md-;能够针对超小屏幕与中等屏幕设备不让列堆叠在一块儿;

 

4.

列偏移:

使用类名.col-md-offset-*能够将列向右偏移,经过*选择器为当前的元素增长了左边距(margin);

 

示例:

<div class="row">

  <div class="col-md-4">.col-md-4</div>

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

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

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

  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div></div>

 

 

 

 

 

 

5.列排序:

使用类名.col-md-push-*.col-md-pull-* 改变列(column)的顺序;

 

示例:

<div class="row">

  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>

  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div></div>

 

 

 

 

排版:

1.

除了正常的标题标签h1--h6;还有类名.h1--.h6;样式与标题标签一致;

 

2.

Bootstrap将全局font-size设置为14pxline-height设置为1.428p标签还设置了10px的底部外边距(margin);能够添加类名.lead让段落突出显示;额外插入的文本使用标签<ins>;带下划线使用<u>标签;小号文本使用small标签,也可添加类名.small代替small标签;

 

3.

使用类名.text-left.text-center.text-right.text-justify.text-nowrap将文字从新对齐;

示例:

<p class="text-left">Left aligned text.</p>

<p class="text-center">Center aligned text.</p>

<p class="text-right">Right aligned text.</p>

<p class="text-justify">Justified text.</p>

<p class="text-nowrap">No wrap text.</p>

 

 

 

 

 

使用类名.text-lowercase.text-uppercase.text-capotalize改变文本的大小写;

 

 

示例:

<p class="text-lowercase">Lowercased text.</p>

<p class="text-uppercase">Uppercased text.</p>

<p class="text-capitalize">Capitalized text.</p>

 

 

 

 

4.

缩略语:使用标签abbr能够设置把鼠标悬停在缩略语上显示完整内容;须要为abbr设置title属性;首字母缩略语:添加类名.initialism ,可让font-size变得稍微小一些;

 

5.

列表:添加类名.dl-horizontal可让标题与描述排列在一行;

 

示例:

<dl class="dl-horizontal">

  <dt>...</dt>

  <dd>...</dd>

</dl>

 

 

 

 

 

表格:

为表格标签添加类名.table能够为其赋予基本的样式,例如少许的padding和水平方向的分割线;

1.

经过添加类名.table-striped能够给tbody标签以内的每行添加斑马条纹样式;可是这个功能不支持ie8

示例:

<table class="table table-striped">
    <thead>
    <tr>
        <th>表一</th>
        <th>表二</th>
        <th>表三</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>内容1</td>
        <td>内容一</td>
        <td>内容一</td>
    </tr>
    <tr>
        <td>内容二</td>
        <td>内容二</td>
        <td>内容二</td>
    </tr>
    <tr>
        <td>内容三</td>
        <td>内容三</td>
        <td>内容三</td>
    </tr>
    </tbody>

</table>

 

 

 

 

 

 

添加类名.table-bordered能够给表格和其中的每一个单元格添加边框;

 

示例:

 

 

 

添加类名.table-hover可让每一行对鼠标悬停状态作出响应;

添加类名.table-condensed可让表格更加紧凑,单元格中的内部padding均会减半;

 

2.状态类

经过添加类名为行或单元格添加颜色;

.active:鼠标悬停在行或单元格上时所设置的颜色;

.success:标示成功或积极的动做;

.info:标示普通的提示信息或动做;

.warning;标示警告或须要用户注意;

.danger;标示危险或潜在的带来负面影响的动做;

 

3.响应式表格;

将表格.table元素包裹在.table-responsive元素内,便可建立响应式表格,会在小屏幕上(小于768px)水平滚动,当屏幕大于768px宽度时,水平滚动条消失;

 

 

表单:

1.全部设置了.form-control类的inputtextareaselect元素都将有默认属性宽为100%;

lable元素和前面提到的控件包裹在.form-ground中能够得到最好的排列;

示例:

<form role="form">

  <div class="form-group">

    <label for="exampleInputEmail1">Email address</label>

    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">

  </div>

  <div class="form-group">

    <label for="exampleInputPassword1">Password</label>

    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">

  </div>

  <div class="form-group">

    <label for="exampleInputFile">File input</label>

    <input type="file" id="exampleInputFile">

    <p class="help-block">Example block-level help text here.</p>

  </div>

  <div class="checkbox">

    <label>

      <input type="checkbox"> Check me out

    </label>

  </div>

  <button type="submit" class="btn btn-default">Submit</button></form>

 

 

 

 

内联表单:

form元素添加.form-inline类可使其内容左对齐而且表现为inline-block级别的控件,可是只适用于(viewport)至少在768px宽度时(宽度在小会使表单折叠);

须要手动设置宽度:在内联表单将输入框和单选/多选框控件默认宽度设置为widthauto,所以,多个控件能够排列在同一行。根据需求可能须要一些额外的定制优化组件;

必定要添加lable标签:若是不加屏幕阅读器将没法识别,对于内联表单,可经过lable设置

.sr-only类隐藏;

 

示例:

<form class="form-inline" role="form">

  <div class="form-group">

    <label class="sr-only" for="exampleInputEmail2">Email address</label>

    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">

  </div>

  <div class="form-group">

    <div class="input-group">

      <div class="input-group-addon">@</div>

      <input class="form-control" type="email" placeholder="Enter email">

    </div>

  </div>

  <div class="form-group">

    <label class="sr-only" for="exampleInputPassword2">Password</label>

    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">

  </div>

  <div class="checkbox">

    <label>

      <input type="checkbox"> Remember me

    </label>

  </div>

  <button type="submit" class="btn btn-default">Sign in</button></form>

 

 

 

 

水平列表的表单:

为表单添加类名.form-horizontal,;

 

示例:

<form class="form-horizontal" role="form">

  <div class="form-group">

    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>

    <div class="col-sm-10">

      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">

    </div>

  </div>

  <div class="form-group">

    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>

    <div class="col-sm-10">

      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">

    </div>

  </div>

  <div class="form-group">

    <div class="col-sm-offset-2 col-sm-10">

      <div class="checkbox">

        <label>

          <input type="checkbox"> Remember me

        </label>

      </div>

    </div>

  </div>

  <div class="form-group">

    <div class="col-sm-offset-2 col-sm-10">

      <button type="submit" class="btn btn-default">Sign in</button>

    </div>

  </div></form>

 

 

 

 

若是须要在表单中将一行纯文本和label元素放置于同一行,为p元素添加.form-control-staticl类;

 

为输入框输入disabled属性能够防止用户输入,并能对外观作一些修改,使其更直观;

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

 

被禁用的fieldset

fieldset设置disabled属性,能够禁用包含的全部控件;(可是a标签的链接功能不受影响);

<form role="form">

  <fieldset disabled>

    <div class="form-group">

      <label for="disabledTextInput">Disabled input</label>

      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">

    </div>

    <div class="form-group">

      <label for="disabledSelect">Disabled select menu</label>

      <select id="disabledSelect" class="form-control">

        <option>Disabled select</option>

      </select>

    </div>

    <div class="checkbox">

      <label>

        <input type="checkbox"> Can't check this

      </label>

    </div>

    <button type="submit" class="btn btn-primary">Submit</button>

  </fieldset></form>

 

 

 

为输入框设置readonly属性能够禁止用户输入,而且输入框的样式也是禁用状态;

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

 

控制尺寸:

经过.input-lg相似的类能够为控件设置高度,经过.col-lg-*相似的类能够为控件设置宽度;

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

<input class="form-control" type="text" placeholder="Default input">

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

<select class="form-control input-lg">...</select><select class="form-control">...</select>

<select class="form-control input-sm">...</select>

 

 

 

 

调整列(column)尺寸:

用栅格系统中的列包裹输入框或其任何父元素,都能设置宽度;

 

<div class="row">

  <div class="col-xs-2">

    <input type="text" class="form-control" placeholder=".col-xs-2">

  </div>

  <div class="col-xs-3">

    <input type="text" class="form-control" placeholder=".col-xs-3">

  </div>

  <div class="col-xs-4">

    <input type="text" class="form-control" placeholder=".col-xs-4">

  </div>

</div>

 

 

 

 

 

 

 

按钮:

 

<!-- Standard button -->

<button type="button" class="btn btn-default">Default</button>

 

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->

<button type="button" class="btn btn-primary">Primary</button>

 

<!-- Indicates a successful or positive action -->

<button type="button" class="btn btn-success">Success</button>

 

<!-- Contextual button for informational alert messages -->

<button type="button" class="btn btn-info">Info</button>

 

<!-- Indicates caution should be taken with this action -->

<button type="button" class="btn btn-warning">Warning</button>

 

<!-- Indicates a dangerous or potentially negative action -->

<button type="button" class="btn btn-danger">Danger</button>

 

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->

<button type="button" class="btn btn-link">Link</button>

 

 

 

 

 

咱们能够同过类名:.btn-lg.btn-sm.btn-xs得到不一样尺寸的按钮;

 

 

 

禁用状态

经过为按钮的背景设置 opacity 属性就能够呈现出没法点击的效果。

 

button 元素

<button> 元素添加 disabled 属性,使其表现出禁用状态。

 

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>

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

Ps:ie9及更低版本中按钮会是灰色并带有阴影,目前没法解决;

 

图片:

响应式图片:

添加类名.img-responsive可让图片支持响应式布局;

Ps

Internet Explorer 8-10 中,设置为 .img-responsive SVG 图像显示出的尺寸不匀称。为了解决这个问题,在出问题的地方添加 width: 100% \9; 便可。Bootstrap 并无自动为全部图像元素设置这一属性,由于这会致使其余图像格式出现错乱。

 

改变图片形状:

 

<img src="..." alt="..." class="img-rounded">

<img src="..." alt="..." class="img-circle">

<img src="..." alt="..." class="img-thumbnail">

 

 

 

 

 

 

快速浮动:

向左浮动或向右浮动须要添加类名pull-leftpull-right

<div class="pull-left">...</div>

<div class="pull-right">...</div>

相关文章
相关标签/搜索