专栏首页李才哥Bootstrap 响应式框架 第三集
原创

Bootstrap 响应式框架 第三集

1、起步

1、<html lang="zh-cn">

2、视口

3、跨浏览器(IE)兼容性

<meta http-equiv="x-ua-compatible" content="IE=edge">

4、Bootstrap.css文件

5、两个兼容性JS文件

1、html5shiv.min.js

2、respond.min.js

6、两个行为依赖JS文件

1、jquery.js

2、bootstrap.js

7、测试的JS文件

bootlint.js

2、全局CSS样式

1、Button

2、Img

3、Table

隔行变色:table-striped

带边框:table-bordered

鼠标悬停:table-hove

响应式表格:table-responsive

4、ul,ol,dl

list-unstyled

list-inline

dl-horizontal

5、栅格布局系统

1、栅格布局系统的最外层必须是 Bootstrap 所提供的容器

2、容器中允许出现若干 "行"

.row

每行都被等分为 12 列

3、在 row 中允许放 若干列,但需要指定每列需要占的列宽(1/12)

<div class="col-lg-*">

<div class="col-md-*">

<div class="col-sm-*">

<div class="col-xs-*">

4、列偏移

指定向右移动几个列的位置

<div class="col-lg-offset-*">

<div class="col-md-offset-*">

<div class="col-sm-offset-*">

<div class="col-xs-offset-*">

===========================================

1、全局CSS样式 - 栅格布局系统(下)

1、栅格布局系统的嵌套

.col-*-*:相当于是一个容器

.container>.row>.col-*-*>.row>.col-*-*

2、适用于不同屏幕的列的class(xs/sm/md/lg),可以兼容更大的屏幕

小屏幕的class 可以兼容大屏幕的显示效果

col-xs-6 : 在 xs 屏幕下,占6列的宽

col-lg-8 : 在 lg 屏幕下,占8列的宽

.col-xs-* : 适用于 xs/sm/md/lg

.col-xs-6 : 在 xs/sm/md/lg 都占6列的宽

.col-sm-* : 适用于 sm/md/lg

.col-md-* : 适用于 md/lg

.col-lg-* : 适用于 lg

大屏幕的内容class是不能兼容小屏幕的,所以大屏幕的内容放在小屏幕中都是以 100%的宽度显示的(纵向排列)

3、可以在一个列(div)中,指定在不同屏幕下的宽度占比

<div class="col-xs-12 col-sm-6 col-md-3">

在xs中占12列的宽(一行中只显示一列)

在sm中占6列的宽(1行中能显示2列)

在md中占3列的宽(1行中能显示4列)

4、指定列在特定屏幕下隐藏

.hidden-lg : 在 lg 屏幕下隐藏

.hidden-md : 在 md 屏幕下隐藏

.hidden-sm : 在 sm 屏幕下隐藏

.hidden-xs : 在 xs 屏幕下隐藏

2、全局CSS样式 - 表单

Bootstrap中,表单控件与关联的lable(文本)要放在一个表单控件组中(.form-group)

表单控件组中允许包含以下内容:

1、label :标签文本

2、input :表单控件元素 (class="form-control")

3、提示文本:可选的,提示的内容(class="help-block")

1、表单分类

1、默认表单 (基本表单)

效果:label,控件,提示的文本,全部都是纵向排列

ex:

<form>

<div class="form-group">

<label>用户名:</label>

<input type="text" class="form-control">

<span class="help-block">提示的文本</span>

</div>

</form>

2、内联表单

<form class="form-inline">

.sr-only :

Screen Reader Only

3、水平表单

水平表单 = 表单 + 栅格布局系统

栅格:

最外层:container / container-fluid

行:div.row

列:div.col-*-*

水平表单:

最外层:

.container / .container-fluid

<form class="form-horizontal">

行:

div.row 或 div.form-group

一个 .form-group 就是一行

列:

div.col-*-*

<label class="col-*-* control-label">

<span class="help-block col-*-*">

3、Bootstrap - 组件

1、什么是组件

