`
yumo12
  • 浏览: 18486 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

Bootsrap之全局CSS样式

阅读更多
一、概览
1、HTML5文档类型
<!DOCTYPE html>
<html lang="zh-CN">
</html>
2、移动设备优先
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
3、排版与链接
background-color:#fff;  @font-family-base、@font-size-base、@line-height-base、@link-color、:hover
4、使用了Normalize.css
5、布局容器
.container---固定宽度,并支持响应式布局
.container-fluid---100%宽度,占全部窗口
二、栅格系统
1、媒体查询
@media(min-width:@screen-sm-min){…})    //md  lg    分别对应小、中、大屏幕
也可以包含max-width限定更准确些:
@media(max-width:@screen-xs-max){…}
@media(min-width: @screen-sm/md-min) and (max-width:@screen-sm/md-max){…}
@media(max-width:@screen-lg-max){…}
2、栅格参数
.col-xs-         .col-sm-               .col-md-           .col-lg-
                     <=62px                <=81px            <=97px
例子:
<div class="row">
    <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
3、多余的列将另起一行排列
4、列偏移    .col-md-offset-    将列向右侧偏移。
5、嵌套列:row----col-xs-4----row---col-xs-2
6、列排序

    .col-md-push-*  向右移动*列

 

    .col-md-pull-*    向左移动*列

7、Less mixin和变量
三、排版
1、标题标签<h1>~<h6>      
                .h1~.h6为了给行内元素赋予标题样式    
               <small>标签或 .small 类 ---副标题
2、页面主体全局font-size:14px; line-height:1.428;     
                       <p>margin-bottom:10px;
                       段落突出显示:.lead 类
3、使用Less工具构建:variables.css文件   @font-size-base     @line-height-base
4、内联文本:<mark></mark>标签高亮
                       <del></del>被删除的文本
                       <s></s>无用文本
                       <ins>额外插入的文本</ins>
                       <u></u>带下划线的文本
                       <small></small>小号文本
                       强调文本<strong></strong>   <em></em>
5、对齐
           .text-left/center/right
           .text-justify/nowrap
6、改变大小写------.text-lowercase/uppercase/capotalize
7、缩略语:<abbr title="attribute"></abbr>---基本
                   <abbr class="initialism"></abbr>---首字母缩略语(font-sizes稍微小些)
8、地址:每行末尾加<br>
9、引用:
<blockquote>-------引用样式
    <p></p>-------直接引用
</blockquote>
10、列表:无序列表(ul、li)
                  有序列表(ol、li)
                  无样式列表(<ul class="list-unstyled">针对直接子元素)
                  内联列表(<ul class="list-inline">  display:inline-block;)
                  描述式短语列表(dl、dt、dd)---水平排列的描述(<dl class="dl-horizontal">)
11、自动截断:text-overflow属性
四、代码
1、内联代码  <code></code>
2、用户输入  <kbd></kbd>
3、代码块     <pre></pre>用于多行代码,注意尖括号要进行转义处理
                     <pre>&lt;p&gt;Sample text here&lt;/p&gt;</pre>
4、变量  var
5、程序输出  <samp></samp>
五、表格
1、条纹状<table class="table table-striped">…</table>(IE8不支持)
2、带边框的表格:<table class="table table-bordered">…</table>
3、鼠标悬停:<table class="table-hover"></table>
4、紧缩表格:<table class="table-condensed"></table>(使表格更紧凑,单元格中的内补padding都会减半)
5、状态类:为行或单元格设置颜色   
                   .active(鼠标悬停的颜色)   /  .success(成功或积极的动作)     /    
                   .info(普通的提示信息或动作)      /    .warning     /    .danger
6、响应式表格:将.table包裹在.table-responsive元素内,会在小屏幕设备上水平滚动
<div class="table-responsive">
    <table class="table"></table>
</div>
六、表单
1、基本实例
(1)所有设置了.form-control的input/select/textarea:width:100%;
(2)<div class="form-group">
             <label for=""></label>
             <表单控件放在这  class="form-control">
        </div>
(3)不要将表单组和输入框组混合使用,建议将输入框组嵌套到表单组中
2、内联表单:
(1)<form class="form-line"></form>
(2)用在>=768px宽度,可以使多个控件在一行显示
(3)元素{width:auto;}
(4)要添加<label>标签,可<label class="sr-only"></label>将其隐藏
3、水平排列的表单
<form class="form-horizontal"></form>并配合使用栅格类,可将标签和控件组水平布局
如:<form class="form-horizontal">
            <div class="form-group">
                 <label class="col-sm-2" for="">邮箱:</label>
                 <div class="col-sm-10">
                       <input type="email"  placeholder="Email" />
                 </div>
            </div>
       </form>
4、被支持的控件
(1)输入框:text、password、datetime、datetime-、local、date、month、time、week、number、email、url、search、tel、color(都必须设置type属性)
(2)文本域:textarea
(3)单选多选框:可设置disabled属性    如果联合使用的<label>也禁止点击,就把disabled类给.radio、.radio-inline(内联单选)、checkbox、checkbox-inline、<fieldset>
(4)下拉列表:同时显示多个选项----<select multiple class="form-control"></select>或使用默认选项
5、静态控件
纯文本和<label>同一行:<p class="form-control-static"></p>
6、焦点状态
7、禁用状态:
(1)<input type="text" disabled /> 防止输入并能改变外观
(2)<fieldset>设置disabled,<a>链接功能不受影响,但是IE中的<fieldset>不完全支持disabled属性
8、只读状态:<input type="text" readonly />
9、校验状态: 
 (1).has-warning          .has-error         .has-success
           如果设置了上面的类,其中的.control-label、.form-control、.help-block都接受上面的样式
 (2)添加额外图标
         设置has-feedback类(必须是class="form-control")
         为水平排列的表单和内联表单设置可选图标
         如果<label class="sr-only"></label>,将会自动调整图标的位置
10、控件尺寸
 (1).input-lg/sm-----高度        .col-lg-*  类似的类-----宽度
 (2)水平排列的表单组的尺寸:外层div用.form-group-lg/sm   内层id="formGroupInputLarge/Small"
 (3)列尺寸:col-xs-4
11、辅助文本
针对块级辅助文本:<span class="help-block"></span>
七、按钮
      btn 样式 大小 块级    尽可能使用<button>元素
1、预定义样式
      class="btn btn-default/primary/success/info/warning/danger/link"
2、尺寸
<button type="button: class="btn btn-primary btn-lg/sm/xs"></button>
.btn-block:100%宽度,变成块级元素
3、激活状态:button和a都可加  .active 
4、禁用状态
<button disabled="disabled"></button>
<a class="btn btn-primary btn-lg disabled"></a>---兼容性问题
5、按钮类
type="submit/button"
八、图片
1、响应式图片<img class="img-responsive" alt="" />
2、图片形状:<img class="img-rounded/circle/thumbnail"  alt="" />
九、辅助类
1、Contextual colors:<p class="text-muted/primary/success/info/warning/danger"></p>
2、Contextual backgrounds:<p class="bg-primary/success/info/warning/danger"></p> 有时需放在带这种class的div里
3、关闭按钮:
<button type="button" class="close">
    <span aria-hidden="true">&times;</span>
    <span class="sr-only">Close</span>
</button>
4、三角符号:使元素有下拉菜单功能
     <span class="caret"></span>
5、快速浮动
(1)<div class="pull-left"></div>   <div class="pull-right"></div>
         .pull-left{float:left !important;}      .pull-right{float:right !important;}
         .element{.pull-left();}                      .another-element{.pull-right();}
(2)在导航条中,使用.navbar-left   .navbar-right
6、Center content blocks
   <div class="center-block"></div>
   .center-block{display:block;  margin-left:auto;  margin-right:auto;}
   .element{.center-block();}
7、Clearfix
   <div class="clearfix"></div>
   .clearfix(){……}
8、Showing and hiding content
   <div class="show/hidden"></div>
9、Screen reader content
   <a class="sr-only sr-only-focusable" href="#"></a>联合使用,聚焦时显示
10、Image replacement
<h1 class="text-hide"></h1>  用背景图替换文字
十、响应式工具
1、可用的类
 
手机
平板
>=992px
>=1200px
.visible-xs/sm/md/lg-*
xs可见
sm可见
md可见
lg可见
.hidden-xs
 
可见
可见
可见
.hidden-sm
可见
 
可见
可见
.hidden-md
可见
可见
 
可见
.hidden-lg
可见
可见
可见
 
xs:.visible-xs-block、visible-xs-inline、visible-xs-inline-block
2、打印类(不建议使用)
.visible-print-block/inline/inline-block对打印机可见
.hidden-print对浏览器可见
3、测试用例
十一、使用Less
Bootstrap 的 CSS 文件是通过 Less 源码编译出来的。Less 是一门预处理语言,支持变量、mixin、函数等额外功能
十二、使用Sass
分享到:
评论

相关推荐

    bootstrap3全局css样式中文文档

    bootstrap3全局css样式中文文档,设置全局 CSS 样式;基本的 HTML 元素均可以通过 class 设置样式并得到增强效果;还有先进的栅格系统。

    Bootstrap3.3.6 中文手册-全局CSS样式

    下面将详细介绍Bootstrap 3.3.6中关于全局CSS样式方面的知识点。 首先,Bootstrap的文档类型应该设置为HTML5,这是因为Bootstrap使用了某些只在HTML5中定义的元素和CSS属性。在文档的部分,开发者需要添加viewport...

    BootStrap入门到实战:BootStrap全局CSS样式(一)

    本主题将深入探讨BootStrap全局CSS样式,帮助初学者从入门到实战,逐步掌握这一强大的工具。 首先,BootStrap的核心在于其响应式网格系统,这在描述中的“栅格系统示例2图片合集”中得到了体现。栅格系统是...

    全局 CSS 样式 · Bootstrap v3 中文文档.htm

    全局 CSS 样式 · Bootstrap v3 中文文档.htm

    Bootstrap 中文文档 全局 CSS 样式

    Bootstrap 初学者帮助文档 版本排版清晰一目了然便于阅读

    全局 CSS 样式 · Bootstrap v3 中文文档.mhtml

    全局 CSS 样式 · Bootstrap v3 中文文档.mhtml

    6.全局css样式之代码.wmv

    bootstrap是一个基于html、css、javascript的响应式的移动端优先的前端框架。使用起来非常方便、学习较为简单。

    4.全局css样式之栅格系统下.wmv

    bootstrap是一个基于html、css、javascript的响应式的移动端优先的前端框架。使用起来非常方便、学习较为简单。

    bootstrap的css和js文件

    1. **bootstrap.min.css**:这是Bootstrap的最小化版本,包含了所有核心样式,适合生产环境使用,因为它已经过压缩,加载速度快。 2. **bootstrap.css**:非压缩版,便于开发者查看和调试代码,通常在开发阶段使用。...

    bootstrap-4.6.2下载bootstrap.min.cssbootstrap.bundle.min.js

    `bootstrap.min.css`是Bootstrap的核心CSS文件,经过压缩和优化,用于引入框架的样式规则,包括栅格系统、排版、组件样式和全局CSS变量。这个最小化的版本减少了文件大小,加快了页面加载速度。 `bootstrap.bundle....

    Bootstrap基础视频教程

    内容包括Bootstrap起步、Bootstrap全局css样式概览、Bootstrap全局css样式_栅格、Bootsrtap全局css样式_排版、Bootstrap全局css样式_代码、Bootstrap组件_字体图标、Bootstrap组件_按钮组等。 资源太大,传百度网盘...

    css样式初始化.zip

    "css样式初始化.zip"这个压缩包文件很可能包含了一组用于初始化CSS样式的代码,帮助开发者快速建立一个干净、一致的样式起点。初始化CSS样式的主要目的是消除浏览器之间的默认样式差异,确保在不同浏览器上呈现一致...

    BootStrap Win8 Metro 样式界面

    这套主题通常会包含自定义的CSS样式文件、JavaScript扩展和可能的图像资源,以重现Metro界面的视觉效果。 1. **自定义CSS**:在Bootstrap的默认样式上应用Win8 Metro主题,通常涉及更改颜色方案、字体样式和布局...

    5.全局css样式之排版.wmv

    bootstrap是一个基于html、css、javascript的响应式的移动端优先的前端框架。使用起来非常方便、学习较为简单。

    bootstrap3.3.7(2018最新版)

    菜鸟教程bootstrap参考手册,全局css样式3.37版本 摘要必须大于50个字节!

    3.全局css样式之栅格系统上.wmv

    bootstrap是一个基于html、css、javascript的响应式的移动端优先的前端框架。使用起来非常方便、学习较为简单。

    bootstrap 3.3.4 中文文档

    首先,我们来看看“全局 CSS 样式”部分。这部分详细介绍了Bootstrap的基本样式规则,包括字体设置、颜色方案、排版、链接样式、图片处理、表格、按钮、表单元素等。Bootstrap的全局样式使得页面元素具有统一的视觉...

    7.全局css样式之表格.wmv

    bootstrap是一个基于html、css、javascript的响应式的移动端优先的前端框架。使用起来非常方便、学习较为简单。

Global site tag (gtag.js) - Google Analytics