Bootstrap3 CSS样式基本用法总结

深碍√TFBOYSˉ_ 2022-09-26 11:46 257阅读 0赞

## 按钮 ##

### a,input,button都可以设置为按钮 ###

a标签按钮

<a class="btn btn-default" href="#" role="button">a标签按钮</a>
            <input type="button" class="btn btn-default" value="input的button标签按钮" />
            <input type="submit" class="btn btn-default" value="input的submit标签按钮" />
            <button class="btn btn-default">button标签按钮</button>

### 预置样式 ###

<button class="btn btn-default">default样式</button>
            <button class="btn btn-primary">primary样式</button>
            <button class="btn btn-success">success样式</button>
            <button class="btn btn-info">info样式</button>
            <button class="btn btn-warning">warning样式</button>
            <button class="btn btn-danger">danger样式</button>
            <button class="btn btn-link">link样式</button>

### 按钮大小 ###

<button class="btn btn-info btn-lg">大按钮btn-lg</button>
            <button class="btn btn-info">默认按钮</button>
            <button class="btn btn-info btn-sm">小按钮btn-sm</button>
            <button class="btn btn-info btn-xs">超小按钮btn-xs</button>

### 块级按钮-btn-block ###

<button class="btn btn-success btn-block">块级按钮，与父元素等宽</button>
            <button class="btn btn-warning btn-lg btn-block">块级按钮，与父元素等宽</button>

### 禁用状态 class="disabled" ###

<button class="btn btn-success disabled">被禁用的按钮</button>

### 激活状态 class="active" ###

<button class="btn btn-success active">激活状态的按钮</button>

## 图片 ##

### 响应式图片-img-responsive ###

![20160220183602_329.png][]

### 图片的三种形状 ###

![20160220183604_364.jpg][] ![B7NJFb3.jpg_web][] ![B7NJFb3.jpg_web][]

## 表格 ##

### 基本表格 .table ###

### 斑马线表格 .table .table-striped ###

### 带边框表格 .table .table-bordered ###

### 鼠标悬停表格 .table .table-hover ###

### 紧凑表格 .table .table-condensed ###

### 响应式表格 .table .table-responsive ###

### 状态类 ###

<table style="border-spacing:0px; border-collapse:collapse; color:rgb(64,64,64); font-family:'Microsoft YaHei',Verdana,sans-serif,SimSun; font-size:16px; line-height:28.8px"> 
 <thead style=""> 
  <tr style=""> 
   <th style="padding:0px">表格标题</th> 
   <th style="padding:0px">表格标题</th> 
   <th style="padding:0px">表格标题</th> 
  </tr> 
 </thead> 
 <tbody style=""> 
  <tr style=""> 
   <td style="padding:0px">状态active</td> 
   <td style="padding:0px">状态active</td> 
   <td style="padding:0px">状态active</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:0px">状态success</td> 
   <td style="padding:0px">状态success</td> 
   <td style="padding:0px">状态success</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:0px">状态info</td> 
   <td style="padding:0px">状态info</td> 
   <td style="padding:0px">状态info</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:0px">状态warning</td> 
   <td style="padding:0px">状态warning</td> 
   <td style="padding:0px">状态warning</td> 
  </tr> 
  <tr style=""> 
   <td style="padding:0px">状态danger</td> 
   <td style="padding:0px">状态danger</td> 
   <td style="padding:0px">状态danger</td> 
  </tr> 
 </tbody> 
</table>

<table class="table">
              <thead>
                <tr>
                  <th>表格标题</th>
                  <th>表格标题</th>
                  <th>表格标题</th>
                </tr>
              </thead>
              <tbody>
                <tr class="active">
                  <td>状态active</td>
                  <td>状态active</td>
                  <td>状态active</td>
                </tr>
                 <tr class="success">
                  <td>状态success</td>
                  <td>状态success</td>
                  <td>状态success</td>
                </tr>
                 <tr class="info">
                  <td>状态info</td>
                  <td>状态info</td>
                  <td>状态info</td>
                </tr>
                <tr class="warning">
                  <td>状态warning</td>
                  <td>状态warning</td>
                  <td>状态warning</td>
                </tr>
                <tr class="danger">
                  <td>状态danger</td>
                  <td>状态danger</td>
                  <td>状态danger</td>
                </tr>
              </tbody>
            </table>

## 表单 ##

### 基本表单-.from-control 和.from-group搭配 ###

### 内联表单-.from-inline ###

### 移动端注意(隐藏label) ###

### input的内联组合 ###

### 水平排列表单(用栅格系统) ###

### 单选框和复选框的内联形式 ###

选择1   选择2   选择3

## 静态控件 .form-control-static ##

用户名

Tab Weng

## 标题 ##

（提示：由于默认的h1~h7在博客园编辑器中受默认样式的影响，所以无法显示bootstrap的样式，其具体样式与下面的class="h1"等相同）

## h1标题样式 ##

#### h4标题样式 ####

h5标题样式

###### h6标题样式 ######

### 标题也可用class="h1"设置 ###

通过class="h1"来设置样式

