JavaWeb CSS框架——bootstrap

CSS框架的概念:

CSS 框架是一系列 CSS 文件的集合体,包含了基本的元素重置,页面排版、网格布局、表单样式、通用规则等代码块,用于简化web前端开发的工作,提高工作效率

CSS框架产生的原因:

        提高CSS代码重用效率,基础的代码不需要重复编写
        提供统一而规范的css编码规则,有利于团队协作

        浏览器兼容性好

这里主要讲BootStrap框架,BootStrap框架是当前比较流行的的一个CSS框架,是Twitter推出的一个用于前断开发的开源工具包,而且目前BootStrap是一个比较流行的CSS框架

BootStrap基本样式——栅格

!BootStrap采用一行12列的布局方式,可以将12列自行划分

!屏幕尺寸介绍


!栅格的基本使用方式

列的定义格式为<col-屏幕大小(包括,md,sm,xs,lg)-数字(列数)>

<div class="container">//必须使用container包裹
     <div class="row">//列应该包括在行中
      <div class="col-md-3" style="background-color: #ddd">col-3</div>
      <div class="col-md-9" style="background-color: red">col-9</div>
      </div> 
 </div>

!每行多余12 列是就会自动换行

!列偏移:.col-md-offset-n:向右偏移N列

!嵌套列:在一个col下再使用row产生一个或多个行

基本html标签样式

h1-h6、p、mark、del、strong

文本对齐

Text-left text-right text-center text-nowrap

列表
list-unstyled:去掉标记

List-inline:将li显示在一行

表格样式

Table:基本样式
table-striped:条纹表格
table-bordered:带边框表格
table-hover:鼠标悬停
table-condensed:紧缩表格
状态类,可以给单元格设置颜色:
.active
.success
.info
.warning
.danger
响应式表格:table-responsive(会随屏幕大小改变大小和产生拖动条的表格)

表单样式

表单基本样式
Form-control:表单元素的宽度属性为100%
input-group:表单分组(使用表单分组时无需添加row)
checkbox-inline:在一行显示checkbox
Radio-inline:在一行显示radio
Disabled:禁用
Readonly:只读
.has-warning、.has-error 或 .has-success:表单校验
添加图标: has-feedback
控件尺寸:input-lg ,input-sm
表单其他样式:
Form-inline:内联表单

form-horizontal: 水平标签

按钮

Btn:显示为一个按钮,用于button元素或其它元素
颜色: btn-default, btn-primary, btn-success, btn-info, btn-warning, btn-danger, btn-link
尺寸: btn-lg,btn-sm,btn-xs,btn-block
Disabled:禁用
图片
响应式图片: img-responsive

图片形状: img-rounded, img-circle, img-thumbnail

文字颜色

text-muted
text-primary
text-success
text-info
text-warning

text-danger

背景颜色

bg-muted
bg-primary
bg-success
bg-info
bg-warning

bg-danger

浮动
Pull-xx: right:xxx%
Push-xx:left: xxx%
clearfix
内容居中
center-block
显示或隐藏
Show
hidden
响应式工具
visible-xs-*  可见
hidden-xs      隐藏
下拉菜单
Dropdown
Dropdown-menu
dropdown-header:不可点击的菜单
按钮组
Button-group
btn-group-vertical:垂直排列
导航
nav
Nav-tabs:标签式导航
Nav-pills:胶囊式导航

导航条
Navbar
navbar-brand:品牌图标
navbar-btn:导航按钮
Navbar-text:导航文本
Navbar-left/navbar-right:元素居左/居右
navbar-fixed-top:固定在顶部
navbar-fixed-bottom:固定在底部
navbar-default:反色
路径导航
Breadcrumb:
分页
Pagination:
路径导航
Breadcrumb:
标签
Label
label-default
label-primary
label-success
label-info
label-warning
label-danger
徽章
badge
巨幕
jumbotron :
缩略图
thumbnail :
列表
list-group:
List-group-item:列表项
list-group-item-heading
list-group-item-text

面板
Panel
panel-heading
panel-title
panel-body:
panel-footer
panel-primary
panel-success
panel-info
panel-warning
panel-danger
Panel和其它元素的组合

练习:一个公司的标题

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>bootstrap_01</title>
<link rel="stylesheet" type="text/css" href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">
<!--[if lt IE 9]>
<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/html5shiv.min.js"></script>
<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/respond.min.js"></script>	
<![endif]-->

<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/jquery.min.js"></script>
<script type="text/javascript" src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
	<div class="container">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle collasped" data-toggle="collapse" data-target="#menu1">
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand">网站名称</a>
		</div>
		<div class="collapse navbar-collapse" id="menu1">
			<ul class="nav navbar-nav">
				<li class="active"><a href="#">首页</a></li>
				<li><a href="#">公司简介</a></li>
				<li class="dropdown">
					<a href="#" data-toggle="dropdown">
						产品目录
						<span class="caret"></span>
					</a>
					<ul class="dropdown-menu">
						<li><a href="#">产品1</a></li>
						<li><a href="#">产品2</a></li>
					</ul>
				</li>
			</ul>
			<form class="navbar-form  navbar-left">
				<div class="form-group">
					<input type="text" class="form-control" name="q" placeholder="请输入关键字">
				</div>
				<button type="submit" class="btn btn-default">搜索</button>
			</form>
			<ul class="nav navbar-nav navbar-right">
				<li><a href="#">登录</a></li>
			</ul>
		</div>
	</div>
</nav>
</body>
</html>

效果图为:




















  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值