永无止境2313
永无止境2313

前端样式选择1-bootstrap学习笔记

阅读更多
根据http://www.runoob.com/bootstrap/bootstrap-tutorial.html的教程，记录下学习的过程。
关键是熟悉或了解一些html标签的样式类，以便需要时，快速找到解决方案。

文中大部分图片来自于runoob网站,放在一起比较方便找到适合的样式

学习bootstrap的想法：
1.非前端程序员而言，比较常用有bootstrap网格系统(用于排版)，bootstra表格（用于列表展示内容）,bootstrap表单。
bootstrap的东西太多，不可能每个都需要知道或了解，需要有所取舍，明白自己需要什么不需要什么。不要为了学习而学习，也不要凭兴趣去学习，要看你项目或工作中需要什么

2.bootstrap往简单的说，就是样式表，只不过twitter写好了很多样式，直接拿来用就行
而bootstrap插件就是已经写好的js脚本，绑定了一些特定样式的组件或标签。只要组件样式符合要求，加载了插件，就能触发相应事件。 其中大部分绑定的标签或属性为data-api

3.样式类class的命名一般符合一定规则，
如 .col-*  应用于网格系统的列(column)
.row  字面意思就是定义一个行元素

.text-success  就是应用于文本的样式

.list-inline  就是应用于html标签
    的样式类

    .table .table-hover  适用于html标签

    .form-inline .form-group .form-control   主要控制表单的,但不一定一定作用于form元素

    .input-lg  .input-sm   控制input大小

    bootstrap有些样式影响了排版,有些影响了显示

    4.比较大的收获
    了解了一些比较专业的前端名词,如：

    面包屑导航/标签式导航/胶囊式导航

    徽章

    Responsive Design (响应式设计)

    well墙

    分裂式按钮

    谈到模态框时，把 按钮或链接当做模态框的 触发器

    5.学习bootstrap的主要原因
    一是在于它的知名度，让我想不禁想去了解它，再一个是或许有一天当我需要做一些页面的东西(ps:赶鸭子上架)，在没有前端的情况下，bootstrap可以作为一个选择，而我不想等到用时，再去学习它，那样也许有点晚了








    Bootstrap CSS
    1.Bootstrap 网格系统-div.container div.row div.col

    前端样式选择1-bootstrap学习笔记_第1张图片

    grid system
    主要用于排版，类似于html的table,tr,td等元素，这里用css实现内容结构排版
    网格系统主要类有:.container,.row,.col-xs,.col-sm,.col-md,.col-lg,.col-md-offset-*,.col-md-push-*

    基本结构：



    1.1 .col-md-offset-3 列左外边距偏移3单元格



    注：没有.col-xs-offset-*元素  但可通过空单元格实现偏移

    1.2 .col-md-push-8  列位置向右移动8列 
    .col-md-pull-4  列位置向左移动4列

    前端样式选择1-bootstrap学习笔记_第2张图片





    2.Bootstrap 排版-h1-h6 p.text-left p.text-success ul.list-inline
    Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式。只要引入bootstrap样式,默认应用bootstrap的样式

    2.1 强调

    html的强调标签有
    （设置文本为父文本大小的 85%）、（设置文本为更粗的文本）、（设置文本为斜体）

    bootstrap提供的强调样式有(应用于元素

    )：
    .text-left,.text-center,.text-right,.text-muted,.text-primary,.text-success,.text-info,.text-warning,.text-danger

    前端样式选择1-bootstrap学习笔记_第3张图片


    2.2 缩写
    Bootstrap 定义 元素的样式为显示在文本底部的一条虚线边框，当鼠标悬停在上面时会显示完整的文本（只要您为 title 属性添加了文本）

    如： 

    WWW
    
RSS


    2.3 列表
    列表主要样式类有：
    .list-unstyled 应用于
        --清除样式
      .list-inline   应用于
          --行内
        .dl-horizontal 应用于
          --将属于与描述放在同一行





        3.Bootstrap 代码-code pre
        bootstrap定义了html元素 
        的默认样式 
 
         
 
        以内联形式显示代码   --bootstrap定义了颜色 
 
         
 
        以多行形式显示代码    --bootstrap定义了背景颜色 
 
         
 
           --多行代码带有滚动条 
 
         
 
        开始和结束标签使用了 unicode 变体： < 和 > 
 
         
 
         
 
         
 
         
 
         
 
         
 4.Bootstrap 表格-table.table-striped div.table-responsive tr.success td.warning 
 
         
 
         
 前端样式选择1-bootstrap学习笔记_第4张图片 
 
         
 
         
 bootstrap为html元素定义了默认的元素样式,也定义了一些样式类class适用于table等表格元素 
 
         
 
        4.1 
 
         
 适用于html元素table的样式有： 
        .table,.table-striped,.table-bordered,.table-hover,.table-condensed         
 
        由这些元素名，就可看出其适用的html元素table 
 
         
 
         
 适用于html元素
    ,
    和 类
    .active,.success,.info,.warning,.danger

    4.2 响应式表格
    对于小屏幕，可以水平滚动以显示内容






    5.Bootstrap 表单-form.form-horizontal div.form-group input.form-control div.has-warning

    前端样式选择1-bootstrap学习笔记_第5张图片

    bootstrap影响form表单的方式主要是html标签如