bootstrap前端框架使用总计分享

1、bootstrap 排版

全局样式style.css:

1、移除body的margin声明

二、设置body的背景象为碧绿

3、为排版设置了着力的字体、字号和行高

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

标题 h1-h6

HTML 中的全数标题的签,

均可接纳。其余,还提供了 .h一 到 .h陆 类选取器,为的是给内联(inline)属性的文件赋予标题标样式。

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

2、h1~h三重置后的值都是20px;h4~h陆重置后的值都以十px

三、全体标题标行高都是一.壹(也等于font-size的一.一倍),而且文本颜色和字体都卫冕父元素的颜色和字体

肆、固定不一致级别标题字体大小,h一=3六px,h二=30px,h三=2四px,h四=18px,h5=1肆px和h六=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“

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

class=“list-inline”

叁、dl水平列表(荧屏大于76八px的时候,添加类名“.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;”>可登6bootstrap网址查看http://v3.bootcss.com/components/#thumbnails<span>

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

图片 1

2、bootstrap-表格

基本功实例

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

图片 2

条纹状表格

由此 .table-striped 类能够给 <tbody>
之内的每一行扩张斑马条纹样式。

条纹状表格是凭借 :nth-child CSS 选取器达成的,而那壹效果不被 Internet
Explorer 八 帮助。

图片 3

带边框的表格

添加 .table-bordered 类为表格和个中的各种单元格扩大边框。

图片 4

鼠标悬停

通过添加 .table-hover 类能够让 <tbody>
中的每1行对鼠标悬停状态作出响应。

缩短表格

透过添加 .table-condensed
类能够让表格特别紧密,单元格中的内补(padding)均会扣除。

图片 5

状态类

经过那一个意况类能够为行或单元格设置颜色。

Class 描述

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

响应式表格

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

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

3、bootstrap表单

主干实例

单独的表单控件会被机关赋予壹些大局样式。全数安装了 .form-control类的 <input><textarea> 和 <select> 成分都将被暗中同意设置宽度属性为
width: 百分之百;。
将 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
类应用到1多级的多选框(checkbox)或单选框(radio)控件上,能够使那几个控件排列在一行。

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

相关文章