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

永无止境2313

浏览: 50800 次
性别:
来自: 南京

最近访客更多访客>>

mouyu

wxylong

chiqiansunny

cinsyo

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

根据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标签<ul>的样式类

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

.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

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

基本结构：

<div class="container">
  <div class="row">
    <div class="col-*-*">
    </div>
  </div>
</div>

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

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

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

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

2.1 强调

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

bootstrap提供的强调样式有(应用于元素<p>)：
.text-left,.text-center,.text-right,.text-muted,.text-primary,.text-success,.text-info,.text-warning,.text-danger

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

如：

<abbr title="World Wide Web">WWW</abbr><br>
<abbr title="Real Simple Syndication" class="initialism">RSS</abbr>

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

3.Bootstrap 代码-code pre
bootstrap定义了html元素<code> <pre>的默认样式

<code>以内联形式显示代码   --bootstrap定义了颜色

<pre>以多行形式显示代码    --bootstrap定义了背景颜色

<pre class="pre-scrollable">   --多行代码带有滚动条

开始和结束标签使用了 unicode 变体： < 和 >

4.Bootstrap 表格-table.table-striped div.table-responsive tr.success td.warning

bootstrap为html元素定义了默认的元素样式,也定义了一些样式类class适用于table等表格元素

4.1
适用于html元素table的样式有：
.table,.table-striped,.table-bordered,.table-hover,.table-condensed
由这些元素名，就可看出其适用的html元素table

适用于html元素<tr>, <th> 和 <td> 类
.active,.success,.info,.warning,.danger

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

<div class="table-responsive">
  <table class="table">
    <thead></thead>
    <tbody></tbody>
  </table>
</div>

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

bootstrap影响form表单的方式主要是html标签如<form> <input> <label>添加样式。还有一个是将form内的html标签和控件放在div里面，便于控制

基本的样式类有.form-inline .form-horizontal .form-group .form-control .control-label

基本结构：--每个标签或控件占据一行

<form role="form">
  <div class="form-group">
    <label for="name">名称</label>
    <input type="text" class="form-control" id="name" placeholder="请输入名称">    
  </div>
  <div class="form-group">
    <label for="inputfile">文件输入</label>
    <input type="file" id="inputfile">
    <p class="help-block">这里是块级帮助文本的实例。</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox">请打勾
    </label>
  </div>
  <button type="submit" class="btn btn-default">提交</button>
</form>

form role="role"
.form-inline .form-group .form-control

水平表单样式：
标签<label>水平,控件放在<div class="col-sm-*"> 里

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="firstname" class="col-sm-2 control-label">名字</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="firstname" placeholder="请输入名字">
    </div>
  </div>
</form>

复选框：
<div class="checkbox"><label><input/></label></div> 或者

<div><label class="checkbox-inline"></lable></div>

对于某些需要特定的输入文本，样式可以特殊处理(.has-warning)：
如：

  <div class="form-group has-warning">
    <label class="col-sm-2 control-label" for="inputWarning">输入警告</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="inputWarning">
    </div>
  </div>

控件大小样式类：
.input-lg .input-sm

6.Bootstrap 按钮-input.btn input.btn-info input.btn-warning input.btn-sm input.active
按钮也是前端比较常用的一个组件
按钮的特性主要要颜色、大小、状态等，bootstrap还设置了一个标签

<button class="btn btn-default" type="submit">按钮</button>

7.Bootstrap 图片-img.img-rounded img.img-circle img.img-thumbnail img.img-responsive
bootstrap对图片的支持为以上一个类

8.Bootstrap 辅助类-div.center-block a.text-danger a.text-success a.bg-danger a.show a.hidden button.close

辅助样式类如文本样式，背景样式，或文本居中组件显示隐藏等

9.Bootstrap 响应式实用工具-span.visible-xs-* span.hidden-sm
可根据不同设备显示或隐藏某些元素

Bootstrap 布局组件
1.Bootstrap 字体图标(Glyphicons)-span.glyphicon span.glyphicon-user

字体图标主要应用到按钮的背景
可根据需要制作特定的图标，地址：
http://www.runoob.com/try/demo_source/bootstrap-glyph-customization.htm
如：

<button type="button" class="btn btn-default btn-xs">
    <span class="glyphicon glyphicon-user"></span>
    User
</button>

2.Bootstrap 下拉菜单（Dropdowns）-div.dropdown ul.dropdown-menu
下拉菜单用的也比较多，如果想要有个看起来不错的下拉菜单,bootstrap是个不错的选择

ul.dropdown-menu可单独使用不必必须放在div.dropdown下面，使用者可灵活使用

3.Bootstrap 按钮组-div.btn-group

4.Bootstrap 按钮下拉菜单-div.btn-group span.cacert

5.Bootstrap 输入框组-div.input-group

6.Bootstrap 导航元素-ul.nav ul.nav-tabs ul.nav-pills ul.nav-stacked

