| 【Bootstrap】Bootstrap框架认识和使用 | 您所在的位置：网站首页 › 框架官方下载 › 【Bootstrap】Bootstrap框架认识和使用 |
【Bootstrap】Bootstrap框架认识和使用
|
【Bootstrap】Bootstrap框架认识和使用
Bootstrap是一个Web开发的框架 百度百科： Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。 一、入门 优点： 定义了很多的css样式和js插件，开发人员可以直接使用响应式布局：一套页面可以兼容多种不同分辨率的设备 下载使用点击下载链接进入下载页面，之后将压缩包解压即可。获取到其中的dist文件夹中的子文件夹，将它们导入项目的文件夹内即可。 如果使用的是Webstorm，可以直接创建Bootstrap项目，创建之后会自动开启下载所需要的文件。 doctype html> Bootstrap 101 Template 你好，世界！ 二、响应式布局同一套页面可以兼容不同分辨率的设备。 Bootstrap实现响应式布局依赖于栅格系统，将一行平均分为12个栅格，可以指定一个元素占据几个栅格。 使用 定义容器。相当于之前的table 容器分类 container：左右两侧有留白，不同设备上固定宽度container-fluid：每一种设备都是100%设备 定义行。相当于之前的tr样式：row定义元素。指定该元素在不同的设备上，所占的格子数目。样式：col-设备代号-格子数目 设备代号: xs：超小屏幕手机( （首选项）Primary （成功）Success （一般信息）Info （警告）Warning （危险）Danger （链接）Link显示的样式：
显示的样式：
在table标签中添加class的属性为table，之后可以添加其他样式设置表格现实的样式 条纹状表格 带边框的表格 鼠标悬停有阴影效果 表单给表单项添加class属性值：class = “form-control” 行内表格样式： Email Password Remember me Sign in 组件 导航条定义了一个导航条，主要实现的有响应式布局，下拉框，表单等 实现的效果如下所示：
代码使用： Toggle navigation Brand Link (current) Link Dropdown Action Another action Something else here Separated link One more separated link Submit Link Dropdown Action Another action Something else here Separated link 分页条实现的效果如下所示：
使用的代码如下所示： « 1 2 3 4 5 »其中，选中的页面（当前页面）我们可以li标签的class = “active”，禁用的li标签我们可以设置为class = “disabled” 插件 轮播图主要是一个轮播图的实现，可以将图片添加进去，实现一个轮播图的效果 ... ... ... Previous Next |
【本文地址】