Bootstrap的使用

1.Bootstrap 简介

Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
特点:
移动设备优先:自 Bootstrap 3 起,框架包含了贯穿于整个库的移动设备优先的样式
浏览器支持:所有的主流浏览器都支持 Bootstrap。
容易上手:只要您具备 HTML 和 CSS 的基础知识,您就可以开始学习 Bootstrap。
响应式设计:Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。
它为开发人员创建接口提供了一个简洁统一的解决方案,还包含了功能强大的内置组件,易于定制,它还提供了基于 Web 的定制,并且它是开源的

2.Bootstrap使用:

今天主要学习了Bootstrap网格化和导航条表单按钮等组件的使用
首先:HTML5 的文档类型:
Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。
格式如下:<!DOCTYPE html> <html lang="zh-CN"> ... </html>
然后因为Bootstrap移动设备优先,所以为了确保适当的绘制和触屏缩放,需要在 <head> 之中添加 viewport 元数据标签:

<meta name="viewport" content="width=device-width, initial-scale=1">
如果你想禁止缩放(让用户只能滚动屏幕)那么:user-scalable=no 可以禁用其缩放
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">


布局容器:
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器,在Bootstrap有两个作此用处的类,不过要注意区分它们的不同,另外还需注意这两种 容器类不能互相嵌套
其中:.container 类用于固定宽度并支持响应式布局的容器。

<div class="container"> ... </div>
.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。
<div class="container-fluid"> ... </div>


栅格系统:
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。
栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。
“行(row)”必须包含在 .container (固定宽度)或 .container-fluid (100% 宽度)中,以便为其赋予合适的排列(aligment)和内补(padding)
通过“行(row)”在水平方向创建一组“列(column)”
你的内容应当放置于“列(column)”内,并且,只有“列(column)”可以作为行(row)”的直接子元素。
类似 .row 和 .col-xs-4 这种预定义的类,可以用来快速创建栅格布局
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个 .col-xs-4 来创建。
具体使用可到Bootstrap中文网查看API
 
Bootstrap的组件:
Glyphicons 字体图标:使用Glyphicons 字体图标需注意:图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的 <span> 标签,并将图标类应用到这个 <span> 标签上。而且图标类只能应用在不包含任何文本内容或子元素的元素上。
Bootstrap 假定所有的图标字体文件全部位于 ../fonts/ 目录内,相对于预编译版 CSS 文件的目录。如果你修改了图标字体文件的位置,那么,你需要通过下面列出的任何一种方式来更新 CSS 文件:
在 Less 源码文件中修改 @icon-font-path 和/或 @icon-font-name 变量。
利用 Less 编译器提供的 相对 URL 地址选项。
修改预编译 CSS 文件中的 url() 地址。
当然我们最好不要修改了图标字体文件的位置。
例如:我的图标的一个应用:
<span class="glyphicon glyphicon-search"></span>
下拉菜单用于显示链接列表的可切换、有上下文的菜单。下拉菜单的 JavaScript 插件让它具有了交互性。
将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里,或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码。

<div class="dropdown"> 
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown 
    <span class="caret"></span> 
</button> 
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
<li><a href="#">Action</a></li> 
<li><a href="#">Another action</a></li> 
<li><a href="#">Something else here</a></li> 
<li><a href="#">Separated link</a></li> 
</ul> 
</div>

 


你还可以改变上面代码的第一行的class为:dropup这样菜单会向上弹出
对齐:默认情况下,下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐。
添加标题:在下拉菜单中均可通过添加标题来标明一组动作。

 

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3"> ... 
<li class="dropdown-header">Dropdown header</li> ... 
    
</ul>


还有很多很多的组件可以到Bootstrap中文网查阅
h t t p://w w w.bootcss.com/

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值