JavaWeb CSS框架——bootstrap_xiongzhouxiong的博客-程序员秘密

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>

效果图为：
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiongzhouxiong/article/details/79927779

智能推荐

Cocoa mac 应用程序打包为dmg_mac打包exe_fallenink的博客-程序员秘密

1. 打包xxx.app打开【磁盘工具】-- 从文件夹创建img（假设当前文件夹为~/user/examApp2. 创建根目录的applications的快捷方式，将其拖至~/user/examApp3. 执行制作

测试Docker的网络处理性能_chijiu4353的博客-程序员秘密

测试结论性能对比：物理机 : MacVlan : Iptables = 100 : 90 : 60mcrouter 性能不理想或待调优（本章配角、不讨论）。物理机采用Docker镜像里相同配置 /etc/memcached.conf:-dlogfile /var/log/...

struts2 多文件上传_chuck_kui的博客-程序员秘密

6). 一次传多个文件怎么办 ? private File doc; private String docContentType ; private String docFileName; 若传递多个文件, 则上述的 3 个属性, 可以改为 List 类型! 多个文件域的 name 属性值需要一致. 7). 可以对上传的文件进行限制吗 ? 例如扩展名

深度学习实现象棋_使用深度学习创建国际象棋人工智能_weixin_26704853的博客-程序员秘密

深度学习实现象棋When Gary Kasparov was dethroned by IBM’s Deep Blue chess algorithm, the algorithm did not use Machine Learning, or at least in the way that we define Machine Learning today. 当加里·卡斯帕罗夫(Gary Ka...

代码块高亮可复制显示js插件highlight.js+clipboard.js_我是小H呀的博客-程序员秘密

最近有个需求是将jsp页面上的某一段代码块格式化成类似CSDN的代码块的样式主要从两个方面入手了：1.高亮显示/换行2.复制代码按钮这两方面都有现成的插件。代码高亮插件——highlight.js1.下载highlight的js文件。https://highlightjs.org/点击get version按钮进入语言选择勾选常用语言，通常common就足够...

桥梁结构的ANSYS参数化分析_ansys桥梁结构分析_sanqima的博客-程序员秘密

桥梁是现代建筑中最重要的结构形式之一，它对一个区域的政治、经济、文化有着重要的影响，现代桥梁正向着长距离、大跨度方向发展；目前的大跨度桥梁主要有斜拉桥以及悬索桥两种形式；例如，法国于1995年建成的Normandie大桥就是大跨度斜拉桥，有184根拉索，主跨长度达到864m，桥面高度为51m，使用了1万9千吨钢材，7万立方米的混凝土。 现代桥梁设计的一个重要特点就是需要采用精确的有限元方法对桥进行力学分析。

随便推点

顺序循环队列基本操作(入队，出队，清空，销毁，历遍)_本题目要求循环队列的元素入队、遍历和清空。_亲休息吧的博客-程序员秘密

#include #include #include #define MAXSIZE 5#define OVERFLOW -1#define OK 1#define TRUE 1#define FALSE 0#define ERROR 1typedef int QElemType;typedef int Status;str

为什么神经网络的激活函数必须使用非线性函数？_激活函数为什么可以是线性的-程序员秘密

什么是线性函数？函数本来是输入某个值后会返回一个值的转换器。向这个转换器输入某个值后，输出值是输入值的常数倍的函数称为线性函数（用数学式表示为h(x) = cx。 c为常数）。因此，线性函数是一条笔直的直线。而非线性函数，顾名思义，指的是不像线性函数那样呈现出一条直线的函数为什么神经网络的激活函数必须使用线性函数？线性函数的问题在于，不管如何加深层数，总是存在与之等效的“无隐藏层的神经网络”。为了具体地（稍微直观地）理解这一点，我们来思考下面这个简单的例子。这里我们考虑把线性函数 h(x) = c

建模板出错（template）_码农怀仔的博客-程序员秘密

这个是因为建模板时出错了，模板出错了，需要重新建模板，好好改造下模板，即可搞定 这个是错的，也许是因为建表把表撑大了，具体也不清楚，反正是这个模板有问题， 这个是好着的，没问题，！！！ ...

深入理解MySQL——初识Buffer pool_mysql bufferpool 公用_三月微风的博客-程序员秘密

Buffer Pool在数据库里的地位1、回顾一下Buffer Pool是个什么东西？数据库中的Buffer Pool是个什么东西？其实他是一个非常关键的组件，数据库中的数据实际上最终都是要存放在磁盘文件上的，如下图所示。但是我们在对数据库执行增删改操作的时候，不可能直接更新磁盘上的数据的，因为如果你对磁盘进行随机读写操作，那速度是相当的慢，随便一个大磁盘文件的随机读写操作，可能都要几百毫秒。如果要是那么搞的话，可能你的数据库每秒也就只能处理几百个请求了！ 在对数据库执行增删改操作的时候，实际上主要

vim中的替换_vim replace_qq_42533216的博客-程序员秘密

Vim可以在尾行模式下使用:substitute命令将指定的字符串替换成其他目标字符串。通常我们可以使用该命令的缩写格式:s进行来进行vim字符串替换操作一、Vim替换字符串命令的语法Vim替换字符串命令的基本语法是 :[range]s/目标字符串/替换字符串/[option]，其中range和option字段都可以缺省不填。下面介绍VIM替换字符串各个变量的含义：range:表示搜索范围，默认表示当前行; range字段值1,10表示从第1到第10行; %表示整个文件(相当..

Hibernate 中的session 的flush、reflush 和clear 方法 ，及数据库的隔离级别_chuck_kui的博客-程序员秘密

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~分割线~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~1. flush 方法：说白一点：如果session 中的某个类的属性发生了改变，使用flush() 方式，去更改数据库中的记录，使其和改变后的session 中的对象一致。 打个不恰当的比方：session 这时是主动方，数据表是被动方，被动方应

推荐文章

热门文章

相关标签