bootstrap

Bootstrap将会根据你的屏幕的大小来调整HTML元素的大小 —— 强调 响应式设计的概念。

通过响应式设计，你无需再为你的网站设计一个手机版的。它在任何尺寸的屏幕上看起来都会不错。

你仅需要通过添加下列代码到你的HTML开头来将Bootstrap添加到任意应用中：

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>

 

 

把上述代码添加到页面中。

首先，我们需要把所有的HTML内容放在class为container-fluid的div下。

 

 

 

img-responsive是图片响应式的意思，在Bootstrap框架中，有一个.img-responsive的CSS样式。应用这个样式以后，图片就会变成响应式图片。
 

用法

编辑
在BootStrap中，给<img>添加 .img-responsive样式就可以实现图片响应式。
 
 
 
 
 
 
 
<img src="..." class="img-responsive">

 

居中

我们在用bootstrap排版内容的时候，有的时候在内容中需要图片水平居中对齐
一般情况下，我们的图片都使用了 .img-responsive 类来实现响应式图片。如果需要实现响应式图片水平居中，那么我们要使用 .center-block 类，不要用 .text-center
<p><img class="img-responsive center-block" src="..." /></p>

 

Bootstrap有它自己的 button 按钮风格， 看起来要比默认的按钮好看得多。 
<button class="btn">Like</button>

 

Bootstrap 按钮

本章将通过实例讲解如何使用 Bootstrap 按钮。任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观。但是 Bootstrap 提供了一些选项来定义按钮的样式，具体如下表所示：

以下样式可用于<a>, <button>, 或 <input> 元素上：

类描述实例
.btn 为按钮添加基本样式 尝试一下
.btn-default 默认/标准按钮 尝试一下
.btn-primary 原始按钮样式（未被操作） 尝试一下
.btn-success 表示成功的动作 尝试一下
.btn-info 该样式可用于要弹出信息的按钮 尝试一下
.btn-warning 表示需要谨慎操作的按钮 尝试一下
.btn-danger 表示一个危险动作的按钮操作 尝试一下
.btn-link 让按钮看起来像个链接 (仍然保留按钮行为) 尝试一下
.btn-lg 制作一个大按钮 尝试一下
.btn-sm 制作一个小按钮 尝试一下
.btn-xs 制作一个超小按钮 尝试一下
.btn-block 块级按钮(拉伸至父元素100%的宽度) 尝试一下
.active 按钮被点击 尝试一下
.disabled 禁用按钮 尝试一下 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>Bootstrap 实例 - 按钮选项</title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<!-- 标准的按钮 -->
<button type="button" class="btn btn-default">默认按钮</button>
<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始按钮</button>
<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功按钮</button>
<!-- 信息警告消息的上下文按钮 -->
<button type="button" class="btn btn-info">信息按钮</button>
<!-- 表示应谨慎采取的动作 -->
<button type="button" class="btn btn-warning">警告按钮</button>
<!-- 表示一个危险的或潜在的负面动作 -->
<button type="button" class="btn btn-danger">危险按钮</button>
<!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接按钮</button>

</body>
</html>

 

Bootstrap 辅助类

本章将讨论 Bootstrap 中的一些可能会派上用场的辅助类。

文本

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

类描述实例
.text-muted "text-muted" 类的文本样式 尝试一下
.text-primary "text-primary" 类的文本样式 尝试一下
.text-success "text-success" 类的文本样式 尝试一下
.text-info "text-info" 类的文本样式 尝试一下
.text-warning "text-warning" 类的文本样式 尝试一下
.text-danger "text-danger" 类的文本样式 尝试一下

背景

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

类描述实例
.bg-primary 表格单元格使用了 "bg-primary" 类 尝试一下
.bg-success 表格单元格使用了 "bg-success" 类 尝试一下
.bg-info 表格单元格使用了 "bg-info" 类 尝试一下
.bg-warning 表格单元格使用了 "bg-warning" 类 尝试一下
.bg-danger 表格单元格使用了 "bg-danger" 类 尝试一下

其他

类描述实例
.pull-left 元素浮动到左边 尝试一下
.pull-right 元素浮动到右边 尝试一下
.center-block 设置元素为 display:block 并居中显示 尝试一下
.clearfix 清除浮动 尝试一下
.show 强制元素显示 尝试一下
.hidden 强制元素隐藏 尝试一下
.sr-only 除了屏幕阅读器外，其他设备上隐藏元素 尝试一下
.sr-only-focusable 与 .sr-only 类结合使用，在元素获取焦点时显示(如：键盘操作的用户) 尝试一下
.text-hide 将页面元素所包含的文本内容替换为背景图 尝试一下
.close 显示关闭按钮 尝试一下
.caret 显示下拉式功能 尝试一下

 

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    
<div class="container">
    <h2>实例</h2>
    <p> .caret 类显示了一个下拉的功能: <span class="caret"></span></p>
    <p> .caret 类在按钮中使用：</p>
    <div class="btn-group">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Menu <span class="caret"></span></button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="#">一个链接</a></li>
            <li><a href="#">另一个链接 link</a></li>
            <li><a href="#">其他功能</a></li>
        </ul>
    </div>        
</div>

</body>
</html>

 

 

 

 

 

Bootstrap 图片

在本章中，我们将学习 Bootstrap 对图片的支持。Bootstrap 提供了三个可对图片应用简单样式的 class：

  • .img-rounded：添加 border-radius:6px 来获得图片圆角。
  • .img-circle：添加 border-radius:50% 来让整个图片变成圆形。
  • .img-thumbnail：添加一些内边距（padding）和一个灰色的边框。

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 图像</title>
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<img src="/wp-content/uploads/2014/06/download.png" class="img-rounded">
<img src="/wp-content/uploads/2014/06/download.png" class="img-circle">
<img src="/wp-content/uploads/2014/06/download.png" class="img-thumbnail">

</body>
</html>

 

<img> 类

以下类可用于任何图片中。

类描述实例
.img-rounded 为图片添加圆角 (IE8 不支持) 尝试一下
.img-circle 将图片变为圆形 (IE8 不支持) 尝试一下
.img-thumbnail 缩略图功能 尝试一下
.img-responsive 图片响应式 (将很好地扩展到父元素) 尝试一下

响应式图片

通过在 <img> 标签添加 .img-responsive 类来让图片支持响应式设计。 图片将很好地扩展到父元素。

.img-responsive 类将 max-width: 100%; 和 height: auto; 样式应用在图片上：

实例

<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre">

 

类为图片添加圆角

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    
<div class="container">
    <h2>图片</h2>
    <p> .img-rounded 类为图片添加圆角 (IE8 不支持):</p>            
    <img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre" width="304" height="236"> 
</div>

</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
    <h2>图片</h2>
    <p> .img-circle 类将图片变为圆形 (IE8 不支持):</p>            
    <img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre" width="304" height="236"> 
</div>

</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    
<div class="container">
    <h2>图片</h2>
    <p> .img-thumbnail 类可制作图片缩略图:</p>            
    <img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" height="236"> 
</div>

</body>
</html>

 

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>菜鸟教程(runoob.com)</title> 
    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    
<div class="container">
    <h2>图片</h2>
    <p> .img-responsive类让图片支持响应式，将很好地扩展到父元素 (通过改变窗口大小查看效果):</p>                  
    <img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236"> 
</div>

</body>
</html>

 

 
posted @ 2016-10-13 17:30  缘琪梦  阅读(977)  评论(1)  编辑  收藏  举报