关于css:Bootstrap-学习-排版-表单

36次阅读

共计 4788 个字符，预计需要花费 12 分钟才能阅读完成。

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

.list-inline {
    padding-left: 0;
    margin-left: -5px;
    list-style: none;
}

.list-inline > li {
    display: inline-block;
    padding-right: 5px;
    padding-left: 5px;
}
<ul class="list-inline">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

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：响应式表格 – 小屏增加滚动条

表格背景色彩

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 字体。

定制图标网站：https://www.runoob.com/try/demo_source/bootstrap-glyph-customization.htm

附录：

浏览原文：https://blog.mazey.net/1923.html

正文完
css
发表至： css
2021-02-20
 0
关于css:本节介绍css的背景属性以及应用效果
关于css:2023-告别-CSS-预处理工具彻底拥抱-TailwindCSS
文本显示多少行后面省略号
关于css:css伪类选择器踩坑