bootstrap下载安装和基础学习

最新推荐文章于 2024-07-20 15:49:14 发布

藤原豆腐店-

最新推荐文章于 2024-07-20 15:49:14 发布

阅读量2.3w

点赞数 7

分类专栏： java web bootstrap

本文链接：https://blog.csdn.net/wanderlustLee/article/details/79249416

版权

java web 同时被 2 个专栏收录

41 篇文章 1 订阅

订阅专栏

bootstrap

1 篇文章 0 订阅

订阅专栏

1.前往bootstrap官网，下载已经编译好的版本，不是source版。

2.下载后解压，然后将两个文件夹css,js或者三个文件夹css,fonts,js拷贝到工程目录里

我这里没有拷js文件

3.在HTML文件或者jsp文件中引入

<!doctype html>
<html lang="en">

我这个是在jsp中使用。

4.链接

还有一些基本的使用

1.按钮样式和文本框样式

<div class="container"> 
	<p><button class="btn btn-primary" name="insertwork" id="insertwork" value="添加岗位信息" onclick="insert();return false;">添加岗位信息</button>
	</p>
	<p><button class="btn btn-primary" name="showall" id="showall" value="查看全部岗位信息" onclick="showInfo()">查看全部岗位信息</button>
	</p>
	<p> </p>
	
	<p>
	<span class="input-group-addon">
	  <input name="workername" type="text" class="form-control" placeholder="请输入要查询的岗位名称" >
	  </span>
	  <button class="btn btn-info" name="queryname" id="queryname" value="按照岗位名称查询" onclick="searchInfo(form1.workername)">按照岗位名称查询</button>
	</p>
	</div>

运行后是这样

2.标题和字体样式

<div class="container-fluid">
	<div class="row-fluid">
		<div class="span12">
			<h1 class="text-center text-info">
				岗位信息管理系统
			</h1>
		</div>
	</div>
</div>

<h2 id="overview" class="page-header"><%=operation %>成功</h2>

3.表单样式

<table class="table">  
        <thead>  
            <tr><th>编号</th><th>姓名</th><th>年龄</th></tr>  
        </thead>  
        <tbody>  
            <tr class="active"><td>001</td><td>郭靖</td><td>25</td></tr>  
            <tr class="success"><td>002</td><td>黄蓉</td><td>23</td></tr>  
            <tr class="info"><td>003</td><td>杨过</td><td>24</td></tr>  
            <tr class="warning"><td>004</td><td>黄老邪</td><td>54</td></tr>  
            <tr class="danger"><td>005</td><td>欧阳锋</td><td>42</td></tr>  
        </tbody>  
    </table>

运行结果

4.文本域样式

文本域和原始使用方法一样，设置rows可定义其高度，设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名，则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。

<form role="form">
  <div class="form-group">
    <textarea class="form-control" rows="3"></textarea>
  </div>
</form>

5.文字样式

<div class="text-muted">.text-muted 效果</div>
<div class="text-primary">.text-primary效果</div>
<div class="text-success">.text-success效果</div>
<div class="text-info">.text-info效果</div>
<div class="text-warning">.text-warning效果</div>
<div class="text-danger">.text-danger效果</div>