bootstrap学习1
1.form-control
-宽度变成了100%
-设置了一个浅灰色(#ccc)的边框
-具有4px的圆角
-设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有所变化
-设置了placeholder的颜色为#999
2.table
☑ .table:基础表格
☑ .table-striped:斑马线表格
☑ .table-bordered:带边框的表格
☑ .table-hover:鼠标悬停高亮的表格
☑ .table-condensed:紧凑型表格
☑ .table-responsive:响应式表格
3.form-group:相当于网格系统中的“row”
4.表单 验证状态:
<form role="form">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess1">成功状态</label>
<input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning1">警告状态</label>
<input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError1">错误状态</label>
<input type="text" class="form-control" id="inputError1" placeholder="错误状态">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</form>
5.六种按钮风格
<button class="btn" type="button">基础按钮.btn</button>
<button class="btn btn-default" type="button">默认按钮.btn-default</button>
<button class="btn btn-primary" type="button"> 主要按钮.btn-primary</button>
<button class="btn btn-success" type="button">成功按钮.btn-success</button>
<button class="btn btn-info" type="button">信息按钮.btn-info</button>
<button class="btn btn-warning" type="button">警告按钮.btn-warning</button>
<button class="btn btn-danger" type="button">危险按钮.btn-danger</button>
<button class="btn btn-link" type="button">链接按钮.btn-link</button>
6.各种图标 http://getbootstrap.com/components/#glyphicons http://www.bootcss.com/p/font-awesome/
7.等分按钮,即自适应分组按钮,在按钮组“btn-group”上追加一个“btn-group-justified”类名,适用于移动端
8.按钮垂直分组:只需要把水平分组的“btn-group”类名换成“btn-group-vertical”即可。
9.垂直堆叠导航只需要在“nav-pills”的基础上添加一个“nav-stacked”类名即可
10.自适应导航和前面使用“btn-group-justified”制作的自适应按钮组是一样的。只不过在制作自适应导航时更换了另一个类名“nav-justified”。当然他需要和“nav-tabs”或者“nav-pills”配合在一起使
11.模态弹出框
<!-- data-target触发模态弹出窗元素 -->
<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data" type="button">通过data-target触发</button>
<!-- 模态弹出窗内容 -->
<div class="modal fade" id="mymodal-data" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">模态弹出窗标题</h4>
</div>
<div class="modal-body">
<p>模态弹出窗主体内容</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
bootstrap学习1的更多相关文章
- Bootstrap~学习笔记索引
回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...
- Bootstrap学习(3)
Bootstrap 图片 Bootstrap 对图片的支持.Bootstrap 提供了三个可对图片应用简单样式的 class: .img-rounded:添加 border-radius:6px 来 ...
- BootStrap学习(2)
使用Bootstrap添加代码框 可先看:简介.引入.包下载等:http://www.cnblogs.com/0201zcr/p/4900062.html Bootstrap 允许您以两种方式显示代码 ...
- Bootstrap 学习(1)
简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. Bootst ...
- 前端框架——BootStrap学习
BootStrap简单总结下:1.栅格系统,能够很好的同时适应手机端和PC端(及传说中的响应式布局) 2.兼容性好 接下来是对BootStrap学习的一些基础案例总结和回顾: 首先引入:bootstr ...
- bootstrap学习总结-css样式设计(一)
由于项目需要,所以打算好好学习下bootstrap框架,之前了解一点,框架总体不难,但涉及到的东西还是很多,想要熟练掌握它,还是要多练练. 一:bootstrap是什么? bs是什么? 即前端页面搭 ...
- Bootstrap学习笔记(二) 表单
在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...
- BootStrap学习之先导篇——响应式网页
Bootstrap学习之前,要知道响应式网页的原理. 1.什么是响应式网页? 一个页面,可以根据浏览设备的不同,以及特性的不同,而自动改变布局.大小等.使得在不同的设备上上都可以呈现优秀的界面. 优点 ...
- bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120
为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...
- bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111
基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...
随机推荐
- C++函数装饰器
今天在网上看到一个python实现的函数装饰器,尝试用C++11实现了一下,最后很粗糙的完成了,代码如下. 函数装饰器:接受一个函数.将此函数进行一些装饰,成为另一个函数.新生产的函数具有原函数的功能 ...
- PythonStudy——nonlocal关键字
# 作用:将局部的变量提升为嵌套局部变量# 1.必须有同名嵌套局部变量,就是统一嵌套局部与局部的同名变量# -- 如果局部想改变嵌套局部变量的值(发生地址的变化),可以用nonlocal声明该变量 d ...
- Https网络安全架构设计
一.对称加密 对称密钥加密(Symmetric-key algorithm)又称对称加密.私钥加密.共享密钥加密,是密码学中的一类加密算法.这类算法在加密和解密时使用相同的密钥,或是使用两个可以简单地 ...
- sql server数据库入门
create database 学生信息 on primary //建立在主文件文件组 ( name='学生信息_data', filename='D:\2011上半年度\数据库\sql代码\xue ...
- 图形化SVN管理搭建 subversion edge自行修改密码
参考文章: https://blog.csdn.net/buyaore_wo/article/details/84313467 安装版本: Subversion Edge 5.2.3 (Linux 6 ...
- 关于UI自动化中元素定位常用方法的个人总结
1.如果目标元素有id属性,优先使用id定位: 2.元素locator尽可能保证简洁,考虑locator中路径的变化频率,尽量减少后期更新和维护成本: 3.使用xpath时,不要一味的使用‘/’逐层进 ...
- 用c语言创建双向环形链表
作为一个C开发人员,无论在求职笔试题中,还是在工程项目中,都会遇到用c语言创建双向环形链表.这个也是理解和使用c指针的一项基本功. #include<...>//头文件省略 typedef ...
- 【rabbitmq】RabbitMQ 集群与网络分区
网络分区(network partitions) 官网-网络分区 网络设备故障导致的网络分裂.比如,存在A\B\C\D\E五个节点,A\B处于同一子网,B\C\D处于另外一子网,中间通过交换机相连.若 ...
- win10 vs2015源码编译opencv、opencv_contrib、Tesseract
1.软件包准备 opencv源码包地址: 官网 github opencv_contrib源码包地址: github Tesseract源码包地址: ...
- UHF RFID,高频RFID开发参考资料
ISO18000-6C电子标签百科 http://baike.baidu.com/item/ISO18000-6C%E7%94%B5%E5%AD%90%E6%A0%87%E7%AD%BE/80500 ...