由多个元素所组成的一个复杂的结构

2、组件 - 下拉菜单(Dropdown)

1、结构

将 触发器 和 菜单 包裹在一个 .dropdown 或 .dropup 或 position:relative 的元素中

1、外层元素

dropdown ,dropup,position:relative

2、内层元素

1、触发器

由<button> 和 <a> 来充当的

class="dropdown-toggle"

data-toggle="dropdown" : 切换菜单的显示 和 隐藏的

2、菜单

由 <ul> 或 <div> 来充当

class="dropdown-menu"

由列表作为菜单时,允许为列表项增加以下class来完成特殊效果:

li.divider : 分割线

li.disabled : 禁用菜单项

li.dropdown-header : 标题

3、组件 - 导航(nav)

1、所有的导航都依赖于 .nav

2、导航分类

1、标签页式导航

<ul class="nav nav-tabs">

<li class="active">

<a href="#">...</a>

</li>

<li>

<a href="#">...</a>

</li>

</ul>

2、胶囊式导航

<ul class="nav nav-pills">

同上 ...

</ul>

3、实现点击切换效果

<li data-toggle="tab"></li>

4、组件 - 图标字体(glyphicon)

在页面中,显示为图标,但本质是文字。允许为图标设置字体,颜色,大小,阴影 ,粗斜体....

Web程序中常用的图标字体:

1、Glyphicons 收费

2、FontAwesome 675个 免费

使用自定义的图标字体时,一定要先添加图标字体的设置,然后再使用图标字体,从而保证客户端也会有图标字体文件

***.css

@font-face{

font-family:"自定义名称";

src:url('图标字体文件的路径');

}

使用 图标字体

选择器{

font-family:"自定义名称";

}

如何在网页中使用图标字体:

1、创建一个元素,必须保证为空

2、让元素的class="glyphicon glyphicon-*"

练习:

1、在页面中创建多个按钮,每个按钮上显示一个图标

首页(房子),配置(齿轮),刷新,定位,购物车,发邮件,照相机,播放相关(播放,暂停,上一曲,下一曲 ...)

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • git进行版本控制管理

    1、获取远程最新代码后,则需要从本地master分支切换到开发分支。(此处我们以每个新功能为一个新的开发分支)

    李才哥
  • Vue.js 面试、常见问题答疑

    第一题应该是最简单的,提这个问题,也是想让候选人不那么紧张,因为但凡用过 Vue.js,多少知道v-show 和 v-if 的区别,否则就没得聊了。不过这最简单...

    李才哥
  • 关于引用变量赋值问题

    * 2个引用变量指向同一个对象, 通过一个引用变量修改对象内部数据, 另一个引用变量也看得见

    李才哥
  • JVM的简单实现

    felix
  • JAVA中的反射笔记

    应用场景:在没有类之前就将创建对象的动作做完了,这就是我们动态获取指定类并且使用类中的内容,这就是反射的应用场景,这样就提高了程序的扩展性。

    帅的一麻皮
  • javap查看class文件

    通过JVM编译java文件生成class字节码文件,很多时候很想用工具打开看看,目前还不清楚哪一个软件专门查看class文件的,但是通过windows下的jav...

    Jack Chen
  • CodeIgniter (CI) 框架学习 -- load_class

    文档是前提,没有捷径。 http://codeigniter.org.cn/user_guide/index.html

    lpe234
  • 重磅|如何利用NBA球员推文预测其球场表现?

    大数据文摘
  • android自动化埋点了解一下

    1、手动在onClick等方法下粗鲁的➕埋点,嗯,是最最原始的一种方式了,没有比这个代码更加简洁的了,按需来加,缺点是,麻烦,得一个个加,漏掉没加,就只能等下一...

    brzhang
  • ASM字节码技术

    ASM是一个java字节码操纵框架,它能被用来动态生成类或者增强既有类的功能。ASM 可以直接产生二进制 class 文件,也可以在类被加载入 Java 虚拟机...

    猎户星座1

扫码关注云+社区

领取腾讯云代金券