通过class="h4"来设置样式

通过class="h5"来设置样式

通过class="h6"来设置样式

<div class="h1">通过class="h1"来设置样式</div>
            <div class="h4">通过class="h4"来设置样式</div>
            <div class="h5">通过class="h5"来设置样式</div>
            <div class="h6">通过class="h6"来设置样式</div>

### 副标题-<small>(或class="small") ###

设置样式h1 这里是副标题

设置样式h4 这里是副标题

设置样式h5 这里是副标题

设置样式h6 这里是副标题

<div class="h1">设置样式h1<small>这里是副标题</small></div>
            <div class="h4">设置样式h4<small>这里是副标题</small></div>
            <div class="h5">设置样式h5<small>这里是副标题</small></div>
            <div class="h6">设置样式h6<small>这里是副标题</small></div>

## 页面内容 ##

### p标签 ###

Web前端开发工程师，主要职责是利用(X)HTML/CSS/JavaScript/DOM/Flash等各种Web技术进行产品的界面开发。 制作标准优化的代码，并增加交互动态功能，开发JavaScript以及Flash模块，同时结合后台开发技术模拟整体 效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。

<p>
              Web前端开发工程师，主要职责是利用(X)HTML/CSS/JavaScript/DOM/Flash等各种Web技术进行产品的界面开发。
              制作标准优化的代码，并增加交互动态功能，开发JavaScript以及Flash模块，同时结合后台开发技术模拟整体
              效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。
            </p>

### 突出段落-class="lead" ###

<p class="lead">
            Web前端开发工程师，主要职责是利用(X)HTML/CSS/JavaScript/DOM/Flash等各种Web技术进行产品的界面开发。
            制作标准优化的代码，并增加交互动态功能，开发JavaScript以及Flash模块，同时结合后台开发技术模拟整体
            效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。
          </p>

## 内联文本元素 ##

### 标记-<mark> ###

使用mark来标记一下

使用mark来<mark>标记</mark>一下

### 删除线-<del>或<s> ###

用del标签来删除这段话

用s标签来删除这段话

<p><del>用del标签来删除这段话</del></p>
            <p><s>用s标签来删除这段话</s></p>

### 下划线-<ins>或<u> ###

ins标签表示插入文本 u标签表示加上下划线

<p><ins>ins标签表示插入文本</ins></p>
            <u>u标签表示加上下划线</u>

### 小号文本-<small> ###

这是小号文本

<small>这是小号文本</small>

### 强调-<strong> ###

这是加强字体，用strong

<strong>这是加强字体，用strong</strong>

### 斜体-<em> ###

这是斜体，用em

## 对齐 ##

居左对齐

居中对齐

居右对齐

\[两端对齐\] 现代项目的开发，需要掌握多种技术。互联网项目，需要用到后端开发、 前端开发、界面设计、产品设计、数据库、各种移动客户端、三屏兼容、restFul API设计 和OAuth等等，比较前卫的项目，还会用到Single Page Application、Web Socket、HTML5/CSS3 这些技术以及像第三方开发像微信公众号微博应用等等。

\[没有对齐\] 现代项目的开发，需要掌握多种技术。互联网项目，需要用到后端开发、 前端开发、界面设计、产品设计、数据库、各种移动客户端、三屏兼容、restFul API设计 和OAuth等等，比较前卫的项目，还会用到Single Page Application、Web Socket、HTML5/CSS3 这些技术以及像第三方开发像微信公众号微博应用等等。

<p class="text-left">居左对齐</p>
          <p class="text-center">居中对齐</p>
          <p class="text-right">居右对齐</p>
          <p class="text-justify">
            [两端对齐] 现代项目的开发，需要掌握多种技术。互联网项目，需要用到后端开发、
            前端开发、界面设计、产品设计、数据库、各种移动客户端、三屏兼容、restFul API设计
            和OAuth等等，比较前卫的项目，还会用到Single Page Application、Web Socket、HTML5/CSS3
            这些技术以及像第三方开发像微信公众号微博应用等等。
          </p>
          <p class="text-nowrap">
             [没有对齐] 现代项目的开发，需要掌握多种技术。互联网项目，需要用到后端开发、
            前端开发、界面设计、产品设计、数据库、各种移动客户端、三屏兼容、restFul API设计
            和OAuth等等，比较前卫的项目，还会用到Single Page Application、Web Socket、HTML5/CSS3
            这些技术以及像第三方开发像微信公众号微博应用等等。
          </p>

## 改变大小写 ##

LowerCase HahaHa

UpperCase Hahaha

capitalize haHaha

<p class="text-lowercase">LowerCase HahaHa</p>
          <p class="text-uppercase">UpperCase Hahaha</p>
          <p class="text-capitalize">capitalize haHaha</p>

## 缩略语 <abbr>标签 ##

bootstrap是一个高度集成化的开发框架 此处缩略

<p class="lead">
              bootstrap是一个高度集成化的开发框架 <abbr title="这里显示了缩略语的内容">此处缩略</abbr><br />
              bootstrap是一个高度集成化的开发框架 <abbr class="initialism" title="这里加了类.initialism所以变小了">此处缩略</abbr>
            </p>

