Bootstrap学习-排版-表单

水平显得

表单指示文字.help-block

.radio

<div class=”checkbox”>
    <label>
      <input type=”checkbox” value=””>
      QQQ
    </label>
  </div>

.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none;
}
.list-inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}

  <small>副标题</small>

<ul class=”list-inline”>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

    <div class=”form-group”>
        <label class=”radio-inline”>
            <input type=”radio” value=”mazey” name=”mazey”>男性
        </label>
        <label class=”radio-inline”>
            <input type=”radio” value=”mazey” name=”mazey”>中性
        </label>
        <label class=”radio-inline”>
            <input type=”radio” value=”mazey” name=”mazey”>女性
        </label>
    </div>

.table-bordered:带边框的报表

十 、列表去点 .list-unstyled

.checkbox

p { margin: 0 0 10px; }

7、斜体<i><em>

当按钮处理正在点击状态(约等于鼠标按下的未甩手的动静),对于<button>成分是经过“:active”伪类完结,而对于<a>那样的价签元素则是由此抬高类名“.active”来贯彻。

disabled=”disabled” 用类禁用只怕有禁用样式,但并未禁用效果,照旧得以点。

八 、字体颜色

<h1>~<h6>,全数标题的行高都以1.1(相当于font-size的1.1倍)。

  • .text-muted:提醒,使用浅草地绿(#999)
  • .text-primary:紧要,使用孔雀蓝(#428bca)
  • .text-success:成功,使用月光蓝(#3c763d)
  • .text-info:通告新闻,使用樱土银色(#31708f)
  • .text-warning:警告,使用棕色类(#8a6d3b)
  • .text-danger:危险,使用血牙红(#a94442)

可以用在a,span,div等标签中。

一 、input-sm:让控件比正规尺寸更小
② 、input-lg:让控件比正规尺寸更大

</h1>

.table-condensed:紧密型表格

b,strong {
  font-weight: bold; /*文本加粗*/
}

五 、强调样式 .lend

<dl>
    <dt>主题一</dt>
    <dd>内容一</dd>
    <dt>主题二</dt>
    <dd>内容二</dd>
</dl>

链接

突显勾号叉号要加.has-feedback

18、输入框input

1壹 、水平导航.list-inline

1七 、内联表单

Bootstrap 1

26、图像

输入类型 – email
email 输入类型用于应该包罗电邮地址的输入字段。
当提交表单时,会自行地对 email 字段的值举行表达。

.lead {
margin-bottom: 20px;
font-size: 16px;
font-weight: 200;
line-height: 1.4;
}

1玖 、复选框checkbox和单采用按钮radio

HTML <button> 标签的 type 属性
值 描述
submit 该按钮是交给按钮(除了 Internet
Explorer,该值是其余浏览器的默许值)。
button 该按钮是可点击的按钮(Internet Explorer 的默许值)。
reset 该按钮是重置按钮(清除表单数据)

 

<button class="btn btn-primary btn-lg" type="button">大型按钮.btn-lg</button>
<button class="btn btn-primary" type="button">正常按钮</button>
<button class="btn btn-primary btn-sm" type="button">小型按钮.btn-sm</button>
<button class="btn btn-primary btn-xs" type="button">超小型按钮.btn-xs</button>

2二 、按钮样式

1、标题

  <div class=”form-group has-success has-feedback”>
      <label class=”control-label”
for=”qqq”>E-Mail地址</label>
      <input type=”text” class=”form-control” id=”qqq”
placeholder=”qqq”>
Bootstrap,      <span class=”glyphicon glyphicon-remove
form-control-feedback”></span>
  </div>

  <div class=”form-group has-error has-feedback”>
    <label class=”control-label”
for=”inputError1″>错误状态</label>
    <input type=”text” class=”form-control” id=”inputError1″
placeholder=”错误状态”>
    <span class=”help-block”>你输入的新闻是荒谬的</span>
    <span class=”glyphicon glyphicon-remove
form-control-feedback”></span>  
  </div>

1、img-responsive:响应式图片,主要针对于响应式设计
2、img-rounded:圆角图形
3、img-circle:圆形图片
4、img-thumbnail:缩略图片

1四 、表格样式

3、Body样式

此间说的图标就是Web制作中常看到的小icon图标,可以说那几个小icon图标是二个美丽Web中不得缺失的一有的,起到须要的效用。在Bootstrap框架中也为我们提供了近200个不等的icon图片,而那么些图标都以利用CSS3的@font-face属性同盟字体来兑现的icon效果。

6、粗体<b><strong>

2三 、按钮大小

body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}

还有Font Awesome字体。

2⑤ 、按钮状态

<h1>主标题

 

role是一个html5的质量,role=”form”告诉协助设备(如屏幕阅读器)那一个因素所扮演的角色是个表单

.form-horizontal

2四 、块状按钮

.table-responsive:响应式表格-小屏添加滚动条

禁用状态.disabled

  <div class=”radio”>
    <label>
      <input type=”radio” value=”love” checked>
      CCC
    </label>
  </div>

⑨ 、文字对齐方式

.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.text-center {
text-align: center;
}
.text-justify {
text-align: justify;
}

水平定义列表.dl-horizontal

2、副标题

.list-unstyled {
padding-left: 0;
list-style: none;
}

<em> <strong>
一般是显现给爬虫看的(偏重语义),<i><b>是显示给用户的(偏器重觉效果)。

.table-hover:鼠标悬停高亮的报表-能够与其余表格样式叠加使用

20、表单控件大小-仅改变中度

肆 、<p>,段落样式

1伍 、基础表单

报表背景颜色

鉴于体制没有对图片做大小上的体裁限制,所以在实质上选择的时候,须要通过其他的方式来处理图片大小。比如说控制图片容器大小。(注意不可以透过css样式直接改动img图片的大大小小,那样操作就不响应了)对于圆角图片和圆形图片效果,因为是行使了CSS3的圆角样式来落实的,所以注意对于IE8以及其以下版本不援救,是从未有过圆角效果的。

<div class="form-group">
  <label >QQQ</label>
  <input type="">
</div>

壹 、借使checkbox需求程度排列,只须求在label标签上添加类名“checkbox-inline”
贰 、如果radio须要程度排列,只需求在label标签上添加类名“radio-inline”

27、图标

1⑥ 、水平表单

1② 、定义列表

.btn-default

.btn-block 使按钮充满整个容器(父级元素)。

.btn

① 、.has-warning:警告状态(深黑)
二 、.has-error:错误状态(白灰)
③ 、.has-success:成功景观(青白)

   <button class=”btn” type=”button”>基础按钮.btn</button>
 
   <button class=”btn btn-default”
type=”button”>默许按钮.btn-default</button>
   <button class=”btn btn-primary”
type=”button”>紧要按钮.btn-primary</button>
   <button class=”btn btn-success”
type=”button”>成功按钮.btn-success</button>
   <button class=”btn btn-info”
type=”button”>信息按钮.btn-info</button>
   <button class=”btn btn-warning”
type=”button”>警告按钮.btn-warning</button>
   <button class=”btn btn-danger”
type=”button”>危险按钮.btn-danger</button>
   <button class=”btn btn-link”
type=”button”>链接按钮.btn-link</button>

<small>,行高都以1,影青(#999)

.table-striped:斑马线表格

2壹 、表单验证状态

1叁 、输入代码样式

.table:基础表格-不可缺失

    <span class=”glyphicon glyphicon-search”></span>
    <span class=”glyphicon glyphicon-asterisk”></span>
    <span class=”glyphicon glyphicon-plus”></span>
    <span class=”glyphicon glyphicon-cloud”></span>

定制图标网站:Link

(1)<code>:一般是本着于单个单词或单个句子的代码
(2)<pre>:一般是对准于多行代码(约等于成块的代码)
(3)<kbd>:一般是意味用户要由此键盘输入的故事情节

相关文章