7.Bootstrap 导航栏-nav.navbar nav.navbar-default nav.navbar-fixed-top

8.Bootstrap 面包屑导航（Breadcrumbs）-ol.breadcrumb
面包屑导航-表示当前页面所在位置，每个部分可继续导航

以前见过这个导航方式，不过不清楚具体叫什么

9.Bootstrap 分页-ul.pagination ul.pager

翻页也不一定必须放在ul.pager下面，也可以放在ul.pagination一起使用。这些class都是可以灵活使用的

10.Bootstrap 标签-label.label label-default

11.Bootstrap 徽章（Badges）-span.badge

徽章

12.Bootstrap 超大屏幕（Jumbotron）-div.jumbotron

13.Bootstrap 页面标题（Page Header）-div.page-header

14.Bootstrap 缩略图-a.thumbnail

不是很理解其作用

15.Bootstrap 警告（Alerts）-div.alert alert-success

网站上，如果需要对一些信息进行标注。一般对文字或背景设置特殊样式，bootstrap已经帮我们写好了这些特殊样式，直接拿来用就可以了

<div class="alert alert-success alert-dismissable">
            <button type="button" class="close" data-dismiss="alert"
                    aria-hidden="true">
                &times;
            </button>
            成功！很好地完成了提交。
        </div>

16.Bootstrap 进度条-div.progress div.progress-bar

如果想让自己的网站看起来很炫，设计一个界面美观的进度条，是个不错的特性。bootstrap已经写好了样式，拿来用就行。

17.Bootstrap 多媒体对象（Media Object）-div.media

如果开发一些博客类或论文类的网站，在文字中插入一些图片，可能更具有观赏性

18.Bootstrap 列表组-ul.list-group li.list-group-item a.list-group-item

list-group-item不一定非要放在ul.list-group下面使用，可独立使用如,
a.list-group-item可以有相同的样式效果。只不过放在div.list-group或ul.list-group下面更容易控制位置

19.Bootstrap 面板（Panels）

如果网页的开发中，有需要用到面板,bootstrap已经帮你写好了样式。但是对于我来说，好像用到的也比较少，所以对一些没见过的特性也感到陌生。可能所处的行业有关系，或者一直做后台，没办法接触这些很炫的特性

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">
            带有 title 的面板标题
        </h3>
    </div>
    <div class="panel-body">
        面板内容
    </div>
</div>

20.Bootstrap Well-div.well

Well 是一种会引起内容凹陷显示或插图效果的容器 <div>

Bootstrap 插件-上面的组件或样式是静态的，插件更多的是交互
1.Bootstrap 插件概览-集成了12中jquery插件

2.Bootstrap 过渡效果（Transition）插件-Transition.js

3.Bootstrap 模态框（Modal）插件-modal.js
data-api:data-toggle="model" data-target="#id" id是模态框div的id

4.Bootstrap 下拉菜单（Dropdown）插件-dropdown.js

5.Bootstrap 滚动监听（Scrollspy）插件-scrollspy.js

根据查看内容的位置，动态标注所在菜单或标签

6.Bootstrap 标签页（Tab）插件-tab.js

动态显示标签下的内容div

7.Bootstrap 提示工具（Tooltip）插件-tooltip.js
鼠标移动，动态显示提示信息

8.Bootstrap 弹出框（Popover）插件-popover.js
鼠标点击，弹出窗口信息

9.Bootstrap 警告框（Alert）插件-

这种提示或警告方式似乎更别致一点

10.Bootstrap 按钮（Button）插件-button.js
通过按钮（Button）插件，您可以添加进一些交互，比如控制按钮状态，或者为其他组件（如工具栏）创建按钮组

11.Bootstrap 折叠（Collapse）插件-collapse.js

可以动态的让某个页面区域div显示或影藏

12.Bootstrap 轮播（Carousel）插件-carousel.js

滑动显示内容，一个漂亮的网站必不可少的特性

13.Bootstrap 附加导航（Affix）插件-affix.js

将某个导航栏固定在页面的某个位置，不随页面移动

Bootstrap 其他
1.Bootstrap UI 编辑器-像dreamweaver一样设计页面
见：http://www.runoob.com/bootstrap/bootstrap-ui-editor.html

2.Bootstrap HTML编码规范
页面添加如下元素或特性：
<!DOCTYPE html>

<html lang="zh-CN">

<meta http-equiv="X-UA-Compatible" content="IE=Edge"> -- IE 兼容模式

<meta charset="UTF-8">

在线参考手册
http://www.runoob.com/bootstrap/bootstrap-ui-editor.html
http://pikock.github.io/bootstrap-magic/app/#!/editor

在线制定图标
http://www.runoob.com/try/demo_source/bootstrap-glyph-customization.htm

http://www.runoob.com/bootstrap/bootstrap-tutorial.html