作者:20雨荨12_306 | 来源:互联网 | 2023-09-10 12:34
1、bootstrap排版全局样式style.css:1、移除body的margin声明2、设置body的背景色为白色3、为排版设置了基本的字体、字号和行高4、设置全局链接颜色,
1、bootstrap 排版
全局样式style.css:
1、移除body的margin声明
2、设置body的背景色为白色
3、为排版设置了基本的字体、字号和行高
4、设置全局链接颜色,且当链接处于悬浮“:hover”状态时才会显示下划线样式
标题 h1-h6
HTML 中的所有标题标签,
到
均可使用。另外,还提供了 .h1 到 .h6 类选择器,为的是给内联(inline)属性的文本赋予标题的样式。
1、重新设置了margin-top和margin-bottom的值
2、h1~h3重置后的值都是20px;h4~h6重置后的值都是10px
3、所有标题的行高都是1.1(也就是font-size的1.1倍),而且文本颜色和字体都继承父元素的颜色和字体
4、固定不同级别标题字体大小,h1=36px,h2=30px,h3=24px,h4=18px,h5=14px和h6=12px
在标题内还可以包含 标签或赋予 .small 类的元素,可以用来标记副标题。
<h2>Bootstrap heading <small>Secondary Textsmall>h2>
Bootstrap heading Secondary text
p 标签
(段落)元素还被设置底部外边距(margin)10px。
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
通过添加 .lead 类可以让段落突出显示。
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
强调内容的标签
一般配合段落标签使用
强调相关的类
text-muted: 提示,使用浅灰色(
文本对齐风格
text-left: 左对齐 text-center: 居中对齐 text-right: 右对齐 text-justify:两端对齐
列表
1、ul 、 ol 去序列 :
class=“list-unstyled“
2、ul 、 ol 水平排列 (把垂直列表换成水平列表,而且去掉项目符号(编号),保持水平显示)
class=“list-inline”
3、dl水平列表(屏幕大于768px的时候,添加类名“.dl-horizontal”才具有水平定义列表效果)
class=“dl-horizontal”
图片
使用方法非常简单,只需要在
标签上添加对应的类名 img-responsive:响应式图片,主要针对于响应式设计
img-rounded: 圆角图片
img-circle: 圆形图片 img-thumbnail: 缩略图片
自己动手添加并查看相应的效果吧~ ~ ~
bootstrap图标
Bootstrap框架中也为大家提供了近200个不同的icon图片,而这些图标都是使用CSS3的@font-face属性配合字体来实现的icon效果。
任何行级元素都可以,通常使用span标签做图标容器
可登陆bootstrap网站查看http://v3.bootcss.com/components/#thumbnails
用法很简单,只需将图标下的英文复制粘贴到class里即可:
class="glyphicon glyphicon-ok">span>
2、bootstrap-表格
基础实例
class="table">table>
条纹状表格
通过 .table-striped 类可以给
之内的每一行增加斑马条纹样式。
条纹状表格是依赖 :nth-child CSS 选择器实现的,而这一功能不被 Internet Explorer 8 支持。
带边框的表格
添加 .table-bordered 类为表格和其中的每个单元格增加边框。
鼠标悬停
通过添加 .table-hover 类可以让
中的每一行对鼠标悬停状态作出响应。
紧缩表格
通过添加 .table-condensed 类可以让表格更加紧凑,单元格中的内补(padding)均会减半。
状态类
通过这些状态类可以为行或单元格设置颜色。
Class 描述
.active 鼠标悬停在行或单元格上时所设置的颜色 .success 标识成功或积极的动作 .info 标识普通的提示信息或动作 .warning 标识警告或需要用户注意 .danger 标识危险或潜在的带来负面影响的动作
响应式表格
将任何 .table 元素包裹在 .table-responsive 元素内,即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失。
<div class="table-responsive"> <table class="table"> ... table>
3、bootstrap表单
基本实例
单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control
类的
、
和
元素都将被默认设置宽度属性为 width: 100%;。 将 label
元素和前面提到的控件包裹在 .form-group
中可以获得最好的排列。
<form role="form">告诉辅助设备(如屏幕阅读器)这个元素所扮演的角色是个表单form> <form role="button">告诉设备,这是个按钮,可以点击。本质上是增强语义性,增强组件的可访问性、可用性form>
不要将表单组合输入框组混合使用,建议将输入框组嵌套到表单组中使用。
<form> class="form-group"> <label for="exampleInputEmail1">Email addresslabel> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
class="form-group"> <label for="exampleInputPassword1">Passwordlabel> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
class=
"form-group"> <label for="exampleInputFile">File inputlabel> <input type="file" id="exampleInputFile"> class="help-block">Example block-level help text here.
class="checkbox"> <label> <input type="checkbox"> Check me out label>
type="submit" class="btn btn-default">Submit form>
多个控件可以排列在同一行:
class="form-inline"> class="form-group"> for="exampleInputName2">Name type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
class="form-group"> for="exampleInputEmail2">Email type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe@example.com">
type="submit" class="btn btn-default">Send invitation
水平排列的表单
通过为表单添加 .form-horizontal
类,并联合使用 Bootstrap 预置的栅格类,可以将 label 标签和控件组水平并排布局。这样做将改变 .form-group
的行为,使其表现为栅格系统中的行(row),因此就无需再额外添加 .row 了。
单选和多选框
多选框(checkbox)
用于选择列表中的一个或多个选项,而单选框(radio)
用于从多个选项中只选择一个。
设置了disabled
属性的单选或多选框都能被赋予合适的样式。对于和多选或单选框联合使用的 标签,如果也希望将悬停于上方的鼠标设置为“禁止点击”的样式,请将 .disabled 类赋予 .radio、.radio-inline、.checkbox、.checkbox-inline 或 。
多选框:
class="checkbox"> <label> <input type="checkbox" value=""> Option one is this and that—be sure to include why it's great label> div>
推荐阅读
本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ...
[详细]
蜡笔小新 2023-12-14 14:37:52
个人学习使用:谨慎参考1Client类importcom.thoughtworks.gauge.Step;importcom.thoughtworks.gauge.T ...
[详细]
蜡笔小新 2023-12-13 14:20:23
最近在做listview时发现OnItemClickListener失效的问题,经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效,还会导致单击后listview每个item的背景改变,使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况,并提供了解决方法。 ...
[详细]
蜡笔小新 2023-12-14 14:25:50
本文介绍了南邮ctf-web的writeup,包括签到题和md5 collision。在CTF比赛和渗透测试中,可以通过查看源代码、代码注释、页面隐藏元素、超链接和HTTP响应头部来寻找flag或提示信息。利用PHP弱类型,可以发现md5('QNKCDZO')='0e830400451993494058024219903391'和md5('240610708')='0e462097431906509019562988736854'。 ...
[详细]
蜡笔小新 2023-12-13 10:58:55
Imtryingtofigureoutawaytogeneratetorrentfilesfromabucket,usingtheAWSSDKforGo.我正 ...
[详细]
蜡笔小新 2023-12-12 14:13:01
本文介绍了基于移动平台的会展导游系统APP的设计与实现过程。首先,对会展经济和移动互联网的概念进行了简要介绍,并阐述了将会展引入移动互联网的意义。接着,对基础技术进行了介绍,包括百度云开发环境、安卓系统和近场通讯技术。然后,进行了用户需求分析和系统需求分析,并提出了系统界面运行流畅和第三方授权等需求。最后,对系统的概要设计进行了详细阐述,包括系统前端设计和交互与原型设计。本文对基于移动平台的会展导游系统APP的设计与实现提供了技术支持和需求分析。 ...
[详细]
蜡笔小新 2023-12-09 20:03:30
本文概述了JNI的原理以及常用方法。JNI提供了一种Java字节码调用C/C++的解决方案,但引用类型不能直接在Native层使用,需要进行类型转化。多维数组(包括二维数组)都是引用类型,需要使用jobjectArray类型来存取其值。此外,由于Java支持函数重载,根据函数名无法找到对应的JNI函数,因此介绍了JNI函数签名信息的解决方案。 ...
[详细]
蜡笔小新 2023-12-09 17:55:40
本文介绍了关于Java异常的八大常见问题,包括异常管理的最佳做法、在try块中定义的变量不能用于catch或finally的原因以及为什么Double.parseDouble(null)和Integer.parseInt(null)会抛出不同的异常。同时指出这些问题是由于不同的开发人员开发所导致的,不值得过多思考。 ...
[详细]
蜡笔小新 2023-12-09 17:11:45
不要谈什么天分,运气,你需要的是一个截稿日,以及一个不交稿就能打爆你狗头的人,然后你就会被自己的才华吓到。------ ...
[详细]
蜡笔小新 2023-10-17 21:20:36
移动传感器扫描覆盖摘要:关于传感器网络中的地址覆盖问题,已经做过很多尝试。他们通常归为两类,全覆盖和栅栏覆盖,统称为静态覆盖 ...
[详细]
蜡笔小新 2023-10-17 12:41:17
蜡笔小新 2023-10-17 10:44:03
大家好,我是致力于前端开发,前端设计,前端入门的前端小姐姐,今天为大家带来的前端新知识是【雪碧图和滑动门】,不 ...
[详细]
蜡笔小新 2023-10-15 17:45:23
在做项目的过程中,我们时常需要进行一些弹框操作,比如在后台管理时需要进行的一些增删改操作,这个时候我们需要使用到弹框,或者在 ...
[详细]
蜡笔小新 2023-10-14 08:49:35
本文介绍了eclipse学习中的第三章内容,主要讲解了ssh中的Hibernate的缓存,包括2级缓存和get方法、load方法的区别。文章还涉及了项目实践和相关知识点的讲解。 ...
[详细]
蜡笔小新 2023-12-14 00:31:35
前景:当UI一个查询条件为多项选择,或录入多个条件的时候,比如查询所有名称里面包含以下动态条件,需要模糊查询里面每一项时比如是这样一个数组条件:newstring[]{兴业银行, ...
[详细]
蜡笔小新 2023-12-13 09:34:59
20雨荨12_306
这个家伙很懒,什么也没留下!