Bootstrap基础知识(Day 1)

Bootstrap介绍

Bootstrap 是stwitter公司的两名前端设计师设计的

基于html css javascript的超强的前端框架

参考资料:http://v3.bootcss.com/getting-started/

Bootstrap特点

学习了html css javascript 就可以学习bootstrap

Bootstrap 是一移动设备为优先,pc机 平板 手机

Bootstrap所有的主流浏览器,浏览器兼容问题

Bootstrap的环境

http://v3.bootcss.com/网站

这样就下载了bootstrap环境

解压

Fonts 字体库文件

Css文件

Js文件夹 必须有jquery.min.js文件

//cdn.bootcss.com/jquery/1.11.3/jquery.min.js 通过该网址来下载jquery文件

 

引入bootstrap环境的方法一

1文档要求必须是 html5

以移动设置为优先

窗口和设备的窗口保持一致,初始缩放 100%,禁止用户双击

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="bootstrap/js/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <style type="text/css">
        xxx.css
    </style>
</head>

引入bootstrap环境的方法二

bootstrap布局容器

<div class=”container”> 固定宽度 1170px

内容

</div>

 

<div class=”container-fluid”> 宽度为 100%

内容

</div>

排版的标签

<h1>内容</h1> 36px

<h2></h2> 30px

<h3></h3> 24px

<h4></h4> 18px

<h5></h5> 14px

<h6></h6> 12px

.page-header 设置页头 ,给标题加一个分割线

<small></small> 副标题 小一号

<big></big>副标题 大一号

<strong></strong> 推荐使用的加粗

<em></em>推荐使用的

<del></del>删除线

文本对齐方式

.text-left 左对齐

.text-center居中对齐

.text-right 右对齐

英文大写写

.text-uppercase 大写

.text-lowercase 小写

. text-capitalize 首字母大写

列表

.list-unstyled 去掉列表前面的符号,和去掉原有的格式

.list-inline 把<li></li>之间的内容 ,变成横向排列

自定义列表

.dl-horizontal 设置变成横向排列

效果

表格

.table 表格的一个基类 ,如果加其他的样式,都在.tabel的基础上

.table-bordered 给表格加外边框

.table-hover 鼠标悬停效果,鼠标移动行或单元格,变色

. table-striped 斑马线效果,隔行换色

 

.table-condensed

. table-responsive 给table的父元素加

以移动设备为优先,如果内容不能完全的显示,会出现滚动条

状态类设置的是行tr或 td

响应式图片

. img-responsive 响应式图片

图片的形状

. img-circle 椭圆形

.img-rounded 圆角矩形

.img-thumbnail 给图片加圆角的边框

栅格系统

栅格系统一定要放入容器中

<div class=”container”></div>

<div class=”container-fluid”></div>

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12

栅格系统用于通过一系列的行(row)与列(col)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中

需求:一行 里面有若干个列

要求:一行里面有14个列

需求:在一行里面,第一个块占两列,第二个块占三列 第三个块占7

显示块的边框

需求:Pc端的 中等屏幕,一行显示三张图片

如果想做成响应式效果 ,使用栅格系统参数

小于768 手机端

Col-xs-

大于768 小于992 平板

Col-sm-

大于992 小于1200

Col-md-

大于1200

Col-lg-

参考资料:http://v3.bootcss.com/examples/grid/

Bootstrap基础知识(Day 2)

金超超(Word2013)

金超超(Word2013)

Hello, my name is Kim, from Shuren University. I can speak English, Chinese of course, and Japanese. 私は 超超 と申します、26歳の会社員 です。よろしくお願いします。

您可能还喜欢...

发表评论

电子邮件地址不会被公开。