码迷,mamicode.com
首页 > 其他好文 > 详细

Bootstrap 学习笔记

时间:2017-04-03 22:13:51      阅读:162      评论:0      收藏:0      [点我收藏+]

标签:get   mil   ref   trap   相关   idt   字体   blog   href   

一、Bootstrap 三部分

1.全局 CSS 样式

设置全局 CSS 样式;基本的 HTML 元素均可以通过 class 设置样式并得到增强效果;还有先进的栅格系统。 (任何的HTML标签都可以使用Bootstrap中提供样式增强显示效果,栅格系统:网格布局系统,排版系统,分栏系统)

 

2.组件(html模板)

无数可复用的组件,包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。

 

3.JavaScript 插件

jQuery 插件为 Bootstrap 的组件赋予了“生命”。可以简单地一次性引入所有插件,或者逐个引入到你的页面中。其中包括:

模式对话框、标签页、滚动条、弹出框等。

二、Bootstrap使用入门

1.下载

 

官方网站:http://www.getbootstrap.com

 

中文网站:http://www.bootcss.com

技术分享

 技术分享

2 . 创建WEB项目,并且在项目中导入bootstrap

   新建html文件,引入相关资源

    Bootstrap 必须要jQuery,因为Bootstrap组件是基于jQuery;

  技术分享

技术分享

三、Bootstrap布局

BootstrapHTML标签中原来的样式都进行重置(重写)

Bootstrap布局我们有两种

1 固定布局

技术分享

 

2 流式布局 

技术分享

 

3 我们一般可以对两种布局进行嵌套 

技术分享

eg:

技术分享

技术分享

四、Bootstrap表格

按钮组加上图标显示

<div class="container">

<div class="btn-group">

  <button class="btn">添加<i class="icon-plus"></i></button>

  <button class="btn">删除<i class="icon-remove"></i></button>

  <button class="btn">修改<i class="icon-edit"></i></button>

</div>

</div>

 

 

  

 

Bootstrap 学习笔记

标签:get   mil   ref   trap   相关   idt   字体   blog   href   

原文地址:http://www.cnblogs.com/sanqiyi/p/6663661.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!