[布局] bootstrap基本标签总结

时间 2019-12-18

原文原文链接

文件头：css

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>基础表格</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>

bootstrap在reset.css文件中设置margin为0，所以其余的标签须要从新设计margin。html

1.hbootstrap

<h>标签和普通使用方法同样。框架

定义了.h1~.h6六个类名，样式和标题样式同样。布局

副标题用<small>标签指出，必须包含在h标签内。字体

<h1>Bootstrap标题一</h1>
<div class="h1">Bootstrap标题一</div>

<h1>Bootstrap标题一<small>我是副标题</small></h1>

2.pspa

定义<body>的字体库、字号、行高、颜色，<p>标签继承这些设置，单独设置margin-bottom为10px，使用方法同普通方法。设计

强调内容3d

增大：.lead; code

加粗：<strong>; <b>（设置font-weight: bold）

斜体：<em>;<i> （设置font-style: italic）

不变：<cite>

变小：<small>,.small

强调类（颜色）

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

文本对齐

（设置text-align：center、left、right、justify）

☑ .text-left：左对齐

☑ .text-center：居中对齐

☑ .text-right：右对齐

☑ .text-justify：两端对齐

3.列表（ul ol dl）

Bootstrap对于列表，只是在margin上作了一些调整

  margin-top: 0;
  margin-bottom: 10px;

去除项目符号

.list-unstyled

（padding-left: 0;
list-style: none;）

内联列表，制做水平导航

.list-inline

代码

<code> <pre> <kbd>

<pre class=“.pre-scrollable”> 设置最大代码区域

4.表格

千万注意，你的<table>元素中必定不能缺乏类名table

☑ .table：基础表格

☑ .table-striped：斑马线表格

☑ .table-bordered：带边框的表格

☑ .table-hover：鼠标悬停高亮的表格

☑ .table-condensed：紧凑型表格

☑ .table-responsive：响应式表格

<table class="table">
   <thead>
     <tr>
       <th>表格标题</th>
       <th>表格标题</th>
       <th>表格标题</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
     <tr>
       <td>表格单元格</td>
       <td>表格单元格</td>
       <td>表格单元格</td>
     </tr>
   </tbody>
 </table>

<tr>的不一样行颜色

<tbody>
    <tr class="active">
      <td>.active</td>
      <td>表示当前活动的信息</td>
    </tr>
    <tr class="success">
      <td>.success</td>
      <td>表示成功或者正确的行为</td>
    </tr>
    <tr class="info">
      <td >.info</td>
      <td>表示中立的信息或行为</td>
    </tr>
    <tr class="warning">
      <td>.warning</td>
      <td>表示警告，须要特别注意</td>
    </tr>
    <tr class="danger">
      <td>.danger</td>
      <td>表示危险或者多是错误的行为</td>
    </tr>
  </tbody>

5.表单

<form role=”form”>

默认垂直显示

用<div class=“form-group”>包围控件及其标签

对input select textarea设置.form-control

一、宽度变成了100%

二、设置了一个浅灰色（#ccc）的边框

三、具备4px的圆角

四、设置阴影效果，而且元素获得焦点之时，阴影和边框效果会有所变化

五、设置了placeholder的颜色为#999

水平风格表单：标签在左，控件在右

一、在<form>元素是使用类名“form-horizontal”。

二、配合Bootstrap框架的网格系统。（网格布局会在之后的章节中详细讲解）

内联表单 ：控件一行显示

在<form>元素中添加类名“form-inline”

表单控件

select：<select multiple class="form-control"> 选择多个

textarea： <textarea class="form-control" rows="3"></textarea>

radio，checkbox：div包着label包着input

<div class="checkbox">
    <label>
      <input type="checkbox" value="">
      记住密码
    </label>
  </div>

radio，checkbox：水平排列

div（class=”form-group”）包着label（class=”checkbox-inline”or“radio-inline”）包着input

禁用控件：在控件上添加disabled属性

验证状态：form-group容器添加has-success等类;若想label同步变色须要在label上加.control-label;显示icon须要在form-group加.has-feedback，最后加一个span存放icon

表单提示信息：

在form-group容器后加一个span，添加类名.help-block

button：四种方式，bootstrap用button实现，建议用button和a标签来制做按钮

button样式

.btn

.btn-default

大小：

.btn-lg

.btn-sm

.btn-xs

块状按钮：按钮充满整个容器，没有padding和margin .btn-block

禁用按钮：添加类.disabled 或者添加属性disabled=“disabled”

网格系统

分为12列，能够嵌套

 .col-md-offset-4 .col-md-4 .col-md-push-*  .col-md-pull-*

<div class="container">
  <div class="row">
    <div class="col-md-8">
      个人里面嵌套了一个网格
      <div class="row">
        <div class="col-md-6">col-md-6</div>
        <div class="col-md-6">col-md-6</div>
      </div>
    </div>
    <div class="col-md-4">col-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-8">
   
      <div class="row">
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
        <div class="col-md-4">col-md-4</div>
      </div>
    </div>
  </div>
</div>

1. [布局] bootstrap基本标签总结
2. bootstrap基本布局
3. 实现 Bootstrap 基本布局
4. {...formItemLayout} 标签布局
5. bootstrap基础布局
6. HTML基础标签总结
7. Bootstrap基本布局（container, row, col-xs-4）
8. css布局基础总结
9. 标签总结
10. html5标签总结
更多相关文章...
• Git 标签 - Git 教程
• SVN 标签（tag） - SVN 教程
• Kotlin学习（一）基本语法
• Kotlin学习（二）基本类型