锐英源软件
第一信赖

精通

英语

开源

擅长

开发

培训

胸怀四海 

第一信赖

当前位置:锐英源 / 开源技术 / Bootstrap / Bootstrap使用
服务方向
人工智能数据处理
人工智能培训
kaldi数据准备
小语种语音识别
语音识别标注
语音识别系统
语音识别转文字
kaldi开发技术服务
软件开发
运动控制卡上位机
机械加工软件
软件开发培训
Java 安卓移动开发
VC++
C#软件
汇编和破解
驱动开发
联系方式
固话:0371-63888850
手机:138-0381-0136
Q Q:396806883
微信:ryysoft

Bootstrap使用

使用bootsteap框架首先进入官方网站http://twitter.github.io/bootstrap/或者中文的网站http://www.bootcss.com/,下载相关文件。

下载BootStrap

官网的文件很详细简单,对于下载来说也有多种方式。对于我们开发者来说,估计最简单的方式就是直接下载编译和压缩后的CSS、JavaScript文件,另外还包含字体文件,但是不包含文档和源码文件。打开解压包之后可以发现包含三个文件夹 css、fonts、js。

这是最基本的Bootstrap组织形式:未压缩版的文件可以在任意web项目中直接使用。我们提供了压缩(bootstrap.min.*)与未压缩 (bootstrap.*)的CSS和JS文件。字体图标文件来自于Glyphicons。

因为bootstrap是个轻量级的框架,所以很容易理解,主要有用的就是三个文件,bootstrap.js,bootstrap.css,bootstrap-responsive.css(是响应是布局才需要引入的css)。很简单,要用所有的功能,就全部引入自己的html页面里面。然后还可以看一看它官方给出的一些模版,当然模版我们参考就是了,copy是没有意义的。

研究框架

这个是bootstrap的布局相关的,bootstrap的布局很简单,只要在你的div里面加上class属性,然后再把bootstrap.css里的class加上去就能够实现布局了,很简单,介绍两种很流行的布局,流体布局和响应事布局,都是基于bootstrap的栅格系统 。

流体布局:

贴上一段代码

 <div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
</div>
<div class="span10">
<!--Body content-->
</div>
</div>
</div>

响应事布局需要引入下面两端代码:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

然后就可以进行自己的响应时布局了

在网页中我们使用的html5的一些新的标签,在IE9以下的浏览器并不支持这些标签,也不能为这些标签进行添加样式。那么修复这个问题我们需要链接引用的文件如下:

 <!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> 
   
 <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->  <!--[if lt IE 9]>   

 <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>   

 <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>  <![endif]-->

意思就是说如果用户IE浏览器的版本小于IE9,那么就会加载这两个js文件库,现在就可以使用这些新的标签,并且可以在这些标签上添加样式了。

基本的css样式

包括了
• 排版
• 代码
• 表格
• 表单
• 按钮
• 图片
• 图标

这些无论从实现还是理解上都是很简单的,只需要把bootstrap.css里的类放到你的标签的class里面就能实现很好的布局效果了

javascript插件

这个插件用起来还是很简单,只需要在一些如tab,nav,弹框啊,下拉框啊,这些带有事件的组建的实现动态效果,简单的说,只要拿到class就能拿到节点,然后用bootstrap封装好的方法调用一个方法就能够轻松的实现了。
注意:所有Bootstrap插件都依赖jQuery。而且在正式的项目当中我们推荐使用压缩之后的版本,因为它的体积很小

友情链接
版权所有 Copyright(c)2004-2021 锐英源软件
公司注册号:410105000449586 豫ICP备08007559号 最佳分辨率 1024*768
地址:郑州大学北校区院(文化路97号院)内