码迷,mamicode.com
首页 > Web开发 > 详细

bootstrap-全局css样式

时间:2017-01-06 10:52:37      阅读:199      评论:0      收藏:0      [点我收藏+]

标签:enter   屏幕   游览器   off   idt   strong   表格   .text   浮动   

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样式

标签:enter   屏幕   游览器   off   idt   strong   表格   .text   浮动   

原文地址:http://www.cnblogs.com/nan-3/p/6254991.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!