Bootstrap的基本应用要点浅析

Bootstrap是Twitter推出的一个由动态CSS语言Less写成的开源CSS/HTML框架(同时提供Sass 移植版代码)。

用法：

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap的HTML标准模板</title>
  <!-- Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <!--你自己的样式文件 -->
  <link href="css/your-style.css" rel="stylesheet">
  <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->
  <!--[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]-->
 </head>
 <body>
  <h1>Hello, world!</h1>
  <!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
  <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 </body>
</html>

标题样式：

Bootstrap中可以通过class名实现h1-h6比如：<div class="h1">Bootstrap标题</div>

在Web的制作中，常常会碰到在一个标题后面紧跟着一行小的副标题：

<h1>Bootstrap标题<small>我是副标题</small></h1>

.lead   ：增大文本字号，加粗；

给文本添加颜色，通过颜色来强调：

.text-muted：提示，使用浅灰色（#999）

.text-primary：主要，使用蓝色（#428bca）

.text-success：成功，使用浅绿色(#3c763d)

.text-info：通知信息，使用浅蓝色（#31708f）

.text-warning：警告，使用黄色（#8a6d3b）

.text-danger：危险，使用褐色（#a94442）

文本对其：在CSS中常常使用text-align来实现文本对其，bootstrap中：

Text-left   左对齐

Text-center 居中对齐

Text-right   右对齐

Text-justify  两端对齐

Bootstrap提供了一套响应式移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

通过class来 操作在相应的屏幕上的布局

手机屏幕（<768px） 类前缀.col-xs-

平板屏幕（>=768px）类前缀.col-sm-

中等屏幕（>=992px）类前缀.col-md-

大屏幕  （>=1200px)类前缀.col-lg-

列数都为12；所有的列（column）必须放在 .row内

<div class=”row”>
<div class=“col-xs-12 clo-md-8 clo-md-6 col-lg-4”>
<div class=“col-xs-12 clo-md-4 clo-md-6 col-lg-4”>
</div>

实例：

<div class=”container”>
<div class=”row”>
内容
</div>
</div>

将最外层的布局元素 .container修改为 .container-fluid  就可以将固定宽度的栅格布局转换成100%宽度的布局

偏移：

有时候我们不希望相邻的列紧挨在一起，可以用列偏移（offset）来实现  给要偏移的元素加 .col-md-offset-*   （*号代表需要偏移的列数）

例如：“col-md-offset-4”就是在中等屏幕的时候向右偏移4列

列排序：

列排序就是改变列表的方向，就是改变左右浮动，并且设置浮动的距离，通过添加类名实现：

“col-md-push-*”和”col-md-pull-*”（*号代表偏移列数）

向右偏移写push   向左写pull；

列的嵌套：

Bootstrap框架还支持列的嵌套

你可以在列中添加一个或者多个行（rom），然后在这个容器中插入列（像前面的一样）

嵌套的列  在写.col-md-*  的时候是按照父盒子的基础上 再进行分配

