JavaWeb CSS框架——bootstrap_java中table-condensed是什么意思-程序员宅基地
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-mutedtext-primary
text-success
text-info
text-warning
text-danger
背景颜色
bg-mutedbg-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>效果图为：
智能推荐
18个顶级人工智能平台-程序员宅基地
文章浏览阅读1w次，点赞2次，收藏27次。来源：机器人小妹 很多时候企业拥有重复，乏味且困难的工作流程，这些流程往往会减慢生产速度并增加运营成本。为了降低生产成本，企业别无选择，只能自动化某些功能以降低生产成本。 通过数字化..._人工智能平台
electron热加载_electron-reloader-程序员宅基地
文章浏览阅读2.2k次。热加载能够在每次保存修改的代码后自动刷新 electron 应用界面，而不必每次去手动操作重新运行，这极大的提升了开发效率。安装 electron 热加载插件热加载虽然很方便，但是不是每个 electron 项目必须的，所以想要舒服的开发 electron 就只能给 electron 项目单独的安装热加载插件[electron-reloader]:// 在项目的根目录下安装 electron-reloader，国内建议使用 cnpm 代替 npmnpm install electron-relo._electron-reloader
android 11.0 去掉recovery模式UI页面的选项_android recovery 删除 部分菜单-程序员宅基地
文章浏览阅读942次。在11.0 进行定制化开发，会根据需要去掉recovery模式的一些选项 就是在device.cpp去掉一些选项就可以了。_android recovery 删除 部分菜单
mnn linux编译_mnn 编译linux-程序员宅基地
文章浏览阅读3.7k次。https://www.yuque.com/mnn/cn/cvrt_linux_mac基础依赖这些依赖是无关编译选项的基础编译依赖• cmake（3.10 以上）• protobuf (3.0 以上)• 指protobuf库以及protobuf编译器。版本号使用 protoc --version 打印出来。• 在某些Linux发行版上这两个包是分开发布的，需要手动安装• Ubuntu需要分别安装 libprotobuf-dev 以及 protobuf-compiler 两个包•..._mnn 编译linux
利用CSS3制作淡入淡出动画效果_css3入场效果淡入淡出-程序员宅基地
文章浏览阅读1.8k次。CSS3新增动画属性“@-webkit-keyframes”，从字面就可以看出其含义——关键帧，这与Flash中的含义一致。利用CSS3制作动画效果其原理与Flash一样，我们需要定义关键帧处的状态效果，由CSS3来驱动产生动画效果。下面讲解一下如何利用CSS3制作淡入淡出的动画效果。具体实例可参考刚进入本站时的淡入效果。1. 定义动画，名称为fadeIn@-webkit-keyf_css3入场效果淡入淡出
计算机软件又必须包括什么,计算机系统应包括硬件和软件两个子系统，硬件和软件又必须依次分别包括______？...-程序员宅基地
文章浏览阅读2.8k次。计算机系统应包括硬件和软件两个子系统，硬件和软件又必须依次分别包括中央处理器和系统软件。按人的要求接收和存储信息，自动进行数据处理和计算，并输出结果信息的机器系统。计算机是脑力的延伸和扩充，是近代科学的重大成就之一。计算机系统由硬件(子)系统和软件(子)系统组成。前者是借助电、磁、光、机械等原理构成的各种物理部件的有机组合，是系统赖以工作的实体。后者是各种程序和文件，用于指挥全系统按指定的要求进行..._计算机系统包括硬件系统和软件系统 软件又必须包括
随便推点
进程调度（一）——FIFO算法_进程调度fifo算法代码-程序员宅基地
文章浏览阅读7.9k次，点赞3次，收藏22次。一 定义这是最早出现的置换算法。该算法总是淘汰最先进入内存的页面，即选择在内存中驻留时间最久的页面予以淘汰。该算法实现简单，只需把一个进程已调入内存的页面，按先后次序链接成一个队列，并设置一个指针，称为替换指针，使它总是指向最老的页面。但该算法与进程实际运行的规律不相适应，因为在进程中，有些页面经常被访问，比如，含有全局变量、常用函数、例程等的页面，FIFO 算法并不能保证这些页面不被淘汰。这里，我_进程调度fifo算法代码
mysql rownum写法_mysql应用之类似oracle rownum写法-程序员宅基地
文章浏览阅读133次。rownum是oracle才有的写法，rownum在oracle中可以用于取第一条数据，或者批量写数据时限定批量写的数量等mysql取第一条数据写法SELECT * FROM t order by id LIMIT 1;oracle取第一条数据写法SELECT * FROM t where rownum =1 order by id;ok，上面是mysql和oracle取第一条数据的写法对比，不过..._mysql 替换@rownum的写法
eclipse安装教程_ecjelm-程序员宅基地
文章浏览阅读790次，点赞3次，收藏4次。官网下载下载链接：http://www.eclipse.org/downloads/点击Download下载完成后双击运行我选择第2个，看自己需要（我选择企业级应用，如果只是单纯学习java选第一个就行）进入下一步后选择jre和安装路径修改jvm/jre的时候也可以选择本地的（点后面的文件夹进去），但是我们没有11版本的，所以还是用他的吧选择接受安装中安装过程中如果有其他界面弹出就点accept就行..._ecjelm
Linux常用网络命令_ifconfig 删除vlan-程序员宅基地
文章浏览阅读245次。原文链接：https://linux.cn/article-7801-1.htmlifconfigping <IP地址>:发送ICMP echo消息到某个主机traceroute <IP地址>：用于跟踪IP包的路由路由：netstat -r: 打印路由表route add ：添加静态路由路径routed：控制动态路由的BSD守护程序。运行RIP路由协议gat..._ifconfig 删除vlan
redux_redux redis-程序员宅基地
文章浏览阅读224次。reduxredux里要求把数据都放在公共的存储区域叫store里面，组件中尽量少放数据，假如绿色的组件要给很多灰色的组件传值，绿色的组件只需要改变store里面对应的数据就行了，接着灰色的组件会自动感知到store里的数据发生了改变，store只要有变化，灰色的组件就会自动从store里重新取数据，这样绿色组件的数据就很方便的传到其它灰色组件里了。redux就是把公用的数据放在公共的区域去存..._redux redis
linux 解压zip大文件(解决乱码问题)_linux 7za解压中文乱码-程序员宅基地
文章浏览阅读2.2k次，点赞3次，收藏6次。unzip版本不支持4G以上的压缩包所以要使用p7zip：Linux一个高压缩率软件wget http://sourceforge.net/projects/p7zip/files/p7zip/9.20.1/p7zip_9.20.1_src_all.tar.bz2tar jxvf p7zip_9.20.1_src_all.tar.bz2cd p7zip_9.20.1make && make install 如果安装失败，看一下报错是不是因为没有下载gcc 和 gcc ++(p7_linux 7za解压中文乱码