bootstrap-全局css样式
 
1.bootstrap是一个前端框架
2.基本模板:viewport视口可以解决移动端设备网页自适应问题
3.版心(.container)  流式版心(.container-fluid)宽度100%(游览器的宽度)
4.栅格系统 (一行分成12分,每一列都可以在行中占据相应的分数,根据屏幕的大小,改变占据的分数)
             
   .col-xs 手机   .col-sm 平板  .col-md 电脑屏幕  .col-lg 超大屏幕
 eg:
  <div class=“contanier”>
    <div class="row">
           <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
 
       </div>
   </div>
5列偏移
使用 .col-md-offset-offset 相当于偏移 好像是给列增加了left-marign
6 列排序
 通过使用 .col-md-push 和 .col-md-pull类就可以很容易 的改变列(column)的顺序。push 是往后面移动多少单位,不会影响其他列
 
 
 
 
 
 
7表单
 
(1).form-group 能够给带lable、表单控件提供更好的布局,paddding
(2).form-control能让input\select\textarea能widtt 100%
8表格(.table)
 条纹状表格(.table-striped)
 带边框的表格(.table-bordered)
 鼠标悬停(.table-hover)
 紧缩表格(.table-condensed)
 
 颜色设置用 .danger .warning .success .info
 响应式表格:响应式表格
 将任何 .table 元素包裹在 .table-responsive 元素内,即可创 建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏 幕大于 768px 宽度时,水平滚动条消失。
  eg:   
    <div class="table-responsive">
          <table class="table">
        ...
     </table>
    </div>
 
9文字对齐
.text-center
.text-left
 
10浮动
.pull-left  左浮动
.pull-right 右浮动
 
11隐藏显示
.hidden
.hidden-md
 
.visible
.visible-md-inline-block 在md情况下以行级块级标签形式显示
 

12被删除的文本

对于被删除的文本使用 <del> 标签。

无用文本

对于没用的文本使用 <s> 标签

插入文本

额外插入的文本使用 <ins> 标签。

带下划线的文本

为文本添加下划线,使用 <u> 标签
 
小号文本
,使用 <small> 标签包裹 .small 也可以<small> 元素。

着重

可以通过增加 font-weight 值强调一段文本。也可以使用<strong>包裹

斜体

用斜体强调一段文本。也可以<em>包裹
 
改变大小写
通过这几个类可以改变文本的大小写。小写(text-lowercase)大写(text-uppercase)开头字母大写(text-capitalize

水平排列的描述

.dl-horizontal 可以让 <dl> 内的短语及其描述排在一行

bootstrap-全局css样式的更多相关文章

  1. bootstrap全局CSS样式学习

    参考http://v3.bootcss.com/css/,根据自己的记忆进行的复述,加深记忆. 首先介绍bootstrap全局CSS样式 只通过使用bootstrap.css,即可获得统一的样式设置. ...

  2. 响应式布局和BootStrap 全局CSS样式

    1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...

  3. 14、响应式布局和BootStrap 全局CSS样式知识点总结-part1

    1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...

  4. Bootstrap全局CSS样式之排版

    Bootstrap能全然友好的支持html5的文本元素,这里不再赘述,详细可參考我还有一篇文章<html的文本元素总结>,这里主要针对Bootstrap封装好的CSS文本样式做一下汇总. ...

  5. bootstrap 全局 CSS 样式

    http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践 ...

  6. Bootstrap全局CSS样式之表格

    .table--基础表格样式. .table-striped--给<tbody>之内的每一行添加斑马条纹样式: .table-bordered--为表格添加边框: .table-hover ...

  7. Bootstrap全局CSS样式之button和图片

    .btn-default--button的默认样式. .btn-primary--button的首选样式: .btn-success--button的成功样式: .btn-info--button的一 ...

  8. Bootstrap全局CSS样式之表单

    .form-control--将单独的表单控件赋予一些全局样式,如默认宽度width:100%. .form-group--包裹表单控件,获得最好的排列: .form-inline--将表单设置为内联 ...

  9. bootstrap全局css样式

    以下从官网抄来的,感觉还是很实用的,运用得好,灵活运用,非常方便快捷,能大大提高开发效率,也为调整不同尺寸的屏幕节省了时间. hidden-xs @media (max-width: 767px){ ...

  10. 15、响应式布局和BootStrap 全局CSS样式知识点总结-part2

    1.表格 <div class="container"> <table class="table "> <thead> &l ...

随机推荐

  1. php实现设计模式之 工厂方法模式

    <?php /* * *工厂方法模式,创建型模式 定义一个用于创建对象的工厂接口,让子类决定实例化哪一个类.Factory Method使用一个类的实例化延迟到其子类 * * 四个角色: * 工 ...

  2. Lind.DDD.Utils.HttpHelper里静态对象引出的Http超时问题

    回到目录 Lind.DDD.Utils.HttpHelper组件主要实现了对HTTP的各种操作,如Get,Post,Put和Delete,它属于最纯粹的操作,大叔把它封装的目的主要为了实现与API安全 ...

  3. javascript面试题:如何把一句英文每个单词首字母大写?

    上周看到大家在JS群讨论如何把一句英文句子单词收割字母大写,大家都说用正则简单,对于正则还是有点模糊,于是乎自己敲了下 //面试题:如何把一句英文每个单词首字母大写? var str="wh ...

  4. Objective-C 数据集合

    1.NSSet 1.是一个无序的,管理多个对象的集合类,最大特点 是集合中不允许出现重复对象,和数学上的集合含义是一 样的 2.除了无序.不许重复之外,其它功能和NSArray是一样的 2.NSArr ...

  5. SharePoint 2013 页面访问,Url中间多一段"_layouts/15/start.aspx#"

    问题描述: 我想访问如下页面 http://Host/_layouts/15/ManageFeatures.aspx 点击以后页面地址没有错,但是中间多了一段“_layouts/15/start.as ...

  6. Android性能优化之内存优化练习

    练习题目地址:https://github.com/lzyzsd/MemoryBugs 分析及优化过程如下: 问题1 静态变量引用activity 使用神器LeakCanary检查内存泄露问题 从图中 ...

  7. 0023 Java学习笔记-面向对象-初始化代码块

    初始化代码块 在18篇-类的基本要素中说到,类的三大成员:成员变量.构造方法.方法,初始化代码块是类的第4个成员 初始化块用于对类或者对象的初始化, 一个类的初始化块可以有0-多个,按先后顺序执行 跟 ...

  8. StarkSoft题库管理系统(二)--生成word格式试卷

    一.功能介绍    1.自定义试题库管理系统目录.难易程度,题型,知识库等.    2.试题录入.    3.强大的试题编辑功能,并与通常应用编辑工具有共通.    4.灵活的试卷构造功能,用户可自定 ...

  9. python2不同版本安装json模块

    1.常用json库主要有json-py和simplejson 1) json-py 包含json和minjson,用法一样 Python (#, Jan , ::) [GCC (Red Hat -)] ...

  10. Windows共享作为公司文件服务器的案例

    1.目录结构 → 主管 部门 → 员工 → Public 2.实现效果 每个部门一个目录 部门主管可以访问自己和部门员工的目录 部门员工只可访问自己的目录 公共目录Public部门所有人都可访问 3. ...