Bootstrap的基本应用要点浅析

前端之家收集整理的这篇文章主要介绍了Bootstrap的基本应用要点浅析前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

用法

<Meta charset="utf-8"> <Meta http-equiv="X-UA-Compatible" content="IE=edge"> <Meta name="viewport" content="width=device-width,initial-scale=1"> Bootstrap的HTML标准模板

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的基本应用要点浅析。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/bootstrap/43386.html

猜你在找的Bootstrap相关文章