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">&times;</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的更多相关文章

  1. Bootstrap~学习笔记索引

    回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...

  2. Bootstrap学习(3)

    Bootstrap 图片  Bootstrap 对图片的支持.Bootstrap 提供了三个可对图片应用简单样式的 class: .img-rounded:添加 border-radius:6px 来 ...

  3. BootStrap学习(2)

    使用Bootstrap添加代码框 可先看:简介.引入.包下载等:http://www.cnblogs.com/0201zcr/p/4900062.html Bootstrap 允许您以两种方式显示代码 ...

  4. Bootstrap 学习(1)

    简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. Bootst ...

  5. 前端框架——BootStrap学习

    BootStrap简单总结下:1.栅格系统,能够很好的同时适应手机端和PC端(及传说中的响应式布局) 2.兼容性好 接下来是对BootStrap学习的一些基础案例总结和回顾: 首先引入:bootstr ...

  6. bootstrap学习总结-css样式设计(一)

    由于项目需要,所以打算好好学习下bootstrap框架,之前了解一点,框架总体不难,但涉及到的东西还是很多,想要熟练掌握它,还是要多练练. 一:bootstrap是什么? bs是什么?  即前端页面搭 ...

  7. Bootstrap学习笔记(二) 表单

    在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

  8. BootStrap学习之先导篇——响应式网页

    Bootstrap学习之前,要知道响应式网页的原理. 1.什么是响应式网页? 一个页面,可以根据浏览设备的不同,以及特性的不同,而自动改变布局.大小等.使得在不同的设备上上都可以呈现优秀的界面. 优点 ...

  9. bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120

    为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...

  10. bootstrap学习笔记之基础导航条 http://www.imooc.com/code/3111

    基础导航条 在Bootstrap框中,导航条和导航从外观上差别不是太多,但在实际使用中导航条要比导航复杂得多.我们先来看导航条中最基础的一个--基础导航条. 使用方法: 在制作一个基础导航条时,主要分 ...

随机推荐

  1. C++函数装饰器

    今天在网上看到一个python实现的函数装饰器,尝试用C++11实现了一下,最后很粗糙的完成了,代码如下. 函数装饰器:接受一个函数.将此函数进行一些装饰,成为另一个函数.新生产的函数具有原函数的功能 ...

  2. PythonStudy——nonlocal关键字

    # 作用:将局部的变量提升为嵌套局部变量# 1.必须有同名嵌套局部变量,就是统一嵌套局部与局部的同名变量# -- 如果局部想改变嵌套局部变量的值(发生地址的变化),可以用nonlocal声明该变量 d ...

  3. Https网络安全架构设计

    一.对称加密 对称密钥加密(Symmetric-key algorithm)又称对称加密.私钥加密.共享密钥加密,是密码学中的一类加密算法.这类算法在加密和解密时使用相同的密钥,或是使用两个可以简单地 ...

  4. sql server数据库入门

    create database 学生信息 on primary  //建立在主文件文件组 ( name='学生信息_data', filename='D:\2011上半年度\数据库\sql代码\xue ...

  5. 图形化SVN管理搭建 subversion edge自行修改密码

    参考文章: https://blog.csdn.net/buyaore_wo/article/details/84313467 安装版本: Subversion Edge 5.2.3 (Linux 6 ...

  6. 关于UI自动化中元素定位常用方法的个人总结

    1.如果目标元素有id属性,优先使用id定位: 2.元素locator尽可能保证简洁,考虑locator中路径的变化频率,尽量减少后期更新和维护成本: 3.使用xpath时,不要一味的使用‘/’逐层进 ...

  7. 用c语言创建双向环形链表

    作为一个C开发人员,无论在求职笔试题中,还是在工程项目中,都会遇到用c语言创建双向环形链表.这个也是理解和使用c指针的一项基本功. #include<...>//头文件省略 typedef ...

  8. 【rabbitmq】RabbitMQ 集群与网络分区

    网络分区(network partitions) 官网-网络分区 网络设备故障导致的网络分裂.比如,存在A\B\C\D\E五个节点,A\B处于同一子网,B\C\D处于另外一子网,中间通过交换机相连.若 ...

  9. win10 vs2015源码编译opencv、opencv_contrib、Tesseract

    1.软件包准备 opencv源码包地址:                官网  github opencv_contrib源码包地址:   github Tesseract源码包地址:        ...

  10. 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 ...