Bootstrap简介,以及常用布局,栅格系统

Bootstrap简介:

Bootstrap之所以受到广大前端开发人员的欢迎,是因为可以构建出非常优雅的前端页面,而且占用资源小
	优点:
	1.移动设备优先
	2.浏览器支持:主流浏览器都支持Bootstrap,包括IE
	3.响应式设计:Bootstrap的响应式CSS能够自适应于台式机,平板计算机和手机的屏幕大小
	4.良好的代码规范:为开发人员创建接口提供一个简介统一的解决方案,减少了测试的工作量
	5.组件:Bootstrap包含了功能强大的内置组件
	6.定制:Bootstrap还提供了基于web的定制

Bootstrap内容:

1.基本结构:Bootstrap提供了一个带有网格系统,链接样式,背景的基本结构
2.CSS:Bootstrap自带全局的CSS设置,定义基本的HTML元素样式,可扩展的class,以及一个先进的栅格系统
3.布局组件:Bootstrap包含了十几个可重用的组件,用于创建图像,下拉菜单,导航,警告框,弹出框等
4.JavaScript插件:Bootstrap包含了十几个自定义的jQuery插件,可以直接包含所有的插件,也可以逐个包含这些插件
5.定制:开发人员可以定制Bootstrap的组件,LESS变量和jQuery插件来得到一套自定义的版本

Bootstrap中预定义了一套CSS样式和一套对应的jQuery代码,应用时只需提供固定的HTML结构,添加Bootstrap中提供的class名称,就可以完成指定效果的实现

Bootstrap基本模板:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible"content="IE=edge">
    <!-- 此属性为文档兼容模式(compatible)声明,表示使用IE浏览器的最新渲染模式 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 根据设置确定视口的宽度,device-width表示采用设备宽度,初始缩放1.0,
        使用user-scalable=no可以 禁用其缩放(zooming)功能-->
       <!-- 上述三个meta标签必须放在最前面,其他内容必须跟随其后 -->
       <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
       <!-- 引入Bootstrap -->
       <script src="html5shiv/html5shiv-printshiv.min.js"></script>
       <script src="respond/respond.min.js"></script>
       <!-- HTML5 Shiv和Respond.js用于让低于IE9版本的浏览器支持HTML5元素和媒体查询
    注意:如果通过file:// 引入Respond.js文件,则该文件无法起到效果 -->
    <title>Document</title>
</head>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值