Bootstrap Css

Bootstrap

1、Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。您可以从 http://getbootstrap.com/ 上下载
Bootstrap 的最新版本。

2、实例采用的是百度的静态资源库(http://cdn.code.baidu.com/)上的Bootstrap资源。百度的静态资源库的
CDN 服务，访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费,引入代码如下：

http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js

http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css

http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap-theme.min.css

http://apps.bdimg.com/libs/jquery/2.0.0/css/jquery.min.js

<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

Bootstrap Css

1、width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。nitial-scale=1.0 确保网页加载时，以
1:1 的比例呈现，不会有任何的缩放。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2、通过添加 img-responsive class 可以让
Bootstrap 3 中的图像对响应式布局的支持更友好。

<img src="..." class="img-responsive" alt="响应式图像">

3、Bootstrap 网格系统（Grid System）

Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。

（1）、下表总结了 Bootstrap 网格系统如何跨多个设备工作：

下面是 Bootstrap 网格的基本结构：

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>
   </div>
   <div class="row">...</div>
</div>
<div class="container">....
</pre></p><p></p><p><span style="font-family:FangSong_GB2312;font-size:14px;"><span style="color:rgb(51, 51, 51);"> （2）</span><span style="color:rgb(51, 51, 51);">、</span><span style="color:rgb(51, 51, 51);">我们在小设备浏览时无法确定网格显示的位置。为了解决这个问题，使用 可以使用 </span><strong><span style="color:rgb(51, 51, 51);">.clearfix</span></strong><span style="color:rgb(51, 51, 51);"> class和 </span><a target=_blank href="http://www.runoob.com/bootstrap/bootstrap-responsive-utilities.html"><span style="color:rgb(100, 133, 76);">响应式实用工具</span></a><span style="color:rgb(51, 51, 51);">来解决，如下面实例所示：</span></span></p><p><span style="color:rgb(51, 51, 51);"><span style="font-family:FangSong_GB2312;font-size:14px;">响应式实用工具：</span></span></p><p><span style="color:rgb(51, 51, 51);"><span style="font-family:FangSong_GB2312;font-size:14px;"><img src="http://img.blog.csdn.net/20160717002315694?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /></span></span></p><p><strong><span style="color:rgb(0, 0, 255);"><span style="font-family:FangSong_GB2312;font-size:14px;"><div class="clearfix visible-xs"></div></span></span></strong></p><p><span style="font-family:FangSong_GB2312;font-size:14px;"><span style="color:rgb(51, 51, 51);"> （3）</span><span style="color:rgb(51, 51, 51);">、</span><span style="color:rgb(51, 51, 51);">为了在大屏幕显示器上使用偏移，请使用 </span><strong><span style="color:rgb(51, 51, 51);">.col-md-offset-*</span></strong><span style="color:rgb(51, 51, 51);"> 类。这些类会把一个列的左外边距（margin）增加 </span><strong><span style="color:rgb(51, 51, 51);">*</span></strong><span style="color:rgb(51, 51, 51);"> 列，其中 </span><strong><span style="color:rgb(51, 51, 51);">*</span></strong><span style="color:rgb(51, 51, 51);"> 范围是从 </span><strong><span style="color:rgb(51, 51, 51);">1</span></strong><span style="color:rgb(51, 51, 51);">到 </span><strong><span style="color:rgb(51, 51, 51);">11</span></strong><span style="color:rgb(51, 51, 51);">。</span><span style="color:rgb(51, 51, 51);">例如：</span></span></p><p><strong><span style="font-family:FangSong_GB2312;font-size:14px;"><span style="color:rgb(0, 0, 255);"><div class="col-xs-6 col-md-offset-3" </span><span style="color:rgb(0, 0, 255);">></div></span></span></strong></p><p><span style="font-family:FangSong_GB2312;font-size:14px;"><span style="color:rgb(51, 51, 51);"> （4）</span><span style="color:rgb(51, 51, 51);">、</span><span style="color:rgb(51, 51, 51);">为了在内容中嵌套默认的网格，请添加一个新的 </span><strong><span style="color:rgb(51, 51, 51);">.row</span></strong><span style="color:rgb(51, 51, 51);">，并在一个已有的 </span><strong><span style="color:rgb(51, 51, 51);">.col-md-*</span></strong><span style="color:rgb(51, 51, 51);"> 列内添加一组 </span><strong><span style="color:rgb(51, 51, 51);">.col-md-*</span></strong><span style="color:rgb(51, 51, 51);"> 列。被嵌套的行应包含一组列，这组列个数不能超过12（其实，没有要求你必须占满12列）。</span></span></p><p><pre name="code" class="html"><div class="row">
      <div class="col-*-*">
           <div class="row">
              <div class="col-*-*"></div>
             <div class="col-*-*"></div>
           </div>
           <div class="row">...</div>
      </div>
</div>

（5）、可以很轻易地改变带有 .col-md-push-* 和 .col-md-pull-* 类的内置网格列的顺序，其中 * 范围是从 1 到 11。我们有两列布局，左列很窄，作为侧边栏。我们将使用
.col-md-push-* 和 .col-md-pull-* 类来互换这两列的顺序。

4、Bootstrap排版

（1）、内联子标题

如果需要向任何标题添加一个内联子标题，只需要简单地在元素两旁添加 <small>，或者添加 .small class，这样子您就能得到一个字号更小的颜色更浅的文本。例如：

<h1>我是标题1 h1. <small>我是副标题1 h1</small></h1>

（2）、引导主体副本

为了给段落添加强调文本，则可以添加 class="lead"，这将得到更大更粗、行高更高的文本。例如：

<p class="lead"></p>

（3）、强调

HTML 的默认强调标签 <small>（设置文本为父文本大小的 85%）、<strong>（设置文本为更粗的文本）、<em>（设置文本为斜体）。例如：

<small>本行内容是在标签内</small><br>

     <strong>本行内容是在标签内</strong><br>

     <em>本行内容是在标签内，并呈现为斜体</em><br>

     <p class="text-left">向左对齐文本</p>

     <p class="text-center">居中对齐文本</p>

     <p class="text-right">向右对齐文本</p>

     <p class="text-muted">本行内容是减弱的</p>

（4）、缩写

HTML 元素提供了用于缩写的标记，比如 WWW 或 HTTP。Bootstrap 定义 <abbr> 元素的样式为显示在文本底部的一条虚线边框，当鼠标悬停在上面时会显示完整的文本（只要您为 <abbr> title 属性添加了文本）。为了得到一个更小字体的文本，请添加 .initialism 到 <abbr>。例如：

<abbr title="World Wide Web">WWW</abbr><br>

<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>

（5）、地址（Address）

使用 <address> 标签，您可以在网页上显示联系信息。由于 <address> 默认为 display:block;，您需要使用标签来为封闭的地址文本添加换行。

（6）、引用（Blockquote）

您可以在任意的 HTML 文本旁使用默认的 <blockquote>。其他选项包括，添加一个 <small> 标签来标识引用的来源，使用 class .pull-right 向右对齐引用。

（7）、列表

Bootstrap 支持有序列表、无序列表和定义列表。

有序列表：有序列表是指以数字或其他有序字符开头的列表。

无序列表：无序列表是指没有特定顺序的列表，是以传统风格的着重号开头的列表。如果您不想显示这些着重号，您可以使用class .list-unstyled 来移除样式。您也可以通过使用 class
.list-inline 把所有的列表项放在同一行中。

定义列表：在这种类型的列表中，每个列表项可以包含 <dt> 和 <dd> 元素。<dt> 代表 定义术语，就像字典，这是被定义的属于（或短语）。接着，<dd> 是 <dt> 的描述。您可以使用class dl-horizontal 把
<dl> 行中的属于<dt>与描述<dd>并排显示。

<dl class="dl-horizontal">
  <dt>Description 1</dt>
  <dd>Item 1</dd>
  <dt>Description 2</dt>
  <dd>Item 2</dd>
</dl>

5、Bootstrap代码

Bootstrap 允许您以两种方式显示代码：

第一种是 <code> 标签。如果您想要内联显示代码，那么您应该使用 <code> 标签。

第二种是 <pre> 标签。如果代码需要被显示为一个独立的块元素或者代码有多行，那么您应该使用 <pre> 标签。

请确保当您使用 <pre> 和 <code> 标签时，开始和结束标签使用了 unicode 变体： < 和 >。

6、Bootstrap表格

 

（1）、表格类：

（2）、<tr>, <th> 和 <td> 类

（3）、响应式表格

通过把任意的 .table 包在 .table-responsive class 内，您可以让表格水平滚动以适应小型设备（小于
768px）。当在大于 768px 宽的大型设备上查看时，您将看不到任何的差别。

<div class="table-responsive"><table class="table"></table></div>

7、Bootstrap表单

（1）、垂直或基本表单

基本的表单结构是 Bootstrap 自带的，个别的表单控件自动接收一些全局样式。下面列出了创建基本表单的步骤：

A、向父 <form> 元素添加role="form"。

B、把标签和控件放在一个带有class .form-group
的 <div> 中。这是获取  最佳间距所必需的。

C、向所有的文本元素 <input>、<textarea> 和 <select> 添加class
.form-control

(2)、内联表单

如果需要创建一个表单，它的所有元素是内联的，向左对齐的，标签是并排的，请向 <form> 标签添加class .form-inline。默认情况下，Bootstrap 中的 input、select 和 textarea 有 100% 宽度。在使用内联表单时，您需要在表单控件上设置一个宽度。使用
class .sr-only，您可以隐藏内联表单的标签。

(3)、水平表单

水平表单与其他表单不仅标记的数量上不同，而且表单的呈现形式也不同。如需创建一个水平布局的表单，请按下面的几个步骤进行：

A、 向父 <form> 元素添加class .form-horizontal和role="form"。

B、把标签和控件放在一个带有
class .form-group 的 <div> 中。

C、向标签添加 class .control-label。

（4）、支持的表单控件

Bootstrap 支持最常见的表单控件，主要是 input、textarea、checkbox、radio 和 select。

A、输入框（Input）

最常见的表单文本字段是输入框 input。用户可以在其中输入大多数必要的表单数据。Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。适当的 type 声明是必需的，这样才能让
input 获得完整的样式。

<input type="text" class="form-control" placeholder="文本输入">

B、文本框（Textarea）

当您需要进行多行输入的时，则可以使用文本框 textarea。必要时可以改变 rows 属性（较少的行 = 较小的盒子，较多的行 = 较大的盒子）。

C、复选框（（Checkbox）和单选框（Radio）

对一系列复选框和单选框使用
.checkbox-inline 或 .radio-inline class，控制它们显示在同一行上。

D、选择框（Select）

使用 multiple="multiple" 允许用户选择多个选项。

E、静态控件

当您需要在一个水平表单内的表单标签后放置纯文本时，请在 <p> 上使用class .form-control-static。

（5）、表单控件状态

除了 :focus 状态（即，用户点击 input 或使用 tab 键聚焦到 input 上），Bootstrap 还为禁用的输入框定义了样式，并提供了表单验证的 class。

A、输入框焦点

当输入框 input 接收到 :focus 时，输入框的轮廓会被移除，同时应用 box-shadow。

B、禁用的输入框 input

如果您想要禁用一个输入框 input，只需要简单地添加 disabled 属性，这不仅会禁用输入框，还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。

C、禁用的字段集 fieldset

对 <fieldset> 添加 disabled 属性来禁用 <fieldset> 内的所有控件。验证状态

D、Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的 class（.has-warning、 .has-error 或 .has-success）即可使用验证状态。

<div class="form-group has-warning">
 <div class="col-sm-10">
   <input type="text" class="form-control" id="inputWarning">
 </div>
</div>

（6）、表单控件大小

您可以分别使用 class .input-lg/input-sm 和 .col-lg-* 来设置表单的高度和宽度。

（7）、表单帮助文本

Bootstrap 表单控件可以在输入框 input 上有一个块级帮助文本。为了添加一个占用整个宽度的内容块，请在 <input> 后使用 .help-block。

<form role="form">
   <span>帮助文本实例</span>
   <input class="form-control" type="text" placeholder="">
   <span class="help-block">一个较长的帮助文本块，超过一行，
   需要扩展到下一行。本实例中的帮助文本总共有两行。</span>
</form>

8、Bootstrap 按钮

任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是Bootstrap 提供了一些选项来定义按钮的样式，具体如下表所示：以下样式可用于<a>, <button>, 或 <input> 元素上：

Bootstrap 提供了激活、禁用等按钮状态的 class，下面将进行详细讲解。

A、激活状态

按钮在激活时将呈现为被按压的外观（深色的背景、深色的边框、阴影）。

下表列出了让按钮元素和锚元素呈激活状态的 class：

B、禁用状态

当您禁用一个按钮时，它的颜色会变淡 50%，并失去渐变。下表列出了让按钮元素和锚元素呈禁用状态的 class：

<a href="#" class="btn btn-default btn-lg"role="button">链接</a>

<a href="#" class="btn btn-default btn-lg disabled"role="button">

禁用链接</a>

9、Bootstrap 图片

Bootstrap 提供了三个可对图片应用简单样式的 class：

.img-rounded：添加 border-radius:6px 来获得图片圆角。

.img-circle：添加 border-radius:500px 来让整个图片变成圆形。

.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。

10、Bootstrap 辅助类

（1）、文本

以下不同的类展示了不同的文本颜色。如果文本是个链接鼠标移动到文本上会变暗：

（2）、背景

以下不同的类展示了不同的背景颜色。 如果文本是个链接鼠标移动到文本上会变暗：

（3）、其它

时间： 2024-10-13 16:25:42

Bootstrap Css的相关文章

解决了部署到Heroku时无法显示bootstrap CSS样式的问题

今天使用了bootstrap-sass进行布局,真的很好用,据说是tweet 开源的一个东东,本地一切都OK的时候欢喜的git push heroku后,发现bootstrap css的样式并没有预期中的显示出来,感觉还是挺沮丧,但是有问题就要解决,于是抱着技术问题问Google的态度,搜索了下,在 stackoverflow上找到了解决方法,不得不说stackoverflow真是个好东西,我的问题大部分都是在那上面解决的. 原文: I could not view the site with

Bootstrap css简单使用

http://www.bootcss.com/ 这是中文官网 这里简单的用一下基本的css: 引用基本样式: <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <td style="width: 60%;"> <a class="btn btn-info" href="java

Bootstrap CSS 栅格、代码和表格

一.bootstrap栅格 下图总结了 Bootstrap 网格系统如何跨多个设备工作: 例如: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Bootstrap 模板</title> <meta name="viewport" content="width=device-width, initial-s

bootstrap.css.map这个文件有何用处？该怎能使用它？

. ├── bootstrap.css ├── bootstrap.css.map ├── bootstrap.min.css ├── bootstrap-theme.css ├── bootstrap-theme.css.map └── bootstrap-theme.min.css 0 directories, 6 files 我先说一下什么是source map文件. source map文件是js文件压缩后,文件的变量名替换对应.变量所在位置等元信息数据文件,一般这种文件和min.js主

Bootstrap CSS教程

Bootstrap 教程 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 本教程将向您讲解 Bootstrap 框架的基础,通过学习这些内容,您将可以轻松地创建 Web 项目.教程被分为 Bootstrap 基本结构.Bootstrap CSS.Bootstrap 布局组件和 Bootstrap 插件几个部分.每个部分都包含了与该主题相关的简单有用的实例. 现在开

（二）Bootstrap CSS 概览

在这一章中,我们将讲解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践. HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性.为了让这些正常工作,您需要使用 HTML5 文档类型(Doctype). 因此,请在使用 Bootstrap 项目的开头包含下面的代码段. <!DOCTYPE html> <html> .... </html> 如果在 Bootstrap 创

17/9/6 bootstrap.css去掉后引发的样式错乱

最近写的新官网的项目一直都是用的bootstrap的框架,今天的的页面其中一个模块使用的插件和bootstrap冲突,当把bootstrap.css去掉后,页面中的部分样式发生了错乱 主要表现为margin和padding值不好使  ,是因为定位后导致块元素属性消失 position定位 或 浮动 后引起的 解决方法: 该元素添加  display:block

Bootstrap CSS（一）

1.Bootstrap CSS 概览 1.1HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性.为了让这些正常工作,您需要使用 HTML5 文档类型(Doctype). 因此,请在使用 Bootstrap 项目的开头包含下面的代码段. <!DOCTYPE html> <html> xxx </html> 如果在 Bootstrap 创建的网页开头不使用 HTML5 的文档类型(Doctype),您可能会面临一些浏览

Bootstrap CSS 概览

HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性.为了让这些正常工作,您需要使用 HTML5 文档类型(Doctype). 因此,请在使用 Bootstrap 项目的开头包含下面的代码段. <!DOCTYPE html> <html> .... </html> 如果在 Bootstrap 创建的网页开头不使用 HTML5 的文档类型(Doctype),您可能会面临一些浏览器显示不一致的问题,甚至可能面临一些特定情