boostrap学习

最新推荐文章于 2022-03-04 20:27:14 发布

珍-

最新推荐文章于 2022-03-04 20:27:14 发布

阅读量87

点赞数

本文链接：https://blog.csdn.net/qq_39021863/article/details/112637439

版权

boostrap使用了一些html和css元素，为了让这些标签能正常显示，需要在开头包含：

<!DOCTYPE html>
<html>
....
</html>

为了更好的支持移动设备，能触屏时缩放，需要加入以下：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

其中，viewport 控制触屏缩放，device-widht能在不同分辨率的设备上进行不同的展示。
initial-scale在初始化时保持1:1,不会被缩放，meta viewport加 user-scalable=no可禁止触屏缩放。
3.class img-responsive可让图像更好的支持响应式布局。高度取决于浏览器的高度。内部源代码：

.img-responsive {
  display: block;
  height: auto;
  max-width: 100%;
}

.img-responsive类图片居中用.center-block类。
.container用于包裹页面上的内容，左右外边距由浏览器决定，默认不能嵌套容器

网格系统

网格系统遵循的规则：
行必须放在.container 中，利用row创建水平组，内容写在col中，且col是row的直接子元素，比如 .row 和 .col-xs-4，可用于快速创建网格布局
偏移列：可以通过偏移让列居中，他会把一个列的左外边距增加x列，x从1-11

<div class="col-md-6 col-md-offset-3" 
        style="background-color: #dedef8;box-shadow: 
        inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing 
            elit.
            </p>
 </div>

表单：创建表单的基本步骤：

向父<form>元素中添加role="form"
将标签和控件放在class为.form-group的div中
向所有的文本元素 <input>、<textarea> 和 <select> 添加 class =“form-control”

内联表单（在一列中）
需要向form标签中添加class="form-inline"
使用.sr-only可以隐藏标签

水平表单：

向父元素<form>元素中添加 .form-horizontal
把标签和控件放在一个带有 class .form-group 的 <div> 中
向标签添加 class .control-label

单选按钮，复选按钮，想让他们显示在同一行上，用 .checkbox-inline
当需要在表单中使用纯文本时（即写单纯的文字）需要加class .form-control-static

按钮：
任何带有 class .btn 的元素都会继承圆角灰色按钮的默认外观，其他的按钮样式参考菜鸟教程。

珍-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
boostrap学习

boostrap使用了一些html和css元素，为了让这些标签能正常显示，需要在开头包含：<!DOCTYPE html><html>....</html>为了更好的支持移动设备，能触屏时缩放，需要加入以下：<meta name="viewport" content="width=device-width, initial-scale=1.0">其中，viewport 控制触屏缩放，device-widht能在不同分辨率的设备上进行不同.
复制链接

扫一扫