bootstrap框架

摘要

Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。 国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。

bootstrap框架

一、概述

1、<a href="http://www.ldhblog.com/tag/boot/" title="查看与 boot 相关的文章"target="_blank">boot</a>strap的作用:
2、包含哪些内容
全局样式类、栅格布局、常用组件、插件、定制
3、开发工具:webstorm

二、手工实现响应式布局

1、百分比 + 浮动
2、CSS媒体查询技术:在CSS代码中,media技术--》根据屏幕的大小,自动选择执行哪些 CSS 代码
@media screen and (min-width:990px){
div.box {}
}
@media screen and (max-width:989px) and (min-w){
div.box {}
}

3、如何实现
a、使用 webstorm 开发:以项目作为文件的组织方式
b、添加特有的代码

4、如何测试
a、浏览器调试:模拟不同尺寸的屏幕
b、ADT
c、真机测试

5、定义页面的视口
a、声明页面适应不同的客户端设备
----页面宽度的自适应

6、定义响应式的 CSS 代码
a、尺寸使用 百分比
b、img:使用 max-width
c、使用 :after 实现浮动的清除
d、字体:使用 em <div>aa<p>bb</p></div>
e、使用媒体查询技术

7、media属性:link标记里添加 media 属性,实现选择性的执行某个 CSS 文件
<link media="screen/print"/>--打印或者屏幕
<link media="screen and (max-width:) and (min-width:)"
--->把所有的 CSS 文件下载,选择性的使用
三个 css 文件做成 1 个 css,在css 文件里,选择执行某些代码

8、@media--CSS 媒体查询技术:使用 1 个CSS 文件即可,可以在文件中,添加媒体的查询
@media screen and (max-width:;) or (min-width:;) and (orientation:;) {
}

@media () {

}
---分开屏幕的尺寸
超大屏:>1200px
PC屏:992px ---1199
PAD屏幕:768 --- 991
PHONE:767

9、实践案例:布局、细节--》手工代码实现
a、代码的细节:CSS RESET
b、什么情况下适合使用响应式
不适应特别复杂的网站,电商
适应 门户网站、个人站点

三、Bootstrap <a href="http://www.ldhblog.com/tag/%e6%a1%86%e6%9e%b6/" title="查看与 框架 相关的文章"target="_blank">框架</a>:起步(介绍)、全局样式类、组件、插件、定制

1、框架文件:css和js文件
帮助手册

2、建立一个使用 boot 的html 文件


&lt;head&gt;
&lt;meta name="viewport"
&lt;link css
&lt;!-- if lt ie 9
&lt;script js

3、可以使用提供的各种样式:按钮

4、bootstrap.css文件
a、CSS reset:基本元素的样式定义
b、盒子模型的计算方式
box-sizing:content-box;--->width/height:内容区域(padding会撑开元素的框)--》保证内容的显示,缺点是计算总尺寸麻烦
box-sizing:border-box;---》width/height:框的尺寸(padding计算在框之内的)优先保证布局和尺寸---》适用于响应式布局
c、百分比+浮动
d、@media

四、全局 CSS 样式

1、使用 boot 提供的全局样式的时候:使用 F12 查看源代码
2、容器:包含其他元素的div/header/section等
container:固定宽度的---》针对于不同尺寸的屏幕,拥有不同的width
container-fluit(液体,流动):100%,适用于移动设备
3、按钮的样式
btn:添加按钮的基本的样式:尺寸、边框
其他样式类:颜色、状态
btn-default/danger/warning/info/primary/success
---》CSS 中多类 <p class="s1 s2 d3"
active:根据当前元素的样式,进行重点提示的效果
btn-block:常用于移动设备,实现大个
尺寸:btn-default/btn-lg/btn-sm/btn-xs
disabled:禁用的状态
4、图片的样式
响应式:img-thumbnail(边框,常用于缩略图)
img-responsive(没有其他样式)
---》max-width:;
非响应
img-circle
img-rounded
5、文本的样式
文本颜色:tex-dange/success/....
文本对齐:text-center/
文本大小写:text-lowercase/..
bg-danger/success/..---》可以为所有元素使用
lead ---类似于 active--实现着重突出显示的效果

关于颜色:有一个比较饱和的主色调--作为网站的基色
lighter(80%) 60% 30%
darker()

6、其他小样式
每日一练:完成响应式布局的页面(手写)
进一步熟练使用工具