以上所述是小编给大家介绍的Bootstrap的基本应用要点浅析，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 全面解析Bootstrap布局组件应用

    本文示例介绍了Bootstrap布局组件应用,分享给大家供大家参考,具体内容如下 字体图标的应用示例 <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-sort-by-attributes"></span> </button> 下拉菜单示例 <div class="dropd

  • indexedDB bootstrap angularjs之 MVC DOMO (应用示例)

    1.indexedDB(Model) -- 前端浏览器对象型数据库,一般我们后台用的数据库都是关系型数据库.那么indexeddb有什么特点呢: 首先,从字义上它是索引型数据库,从实际使用中可以体现为,它需要为表创建索引才可以根据某个字段来获取数据,而在关系型数据库中,这明显是不需要的. 其次,我不需要行列数据的转化,我只需要通过类似于数组的处理方式: 复制代码 代码如下: objectStore.push(data); 有点像是把一个json对象塞入数据库,是不是很暴力? 2.bootstra

  • 详解Bootstrap的aria-label和aria-labelledby应用

    详解Bootstrap的aria-label和aria-labelledby应用

    aria-label 正常情况下,form表单的input组件都有对应的label.当input组件获取到焦点时,屏幕阅读器会读出相应的label里的文本. 如: <!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title>demo</title> <link href="bootstrap-3.3.4-dist/css/bootstr

  • BootStrap中的table实现数据填充与分页应用小结

    BootStrap中的table实现数据填充与分页应用小结

    BootStrap table 是一个轻量级的table插件,使用AJAX获取JSON格式的数据,其分页和数据填充很方便,支持国际化.最近后台使用此插件做了一个表格应用,做个总结. 1.使用方法 可以通过又拍云提供的CDN获取js插件,样式表和国际化插件,或者直接去官网下载.将下面的js插件和样式放到html head 头里即可使用. //样式 <link href="http://cdn.bootcss.com/bootstrap-table/1.9.1/bootstrap-table.

  • Bootstrap Table服务器分页与在线编辑应用总结

    Bootstrap Table服务器分页与在线编辑应用总结

    先看Bootstrap Table应用效果: 表格用来显示数据库中的数据,数据通过AJAX从服务器加载,同时分页功能有服务器实现,避免客户端分页,在加载大量数据时造成的用户体验不好.还可以设置查询数据的起止时间,查询一定时间范围的数据.在线编辑功能通过扩展Bootstrap Table实现,使用X-editable实现. Bootstrap Table有两种使用方式: 1.对普通的 table 设置 data 属性: 2.通过JavaScript 来启用 Bootstrap Table 插件.

  • Bootstrap的基本应用要点浅析

    Bootstrap是Twitter推出的一个由动态CSS语言Less写成的开源CSS/HTML框架(同时提供Sass 移植版代码). 用法: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&g

  • BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析

    BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析

    问题1: 如下代码: <input type="hidden" name="productId"/> $("#addForm").bootstrapValidator({ fields: { productId: { validators: { notEmpty: { message: '请选择一个商品' } } } } }); 这样的配置并没有在提交的时候对表单元素productId进行验证,那是因为bootstrapValidat

  • 浅析BootStrap中Modal（模态框）使用心得

    BootStrap中Modal(模态框)描述 Bootstrap Modals(模态框)是使用定制的 Jquery 插件创建的.它可以用来创建模态窗口丰富用户体验,或者为用户添加实用功能.您可以在 Modals(模态框)中使用 Popover(弹出框)和 Tooltip(工具提示插件). 一.modal使用: 1.1.登录bootstrap官网,点击下载Bootstrap 1.2.导入对应的样式文件css 1.3.导入对应的js,需要导入bootstrap.js或者bootstrap.min.j

  • 浅析bootstrap原理及优缺点

    网格系统的实现原理,是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统.Bootstrap框架中的网格系统就是将容器平分成12份. bootstrap优缺点: 1.bootstap最近发布了bootstrap4,拥有了box-flex布局等更新,紧跟最新的web技术的发展 2.比较成熟,在大量的项目中充分的使用和测试 3.拥有完善的文档,使用起来更方便 4.有大量的组件样式,接受定制 缺点: 1.如果有

  • 浅析BootStrap Treeview的简单使用

    浅析BootStrap Treeview的简单使用

    bootstrap-treeview.js1是一款强大的树菜单插件,本文给大家介绍bootstrap treeview的简单使用. 废话不多说,直接上干干货. 1.bootstrap-treeview Github网址: https://github.com/jonmiles/bootstrap-treeview 2.使用要求: <!-- 样式表 --> <link href="~/Content/bootstrap.css" rel="stylesheet

  • 浅析BootStrap模态框的使用(经典)

    BootStrap模态框简单概述 Bootstrap Modals(模态框)是使用定制的 Jquery 插件创建的.它可以用来创建模态窗口丰富用户体验,或者为用户添加实用功能.您可以在 Modals(模态框)中使用 Popover(弹出框)和 Tooltip(工具提示插件). 1,Bootstrap 模态对话框和简单使用 div id="myModal" class="modal hide fade"> <div class="modal-he

  • 浅析使用BootStrap TreeView插件实现灵活配置快递模板

    浅析使用BootStrap TreeView插件实现灵活配置快递模板

    bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件.该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树.列表树等等. 开发条件: 安装bootstrap-treeview插件,具体操作见: bootstrap-treeview 实现功能: 1.一个模板可指定子模板(包含多个地区.价格等) 2.编辑子模板地区时,动态改变tree的地区(其他子模板选中的地区disabled,此模板之前选中的

  • 浅析Bootstrap组件之面板组件

    浅析Bootstrap组件之面板组件

    Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 面板组件主要作用是用来处理一些其他组件无法完成的功能,在不同的版本中具有不同的源码: LESS:panels.less SASS:_panels.scss 基础面板非常简单,就是一个div容器中运用了类.panel的样式,产生一个具有边框的文本显示块,由于panel不控制主题颜色,所以在.panel基础上增加一个控制

  • 浅析BootStrap栅格系统

    浅析BootStrap栅格系统

    1.简介 Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列.它包含了易于使用的预定义classe,还有强大的mixin用于生成更具语义的布局. 2.栅格选项 bootstrap3.x使用了四种栅格选项来形成栅格系统,这四种选项在官网上的介绍如下图,很多人不理解,这里跟大家详解一下四种栅格选项之间的区别,其实区别只有一条就是适合不同尺寸的屏幕设备.我们看class前缀这一项,我们姑且以前缀命名这四种栅格选项,

  • 浅析Bootstrap验证控件的使用

    废话不多说,本文大概给大家分享两块代码,第一块前端HTML代码,第二块js代码,代码简单易懂,关键代码如下所示: 前端HTML代码 <form id="myForm" method="post" class="form-horizontal" action="/Task/Test"> <div class="modal-body"> <div class="form-

随机推荐