您的位置：首页 > Web前端 > BootStrap

bootstrap 学习笔记 - 4 （按钮 + 图片 + 辅助类）

2015-06-04 17:47 507 查看

Bootstrap学习

Bootstrap学习之 - 按钮

按钮的使用方式有如下四种：

<a class="btn btn-default" href="#" role="button">Link</a>

<button class="btn btn-default" type="submit">Button</button>

<input class="btn btn-default" type="button" value="Input">

<input class="btn btn-default" type="submit" value="Submit">

针对组件的注意事项：

虽然按钮类可以应用到 <a> 和 <button> 元素上，但是，导航和导航条组件只支持 <button> 元素，所以尽量使用<button class="btn btn-default">press me</button>方式，下面的样例代码都是通过<button>方式实现。

按钮的几种样式：

btn btn-default 默认样式

btn btn-primary 首选项

btn btn-success 成功

btn btn-info 一般信息

btn btn-warning 警告

btn btn-danger 危险

btn btn-link 链接
disabled ：控制按钮的可用性

按钮的尺寸：

btn-lg ：大按钮
btn-sm ：小按钮

btn-xs ：超小尺寸
btn-block ：可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。

样例代码：

<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap-theme.min.css">
<script src="${pageContext.request.contextPath}/bootstrap3/js/jquery-1.7.2.min.js"></script>
<script src="${pageContext.request.contextPath}/bootstrap3/js/bootstrap.min.js"></script>

</head>

<body style="padding:20px;">
<div>
<button class="btn btn-default btn-lg" >default button</button><br/>
<button class="btn btn-primary btn-lg" disabled="disabled">Primary button </button><br/>
<button class="btn btn-success btn-lg">success button </button><br/>
<button class="btn btn-info btn-lg">info button </button><br/>
<button class="btn btn-warning btn-lg">warning button </button><br/>
<button class="btn btn-danger btn-lg">danger button </button><br/>

</div>
</body>
</html>

效果图：

Bootstrap学习之 - 图片

img-responsive ：响应式图片
img-round ：圆角矩形
img-circle ：圆形
img-thumbnail ：缩略图

样例代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="zh_CN">
<head>
<base href="<%=basePath%>">
<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap-theme.min.css">
<script src="${pageContext.request.contextPath}/bootstrap3/js/jquery-1.7.2.min.js"></script>
<script src="${pageContext.request.contextPath}/bootstrap3/js/bootstrap.min.js"></script>
</head>

<body style="padding:20px;">
<div>
非响应式图片<br/>
<img class="img-rounded" alt="rounded" src="${pageContext.request.contextPath}/images/zhagener.jpg"></img>
<img class="img-circle" alt="circle" src="${pageContext.request.contextPath}/images/zhagener.jpg"></img>
<img class="img-thumbnail" alt="thumbnail" src="${pageContext.request.contextPath}/images/zhagener.jpg"></img>
</div>

<hr/>
响应式图片
<div>
<img class="img-rounded img-responsive " alt="rounded" src="${pageContext.request.contextPath}/images/zhagener.jpg"></img>
<img class="img-circle img-responsive " alt="circle" src="${pageContext.request.contextPath}/images/zhagener.jpg"></img>
<img class="img-thumbnail img-responsive " alt="thumbnail" src="${pageContext.request.contextPath}/images/zhagener.jpg"></img>
</div>
</body>
</html>

效果图：

Bootstrap学习之 - 辅助类

情景文本颜色：

text-muted

text-primary

text-success

text-info

text-warning

text-danger

情景背景色：

bg-primary

bg-success

bg-info

bg-warning

bg-danger

关闭按钮：

三角符号：

快速浮动：

pull-left

pull-right

清除浮动：

clearfix

显示和隐藏内容：

show
hidden

屏幕阅读器和键盘导航：

样例代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="zh_CN">
<head>
<base href="<%=basePath%>">
<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap3/css/bootstrap-theme.min.css">
<script src="${pageContext.request.contextPath}/bootstrap3/js/jquery-1.7.2.min.js"></script>
<script src="${pageContext.request.contextPath}/bootstrap3/js/bootstrap.min.js"></script>

<style type="text/css">
.div{
border:2px solid gray;
}
.div-custom-size{
width:500px;
height:50px;
}
.img-size{
width:50px;
heigh:50px;
}
</style>
</head>

<body style="padding:20px;">
<div>
非响应式图片<br/>
<img class="img-rounded img-size" alt="rounded" src="${pageContext.request.contextPath}/images/zhagener.jpg"></img>
<img class="img-circle img-size" alt="circle" src="${pageContext.request.contextPath}/images/zhagener.jpg"></img>
<img class="img-thumbnail img-size" alt="thumbnail" src="${pageContext.request.contextPath}/images/zhagener.jpg"></img>
</div>

<hr/>
响应式图片
<div>
<img class="img-rounded img-responsive img-size" alt="rounded" src="${pageContext.request.contextPath}/images/zhagener.jpg"></img>
<img class="img-circle img-responsive img-size" alt="circle" src="${pageContext.request.contextPath}/images/zhagener.jpg"></img>
<img class="img-thumbnail img-responsive img-size" alt="thumbnail" src="${pageContext.request.contextPath}/images/zhagener.jpg"></img>
</div>

<hr/>
<p>关闭按钮</p>

<div class="pull-left">
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>

<br/><hr/>
<p>三角符号</p>
<span class="caret"></span>

<br/><hr/>
<p>快速浮动</p>
<div class="pull-left div">
<p>this is paragragh! at left</p>
<p>this is paragragh! at left</p>
</div>

<div class="pull-right div">
<p>this is paragragh! at right a</p>
<p>this is paragragh! at right a</p>
</div>
<div class="clearfix"></div>

<br/><hr/>
<p>快速浮动</p>
<div class="center-block div div-custom-size">
<p>我在中间</p>
</div>

<div class="show div">
我是可见的
</div>

<div class="hidden div">
我是不可见的
</div>
</body>
</html>

效果图：

至此，bootstrap的全局CSS样式已经学习完，之后的博客则学习bootstrap的组件部分。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航