【Bootstrap学习笔记系列7-----Bootstrap简单背景CSS及其他辅助类】的更多相关文章

Bootstrap学习笔记系列3-------Bootstrap简单表单显示

表单布局 垂直或基本表单 基本的表单结构时BootStrap自带的,创建基本表单的步骤如下: 向父<form>元素添加role = "form": 为了获取最佳的间距,把标签和控件放在一个div.form-group中,div放在父form下: 向所有的文本元素<input>.<textarea>和<select>添加.form-control <!DOCTYPE html> <html> <head>…

Bootstrap学习笔记系列1-------Bootstrap网格系统

Bootstrap网格系统 学习笔记 [TOC] 简单网格 先上代码再解释 <!DOCTYPE html> <html> <head> <title>Bootstrap 模板</title> <meta charset="utf-8"> <!-- 引入 Bootstrap --> <link href="http://cdn.static.runoob.com/libs/bootstra…

bootstrap学习笔记系列4------bootstrap按钮

按钮标签 在<a>,<button>或input元素上使用按钮class.但是为了避免跨浏览器的不一致性,建议使用<button>标签. <!DOCTYPE html> <html> <head> <title>Bootstrap 模板</title> <meta charset="utf-8"> <!-- 引入 Bootstrap --> <link href…

bootstrap学习笔记<一>（bootstrap用法）

首先引入bootstrap官网链接:http://www.bootcss.com/ bootstrap 3下载地址:http://v3.bootcss.com/getting-started/#download bootstrap的CDN链接: <!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.…

Bootstrap学习笔记系列7-----Bootstrap简单背景CSS及其他辅助类

背景 通过添加下列类,可以快捷的变换背景颜色,如果是链接的话,鼠标移动上去会变暗 bg-primary 被修饰元素将会应到primary类,显示吃淡蓝色,文本颜色会变成白色. bg-success 被修饰元素表示成功的信息,背景变成绿色 bg-info 被修饰元素背景颜色会变成淡蓝色 bg-warining 被修饰元素表示值得注意的信息,背景颜色变成土黄色 bg-danger 被修饰元素表示危险的信息,背景颜色会变成红色 其他 浮动 pull-left 元素浮动到左边 pull-right 元素…

Bootstrap学习笔记系列2-------Bootstrap简单表格处理

标签 <table> 为表格添加基础样式 <thead> 表格标题行的容器元素,用来识别列 <tbody> 表格主提中的表格行的容器元素 <tr> 单行的容器元素,用来存放 <th> 在中使用,用来存放列名单元格 <td> 表数据单元格 <caption> 关于表格存储内容的描述或者总结 应用于表格样式的类(全部都是在中添加) .table 为表格添加基本的样式(只有横向的分隔线) .table-striped 形成斑马纹…

Bootstrap学习笔记系列5------Bootstrap图片显示

通过添加一下的class来实现bootstrap对图片的支持 img-round 通过border-radius:6px 来获得图片圆角 img-circle 通过border-radius:50%来让整个图片编程圆形 img-thumbnail 添加一些内边距和一个灰色的框 img-responsive 增加图片的响应式支持 这几个功能可以混合使用,如果想实现一个支持响应式的有框的圆形图片 <img class=" img-circle img-thumbnail img-respons…

Bootstrap学习笔记系列6-----Bootstrap文本显示

通过对文本或者链接添加下面的类,会使其展示不同的颜色,如果文本是个链接,鼠标移动到文本上,颜色会变暗. text-muted柔和的文本(深色) text-primary 表示基础的文本(蓝色) text-success 表示成功信息的文本(绿色) text-info 表示查看过信息的文本(深蓝色) text-warning承载值得注意信息的文本(土黄色) text-danger 表示危险信息的文本(红色)…

bootstrap学习笔记<八>（bootstrap核心布局风格——栅格系统）

栅格系统(bootstrap的核心之一,也是bootstrap的主要布局风格) 栅格系统是对原有div布局的升级版.打破了传统div模式只能纵向垂直排列的弊端,大大提高了页面布局的速度和效果,也很好的配合响应式布局.在设备宽度不够时栅格系统会自动把所有栅格纵向排列. 什么是栅格系统: Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列.它包含了易于使用的预定义classe,还有强大的mixin用于生成更具语义…

Bootstrap学习笔记(二) 表单

在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等. 在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名“form-control”,将会实现一些设计上的定制效果. 1.宽度变成了100% 2.设置了一个浅灰色(#ccc)的边框 3.具有4px的圆角 4.设置阴影效果,并且元素…