Bootstrap是Twitter推出的一个由动态CSS语言Less写成的开源CSS/HTML框架(同时提供Sass 移植版代码)。
用法:
Hello, world!
标题样式:
Bootstrap中可以通过class名实现h1-h6比如:
在Web的制作中,常常会碰到在一个标题后面紧跟着一行小的副标题:
Bootstrap标题我是副标题
.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内
实例:
内容将最外层的布局元素 .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的基本应用要点浅析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
写下你的评论吧 !推荐阅读
本文内容皆为作者原创,如需转载,请注明出处:https:www.cnblogs.comxuexianqip13045462.html1.自定义分页器的拷贝及使用当我们需要使用 ... [详细]蜡笔小新 2023-10-16 17:47:02 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]蜡笔小新 2023-12-12 12:45:59 本文介绍了如何在HTML5网页模板中加入百度统计,并对模板文件、css样式表、js插件库等内容进行了说明。同时还解答了关于HTML5网页模板的使用方法、表单提交、域名和空间的问题,并介绍了如何使用Visual Studio 2010创建HTML5模板。此外,还提到了使用Jquery编写美好的HTML5前端框架模板的方法,以及制作企业HTML5网站模板和支持HTML5的CMS。 ... [详细]蜡笔小新 2023-12-11 12:06:41 本文介绍了Android实战中使用jsoup实现网络爬虫的方法,以糗事百科项目为例。对于初学者来说,数据源的缺乏是做项目的最大烦恼之一。本文讲述了如何使用网络爬虫获取数据,并以糗事百科作为练手项目。同时,提到了使用jsoup需要结合前端基础知识,以及如果学过JS的话可以更轻松地使用该框架。 ... [详细]蜡笔小新 2023-12-11 09:19:45 随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]蜡笔小新 2023-12-10 20:05:15 本文介绍了使用jQuery实现图片预加载和等比例缩放的方法,同时提供了演示和相关代码。该方法可以重置图片的宽度和高度,并使图片在水平和垂直方向上居中显示。 ... [详细]蜡笔小新 2023-12-09 17:59:12 本文介绍了影响网站打开时间的两个因素,即网页加载速度和网站页面大小。重点讲解了如何通过压缩网站页面来减少页面加载时间。具体包括图片压缩、Javascript压缩、CSS压缩和HTML压缩等方法,并推荐了相应的压缩工具。此外,还提到了一款Google Chrome插件——网页加载速度分析工具Speed Tracer。 ... [详细]蜡笔小新 2023-12-09 09:17:00 web前端|js教程off-canvas,部分,超出web前端-js教程mui框架中off-canvas侧滑的一个缺点就是无法出现滚动条,因为它主要用途是设置类似于qq界面的那种格 ... [详细]蜡笔小新 2023-10-17 20:40:03 2019独角兽企业重金招聘Python工程师标准在线查询:http:each.sinaapp.comangularapielement.html使用方法 ... [详细]蜡笔小新 2023-10-17 19:54:54 :nth-child(index)子元素过滤选择器的描述是:选取每个父元素下的弟index个子元素,index从1开始。然后,我写了如下h ... [详细]蜡笔小新 2023-10-17 17:10:18 本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]蜡笔小新 2023-12-13 20:01:16 本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置,包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]蜡笔小新 2023-12-13 13:58:25 本文介绍了DataTables插件的官方网站以及其基本特点和使用方法,包括分页处理、数据过滤、数据排序、数据类型检测、列宽度自动适应、CSS定制样式、隐藏列等功能。同时还介绍了其易用性、可扩展性和灵活性,以及国际化和动态创建表格的功能。此外,还提供了参数初始化和延迟加载的示例代码。 ... [详细]蜡笔小新 2023-12-09 17:40:33 Li-zHihuAn这个家伙很懒,什么也没留下!Tags | 热门标签PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有