Bootstrap学习-排版-表单

1、标题

<h1>~<h6>,所有题目的行高都是1.1(也尽管是font-size的1.1倍增)。

2、副标题

<small>,行高都是1,灰色(#999)

<h1>主标题

  <small>副标题</small>

</h1>

3、Body样式

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

4、<p>,段落样式

p { margin: 0 0 10px; }

5、强调样式 .lend

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

6、粗体<b><strong>

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

7、斜体<i><em>

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

8、字体颜色

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

9、文字对齐方式

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

10、列表去点 .list-unstyled

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

11、水平导航.list-inline

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

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

12、定义列表

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

水平定义列表.dl-horizontal

13、输入代码样式

(1)<code>:一般是对为单个单词或单个句子的代码
(2)<pre>:一般是针对为多行代码(也即是成块的代码)
(3)<kbd>:一般是表示用户只要经键盘输入的内容

14、表格样式

.table:基础表格-不可少

.table-striped:斑马线表格

.table-bordered:带边框的表格

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

.table-condensed:紧凑型表格

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

表背景颜色

图片 1

15、基础表单

role是一个html5的特性,role=”form”告诉辅助设备(如屏幕阅读器)这个因素所扮演的角色是独表单

16、水平表单

.form-horizontal

17、内联表单

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

18、输入框input

输入型 – email
email 输入型用于应包含电邮地址的输入字段。
当提交表单时,会活动地对准 email 字段的值进行认证。

19、复选框checkbox和单选择以钮radio

.checkbox

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

.radio

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

水平显得

    <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>

1、如果checkbox需要程度排列,只待在label标签上补偿加类名“checkbox-inline”
2、如果radio需要程度排列,只待在label标签上补偿加类名“radio-inline”

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

1、input-sm:让控件比正规尺寸更小
2、input-lg:让控件比正规尺寸更不行

21、表单验证状态

1、.has-warning:警告状态(黄色)
2、.has-error:错误状态(红色)
3、.has-success:成功状态(绿色)

显勾号叉号要加.has-feedback

  <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”>
      <span class=”glyphicon glyphicon-remove
form-control-feedback”></span>
  </div>

表单提示文字.help-block

  <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>

22、按钮样式

.btn

.btn-default

好就此当a,span,div等标签中。

   <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>

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

23、按钮大小

<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>

24、块状按钮

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

25、按钮状态

当按钮处理着点击状态(也就是鼠标按下之未松开的状态),对于<button>元素是透过“:active”伪类实现,而对此<a>这样的签元素虽然是经长类名“.active”来落实。

禁用状态.disabled

disabled=”disabled” 用类禁用可能发生禁用样式,但并未禁用效果,依然可触发。

26、图像

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

由于体制没有对准图纸做大小上的样式限制,所以于实际上应用的时光,需要通过其它的法子来处理图片大小。比如说控制图容器大小。(注意勿得以由此css样式直接修改img图片的分寸,这样操作就非响应了)对于圆角图片以及圆形图片效果,因为凡行使了CSS3的圆角样式来兑现的,所以注意对IE8以及那个以下版本不支持,是绝非圆角效果的。

27、图标

此间说之图标就是Web制作中时常看到底微icon图标,可以说这些多少icon图标是一个完美Web中不得缺失的一律有,起至必要之效能。在Bootstrap框架中为为大家提供了守200个例外的icon图片,而这些图标都是应用CSS3的@font-face属性配合字体来贯彻之icon效果。

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

还有Font Awesome字体。

定制图标网站:Link

 

链接

 

相关文章