bootstrap前端框架使用总括分享

1、bootstrap 排版

大局样式style.css:

1、移除body的margin声明

2、设置body的背景观为白色

3、为排版设置了焦点的书体、字号和行高

4、设置全局链接颜色,且当链接处于悬浮“:hover”状态时才会呈现下划线样式

标题 h1-h6

HTML 中的所有标题标签,

均可利用。其它,还提供了 .h1 到 .h6 类选取器,为的是给内联(inline)属性的文件赋予标题的体裁。

1、重新设置了margin-top和margin-bottom的值

2、h1~h3重置后的值都是20px;h4~h6重置后的值都是10px

3、所有题目标行高都是1.1(也就是font-size的1.1倍),而且文本颜色和字体都延续父元素的水彩和字体

4、固定不相同级别标题字体大小,h1=36px,h2=30px,h3=24px,h4=18px,h5=14px和h6=12px

在标题内仍能分包 标签或予以 .small 类的因素,可以用来标记副标题。

<h2>Bootstrap heading <small>Secondary Text</small></h2>

Bootstrap heading <small style=”color:gray;”> Secondary text</small>

p 标签

(段落)元素还被装置底部外边距(margin)10px。

    Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

经过添加 .lead 类可以让段落非凡浮现。
<pre style=”font-size:21px;font-family:宋体”>
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Nullam id dolor id nibh ultricies vehicula.
</pre>

强调内容的标签

<lead>一般同盟段落标签使用

 

 

 

强调相关的类

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

文本对齐风格

text-left:   左对齐
text-center: 居中对齐
text-right:  右对齐
text-justify:两端对齐

列表

1、ul 、 ol <span style=”color:red;”>去序列</span>:

class=“list-unstyled“

2、ul 、 ol <span
style=”color:red;”>水平排列</span>(把垂直列表换成水平列表,而且去掉项目标志(编号),保持水平显得)

class=“list-inline”

3、dl水平列表(显示屏大于768px的时候,添加类名“.dl-horizontal”才具备水平定义列表效果)

class=“dl-horizontal”

图片

使用方法格外简单,只须求在

 

标签上加上对应的类名
img-responsive:响应式图片,紧要针对于响应式设计

img-rounded:   圆角图片
img-circle:    圆形图片
img-thumbnail: 缩略图片

温馨入手添加并查六柱预测应的效劳呢~ ~ ~

bootstrap图标

Bootstrap框架中也为大家提供了近200个分裂的icon图片,而这几个图标都是应用CSS3的@font-face属性合作字体来落到实处的icon效果。

其余行级元素都得以,日常选择span标签做图标容器

<span
style=”color:blue;”>可登陆bootstrap网站查看http://v3.bootcss.com/components/#thumbnails<span>

用法很简短,只需将图标下的英文复制粘贴到class里即可:

图片 1

2、bootstrap-表格

基础实例

<table class="table"></table>

图片 2

条纹状表格

由此 .table-striped 类可以给 <tbody>
之内的每一行增添斑马条纹样式。

条纹状表格是凭借 :nth-child CSS 拔取器完毕的,而这一效率不被 Internet
Explorer 8 支持。

图片 3

带边框的表格

丰裕 .table-bordered 类为表格和中间的每个单元格扩大边框。

图片 4

鼠标悬停

通过抬高 .table-hover 类可以让 <tbody>
中的每一行对鼠标悬停状态作出响应。

压缩表格

经过丰裕 .table-condensed
类可以让表格越发严酷,单元格中的内补(padding)均会扣除。

图片 5

状态类

经过那几个处境类可以为行或单元格设置颜色。

Class 描述

.active        鼠标悬停在行或单元格上时所设置的颜色
.success    标识成功或积极的动作
.info        标识普通的提示信息或动作
.warning    标识警告或需要用户注意
.danger        标识危险或潜在的带来负面影响的动作

响应式表格

将别的 .table 元素包裹在 .table-responsive
元素内,即可创造响应式表格,其会在小显示器设备上(小于768px)水平滚动。当荧屏大于
768px 宽度时,水平滚动条消失。

<div class="table-responsive">
      <table class="table">
     ...
      </table>
</div>

3、bootstrap表单

骨干实例

独自的表单控件会被电动赋予一些大局样式。所有安装了 .form-control类的 <input><textarea> 和 <select> 元素都将被默许设置宽度属性为
width: 100%;。
将 label 元素和前边提到的控件包裹在 .form-group中得以获取最好的排列。

<form role="form">告诉辅助设备(如屏幕阅读器)这个元素所扮演的角色是个表单</form>

<form role="button">告诉设备,这是个按钮,可以点击。本质上是增强语义性,增强组件的可访问性、可用性</form>

不要将表单组合输入框组混合使用,提出将输入框组嵌套到表单组中应用。

<form>
      <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
             <input type="email" class="form-control" id="exampleInputEmail1" placeholder="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 class="form-inline">
      <div class="form-group">
            <label for="exampleInputName2">Name</label>
            <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
      </div>
      <div class="form-group">
            <label for="exampleInputEmail2">Email</label>
            <input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
      </div>
     <button type="submit" class="btn btn-default">Send invitation</button>
</form>

水平排列的表单

透过为表单添加 .form-horizontal 类,并协同利用 Bootstrap
预置的栅格类,可以将 label
标签和控件组水平并排布局。那样做将改成 .form-group 的行事,使其展现为栅格系统中的行(row),由此就无需再附加添加
.row 了。

单选和多选框

多选框(checkbox)用来接纳列表中的一个或多少个选项,而单选框(radio)用于从多少个选取中只选用一个。

设置了disabled质量的单选或多选框都能被赋予合适的体裁。对于和多选或单选框联合利用的
<label>
标签,若是也盼望将终止于上方的鼠标设置为“禁止点击”的体裁,请将 .disabled
类赋予 .radio、.radio-inline、.checkbox、.checkbox-inline 或 <fieldset>。

多选框:

<div class="checkbox">
      <label>
          <input type="checkbox" value="">
        Option one is this and that—be sure to include why it's great
       </label>
</div>
<div class="checkbox disabled">
      <label>
            <input type="checkbox" value="" disabled>
            Option two is disabled
      </label>
</div>

单选框:

<div class="radio">
      <label>
            <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
        Option two can be something else and selecting it will deselect option one
      </label>
</div>
<div class="radio disabled">
      <label>
            <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
            Option three is disabled
      </label>
</div>

经过将 .checkbox-inline 或 .radio-inline
类应用到一多级的多选框(checkbox)或单选框(radio)控件上,能够使那么些控件排列在一行。

参考博文:bootstrap框架怎么用?

相关文章