## 引用 ##

### 基本引用 ###

这是html的基本引用标签blockquote，bootstrap为它左边添加了一个灰色带

<blockquote>
              <p>这是html的基本引用标签blockquote，bootstrap为它左边添加了一个灰色带</p>
            </blockquote>

### 引用来源<footer> ###

这世界并不会在意你的自尊。这世界指望你在自我感觉良好之前先要有所成就。

比尔盖茨

<blockquote>
              <p>这世界并不会在意你的自尊。这世界指望你在自我感觉良好之前先要有所成就。</p>
              <footer>比尔盖茨</footer>
            </blockquote>

### 居右的引用，添加类.blockquote-reverse ###

这世界并不会在意你的自尊。这世界指望你在自我感觉良好之前先要有所成就。

比尔盖茨

<blockquote class="blockquote-reverse">
              <p>这世界并不会在意你的自尊。这世界指望你在自我感觉良好之前先要有所成就。</p>
              <footer>比尔盖茨</footer>
            </blockquote>

## 列表 ##

### 无样式列表.list-unstyled ###

*  这里是列表
 *  这里是列表
    
     *  这里是二级列表
     *  这里是二级列表
     *  这里是二级列表
     *  这里是二级列表
 *  这里是列表
 *  这里是列表
 *  这里是列表

<ul class="list-unstyled">
              <li>这里是列表</li>
              <li>这里是列表</li>
                <ul>
                  <li>这里是二级列表</li>
                  <li>这里是二级列表</li>
                  <li>这里是二级列表</li>
                  <li>这里是二级列表</li>
                </ul>
              <li>这里是列表</li>
              <li>这里是列表</li>
              <li>这里是列表</li>
            </ul>

### 内联列表-同一行显示.list-inline ###

<ul>
              <li>这里是列表</li>
              <li>这里是列表</li>
                <ul class="list-inline">
                  <li>这里是二级列表</li>
                  <li>这里是二级列表</li>
                  <li>这里是二级列表</li>
                  <li>这里是二级列表</li>
                </ul>
              <li>这里是列表</li>
              <li>这里是列表</li>
              <li>这里是列表</li>
            </ul>

### 普通描述 ###

名言

如果你陷入困境，那不是你父母的过错，所以不要尖声抱怨我们的错误，要从中吸取教训。

比尔盖茨的名人名言是这样描述的

在你出生之前，你的父母并非像他们现在这样乏味。 他们变成今天这个样子是因为这些年来他们一直在为你付账单，给你洗衣服，听你大谈你是如何的酷。 所以，如果你想消灭你父母那一辈中的"寄生虫"来拯救雨林的话，还是先去清除你房间衣柜里的虫子吧。

<dl>
              <dt>名言</dt>
              <dd>如果你陷入困境，那不是你父母的过错，所以不要尖声抱怨我们的错误，要从中吸取教训。</dd>
              <dt>比尔盖茨的名人名言是这样描述的</dt>
              <dd>在你出生之前，你的父母并非像他们现在这样乏味。
                他们变成今天这个样子是因为这些年来他们一直在为你付账单，给你洗衣服，听你大谈你是如何的酷。
                所以，如果你想消灭你父母那一辈中的"寄生虫"来拯救雨林的话，还是先去清除你房间衣柜里的虫子吧。
              </dd>
            </dl>

### 水平排列描述.dl-horizontal ###

名言

如果你陷入困境，那不是你父母的过错，所以不要尖声抱怨我们的错误，要从中吸取教训。

比尔盖茨的名人名言是这样描述的

<dl class="dl-horizontal">
              <dt>名言</dt>
              <dd>如果你陷入困境，那不是你父母的过错，所以不要尖声抱怨我们的错误，要从中吸取教训。</dd>
              <dt>比尔盖茨的名人名言是这样描述的</dt>
              <dd>在你出生之前，你的父母并非像他们现在这样乏味。
                他们变成今天这个样子是因为这些年来他们一直在为你付账单，给你洗衣服，听你大谈你是如何的酷。
                所以，如果你想消灭你父母那一辈中的"寄生虫"来拯救雨林的话，还是先去清除你房间衣柜里的虫子吧。
              </dd>
            </dl>

## 代码 ##

### 内联代码 code ###

Let's add a headFile \#include<stdio>

Let's add a headFile <code>#include<stdio></code>

### 用户输入 kbd ###

请按 F5 刷新

请按 <kbd>F5</kbd> 刷新

### 代码块 pre ###

### 变量 var ###

### 程序输出 samp ###

Hello World!

<samp>Hello World!</samp>

源引：http://www.cnblogs.com/hlwyfeng/p/5182722.html

[20160220183602_329.png]: /images/20220717/544404c2f39243bdaa5e73cd03fe6c94.png
[20160220183604_364.jpg]: http://static.open-open.com/lib/uploadImg/20160220/20160220183604_364.jpg
[B7NJFb3.jpg_web]: http://img0.tuicool.com/B7NJFb3.jpg!web