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框架怎么用?

相关文章