7、列表
ul ol dl/dt/dd---适用于大框中包含多个并列的小框
a、结构
b、 list-inline/unstyled
c、快捷键 ul>li

8、表格
a、结构
b、基础的样式 table--》横向边框、宽度
c、其他样式
table-striped---》隔行变色
table-hover---》鼠标悬停变色
table-bordered---》竖向边框
d、响应式表格:当表格的尺寸超过最小屏幕的尺寸时,表格区域出现滚动条,页面不受影响
<div class="table-responsive">
<table>

9、栅格系统:实现整个页面的响应式布局--》页面的组成部分,根据屏幕尺寸的不同,占不同的比例
a、将屏幕横向划分为 12 等分
b、定义各个块占:某种屏幕下,占几个等分
c、将页面从上向下分为几个大的组成块--row
row行中:从左向右分为组成块(col列)
d、列:如何占比-->*是数字(1-12),表示占比
col-lg-* 1200px---超大屏幕PC
col-md-* 992------PC
col-sm-* 768 -- 991--PAD
col-xs-* 767--PHONE
---》底层代码添加的 width:?% float:left;

e、关于列的宽度:
col-sm-8:在小屏、中、大都会占8格
在xs情况下,会失效

f、自适应:大小尺寸下,都能显示
<div class="col-md-6 col-sm-8 col-xs-10">

g、设置隐藏:hidden-lg/md/sm/xs

h、列的偏移:设置列向右移动 col-md-offset-*

i、列的嵌套:往往用来实现复杂的布局效果


&lt;div class="row"&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div class="col-md-8 col-sm-12"&gt;
&lt;div class="row"&gt;
&lt;div class="col-md-3 col-sm-6 col-xs-12"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;div class="row"&gt;
&lt;header class="col-lg-12"&gt;&lt;/header&gt;
&lt;/div&gt;
&lt;div class="row"&gt;
&lt;aside class="col-lg-3"&gt;&lt;/aside&gt;
&lt;div class="col-lg-7"&gt;&lt;/div&gt;
&lt;aside class="col-lg-2"&gt;&lt;/aside&gt;
&lt;/div&gt;
&lt;div class="row"&gt;
&lt;footer class="col-lg-12"&gt;&lt;/footer&gt;
&lt;/div&gt;

10、表单
a、基础表单
文本和控件,都分别独占一行---》适用于小屏


&lt;form&gt;
&lt;div class="form-group"&gt;
&lt;label&gt;
&lt;input&gt;
&lt;/div&gt;

b、内联表单:文本和控件都在同一行,可能和其他控件也位于同一行----》页面结构非常紧凑的情况下

c、水平表单:一行里,分为三个组成部分(文本、控件、提示信息)
将表单结合栅格系统的方式来实现


&lt;form class=""&gt;
&lt;div class="form-group"--》类似于row
&lt;div class="col-xs-5 col-xs-offset-*"
&lt;label/input/span

d、组成元素的基础样式
control-label --》标签文本
form-control --》控件
help-block --》提示文本

11、辅助样式
a、关于浮动


&lt;div&gt;
&lt;p style="float:left;"&gt;&lt;/p&gt;
&lt;p style="float:left"&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;h1&gt;&lt;/h1&gt; :after {..}

使用boot提供的样式类


&lt;div class="clearfix"&gt;
&lt;p class="pull-left"&gt;&lt;/p&gt;
&lt;p class="pull-left"&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;h1&gt;&lt;/h1&gt;

b、隐藏
.hidden ---》display:none;
.invisible ---》visibility:;
区别:display为none,从文档中彻底删除
visible:不可见


&lt;span&gt;11&lt;/span&gt;
&lt;span class="hidden"&gt;22&lt;/span&gt;
&lt;span&gt;33&lt;/span&gt;
&lt;span class="invisible"&gt;44&lt;/span&gt;
&lt;span&gt;55&lt;/span&gt;
五、组件:boot 提供的各种成型的组成部分,比如下拉菜单,导航条,页签。直接构建我们的页面

0、使用 CSS、JS、Fonts

1、图标字体:glyphicon基本效果 glyphicon-**
--->font的文件
http://localhost:63342/P01/01_nav.html apach

2、下拉菜单:折叠式的下拉效果


&lt;select&gt;&lt;option&gt; -html标记
&lt;button&gt;&lt;/button&gt; ---原生代码
&lt;ul&gt;&lt;/ul&gt;

