Bootstrap基础2(图片与辅助样式)

<!DOCTYPE html><html lang="zh-CN"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">    <title>Bootstrap</title>    <link rel="stylesheet" href="css/bootstrap.css">    <script src="js/jquery-3.2.1.js"> </script>    <script src="js/bootstrap.js"></script>    <script src="js/holder.js" ></script></head><body><div class="container">

<h2 class="page-header">图片与辅助样式</h2>    <img src="img/1.png" class="img-responsive" style="width: 400px;height: 400px">  <hr/>    <img src="img/1.png" style="width: 100px;height:100px"class="img-rounded">    <img src="img/2.png" style="width: 100px;height:100px"class="img-circle">    <img src="img/3.png" style="width: 100px;height:100px"class="img-thumbnail">    <img src="holder.js/200x200?random=yes"class="img-thumbnail">

<!--文本样式-->    <p class="text-primary">我思故我在</p>    <p class="text-warning">心外无物</p>    <p class="text-info">人不能同时踏进同一条河流</p>    <p class="bg-info">意识不以事物的变化而转移<button class="close">X</button></p>    <button class="btn btn-primary">更多<span class="caret"></span></button>    <span class="glyphicon glyphicon-gift" style="font-size: 30px;"></span></div>

</body></html>
时间: 2024-10-14 14:54:45

Bootstrap基础2(图片与辅助样式)的相关文章

Bootstrap &lt;基础八&gt;图片

原文:Bootstrap <基础八>图片 Bootstrap 提供了三个可对图片应用简单样式的 class: .img-rounded:添加 border-radius:6px 来获得图片圆角. .img-circle:添加 border-radius:500px 来让整个图片变成圆形. .img-thumbnail:添加一些内边距(padding)和一个灰色的边框. 请看下面的实例演示: <!DOCTYPE html> <html> <head> <

Bootstrap &lt;基础二十五&gt;警告(Alerts)

警告(Alerts)以及 Bootstrap 所提供的用于警告的 class.警告(Alerts)向用户提供了一种定义消息样式的方式.它们为典型的用户操作提供了上下文信息反馈. 您可以为警告框添加一个可选的关闭按钮.为了创建一个内联的可取消的警告框,请使用 警告(Alerts) jQuery 插件. 您可以通过创建一个 <div>,并向其添加一个 .alert class 和四个上下文 class(即 .alert-success..alert-info..alert-warning..ale

Bootstrap&lt;基础十五&gt; 输入框组

Bootstrap 支持的另一个特性,输入框组.输入框组扩展自 表单控件.使用输入框组,可以很容易地向基于文本的输入框添加作为前缀和后缀的文本或按钮. 通过向输入域添加前缀和后缀的内容,您可以向用户输入添加公共的元素.例如,可以添加美元符号,或者在 Twitter 用户名前添加 @,或者应用程序接口所需要的其他公共的元素. 向 .form-control 添加前缀或后缀元素的步骤如下: 把前缀后后缀元素放在一个带有 class .input-group 的 <div> 中. 接着,在相同的 &

Bootstrap &lt;基础二十六&gt;进度条

Bootstrap 进度条.在本教程中,你将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet Explorer 9 及之前的版本和旧版的 Firefox 不支持该特性,Opera 12 不支持动画. 默认的进度条 创建一个基本的进度条的步骤如下: 添加一个带有 class .progress 的 <div>. 接着,在上面的 <div> 内,添加一个带有 class .prog

Bootstrap&lt;基础十七&gt;导航栏

导航栏是一个很好的功能,是 Bootstrap 网站的一个突出特点.导航栏在您的应用或网站中作为导航页头的响应式基础组件.导航栏在移动设备的视图中是折叠的,随着可用视口宽度的增加,导航栏也会水平展开.在 Bootstrap 导航栏的核心中,导航栏包括了站点名称和基本的导航定义样式. 默认的导航栏 创建一个默认的导航栏的步骤如下: 向 <nav> 标签添加 class .navbar..navbar-default. 向上面的元素添加 role="navigation",有助

Bootstrap&lt;基础十六&gt; 导航元素

Bootstrap 提供的用于定义导航元素的一些选项.它们使用相同的标记和基类 .nav.Bootstrap 也提供了一个用于共享标记和状态的帮助器类.改变修饰的 class,可以在不同的样式间进行切换. 表格导航或标签 创建一个标签式的导航菜单: 以一个带有 class .nav 的无序列表开始. 添加 class .nav-tabs. 下面的实例演示了这点: <!DOCTYPE html> <html> <head> <title>Bootstrap 实

Bootstrap&lt;基础二十七&gt; 多媒体对象(Media Object)

Bootstrap 中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐.媒体对象可以用更少的代码来实现媒体对象与文字的混排. 媒体对象轻量标记.易于扩展的特性是通过向简单的标记应用 class 来实现的.你可以在 HTML 标签中添加以下两种形式来设置媒体对象: .media:该 class 允许将媒体对象里的多媒体(图像.视频.音频)浮动到内容区块的左边或者右边. .media-list

Bootstrap&lt;基础十四&gt; 按钮下拉菜单

使用 Bootstrap class 向按钮添加下拉菜单.如需向按钮添加下拉菜单,只需要简单地在在一个 .btn-group 中放置按钮和下拉菜单即可.也可以使用 <span class="caret"></span> 来指示按钮作为下拉菜单. 下面的实例演示了一个基本的简单的按钮下拉菜单: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 基本的按钮下拉菜单&

Bootstrap&lt;基础九&gt;辅助类

Bootstrap 中的一些可能会派上用场的辅助类. 文本 以下不同的类展示了不同的文本颜色.如果文本是个链接鼠标移动到文本上会变暗: 类 描述   .text-muted "text-muted" 类的文本样式 .text-primary "text-primary" 类的文本样式 .text-success "text-success" 类的文本样式 .text-info "text-info" 类的文本样式 .text-