boot提供的组件:


&lt;div class="dropdown/dropup"&gt;---外层的包含框
&lt;a/button data-toggle="dropdown" ---点击
&lt;ul class="dropdown-menu"&gt;---弹出的菜单项
&lt;li&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;

---》实现组件的动效,引入 jquery 和 boot.js

3、按钮组
<div class="btn-group">
<button>/<a>

</div>

4、警告框
<div class="alert alert-info/danger">
<span data-dismiss="alert">文本或者图标
其他文本图标。。。
----》boot所提供的组件中,提供了一个非常重要的属性 data-***(自定义的扩展属性)--js插件的定义(js代码)
data-toggle:切换,切换显示的地方---》根据属性的取值的不同,实现切换不同的元素
data-dismiss

5、导航:将多个元素组成一组,作为标签页类型的导航
<ul class="nav nav-tabs"
<li><a data-toggle="tab"
6、导航条:把多种元素放在一起,作为导航--》导航条---》经常做成响应式的导航条
a、划分结构
logo:固定在左侧
左侧菜单
右侧菜单
折叠指示框:当放不下的时候,切换显示隐藏起来的菜单项

b、html代码的结构


&lt;div class="navbar navbar-default"
&lt;div class="container"
&lt;div class="navbar-header"&gt;
&lt;a class="navbar-brand"&gt;&lt;img /&gt;&lt;/a&gt;
&lt;a/button class="navbar-toggle"
data-target="#n1"
data-toggle="collapse"
&gt;
&lt;span class="icon-bar"&gt;&lt;/span&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;div class="collapse navbar-collapse" id="n1"&gt;
&lt;ul class="nav navbar-nav"&gt;
&lt;li&gt;
&lt;/ul&gt;
&lt;ul&gt;
&lt;li&gt;
&lt;/ul&gt;
&lt;/div&gt;

c、样式

d、动态效果

7、面板:两层结构 样式关键字 panel

8、媒体对象:两层结构,图和文字,水平方向如何排列 样式关键字 media

9、路径导航

10、列表组:竖向的列表效果 list

11、输入框组

12、其他

六、插件

1、boot的插件:基于jQuery和boot.js(一次性的引入了所有的js插件所需要的功能)
单个引入js文件

2、如何实现的插件功能


方式一:使用扩展属性 data-*
&lt;div class="dropdown"&gt;
&lt;a data-toggle="dropdown"&gt;&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;


方式二:js 代码的方式
$('#b1').click(function(){
$(this).dropdown();
});

3、哪些插件:下拉框、导航、警告框
dropdown/alert---》API

4、页签式导航
a、API $().tab('show');
b、完整式的:带内容


&lt;ul
&lt;li class="active"
&lt;a href="#a1"&gt;
&lt;button data-target="#a1"

&lt;div class="tab-content"&gt;
&lt;div id="a1" class="tab-pane active"&gt;
&lt;div class="tab-pane"&gt;

c、过渡效果
fade
in

5、折叠
a、基础折叠效果
<a/button href/data-target="#d1"
<div class="collapse" id="d1"

b、复杂折叠:实现面板的折叠效果
<div class="panel">
<div class="panel-heading">
<a href="#">

<div id="" class="collapse panel-collapse">
<div class="panel-body"
c、多组面板,实现互斥的折叠效果
<div class="panel-group" id="p1">
<div>
//...
<a data-parent="#p1"></a>
</div>
"


			
李东辉

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:15   其中:访客  8   博主  7

  1. avatar 宋稳 2

    博客改版了?很漂亮啊啊啊

  2. avatar 森林之家 0

    我竟然在这呆呆的玩了半天小老鼠……也是太无聊了。

  3. avatar 沉鱼落雁随笔 0

    技术问题,交给你们技术员去搞吧,我等看不懂。

  4. avatar 热腾网 5

    前端开发还是不会啊。

  5. avatar 小C博客 2

    这个 前端框架挺不错的,快速开发,快速入手,去年用了一年

  6. avatar 嘻嘻不要啊 2

    这个很好,PC,手机一个主题搞定

    • avatar 李东辉博客

      @嘻嘻不要啊 问题是,这个上手有点难,

      • avatar 嘻嘻不要啊 2

        @李东辉博客 我是用过这类的主题,只看懂css就觉得太省心了。。有个问题,原有的主题或插件产生的比如li标签,有什么法子可以批量添加一个.classexample,