标签：bootstrap undefined swal Bootstrap 基础 介绍 还好 col 页面

前端框架Bootstrap

该框架已经帮你写好了很多页面样式，你如果需要使用，只需要下载它对应文件，之后直接cv拷贝即可

在使用Bootstrap的时候所有的页面样式都只需要你通过class来调节即可

版本选择建议使用v3版本：https://v3.bootcss.com/

注意

bootstrap的js代码是依赖于jQuery的，也就意味着你在使用Bootstrap动态效果的时候，一定要导入jQuery

布局容器

左右两侧有留白 左右两侧没有留白 # 后续在使用bootstrap做页面的时候 上来先写一个div class=container,之后在div内部书写页面

栅格系统

写一个row就是将所在的区域划分成12份 获取你所要的份数 # 在使用bootstrap的时候 脑子里面一定要做12的加减法

栅格参数

.col-xs- .col-sm- .col-md- .col-lg-

针对不同的显示器 bootstrap会自动选择对应的参数

如果你想要兼容所有的显示器 你就全部加上即可

在一行如何移动位置

排版

bootstrap将所有原生的HTML标签的文本字体统一设置成了肉眼可以接受的样式

效果一样，但是标签表达的意思不一样（语义）

表格

...............

//不同的类 表示的不同颜色

表单

登陆页面

username:

password:

111 222 333

针对表单标签 加样式就用form-control

class="form-control"

"""
222
333
checkbox和radio我们一般不会给它加form-control，直接使用原生的即可
"""

针对报错信息 可以加has-error（input的父标签加）

username:

按钮

点我
按我
按我
按我
按我
按我

按我
按我
按我

通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。

图表

登陆页面

//glyphicon 添加的图标

<style>
    span {
        color: greenyellow;
    }
</style>

扩展

导航条

1	jason	123	study

标签：bootstrap,undefined,swal,Bootstrap,基础,介绍,还好,col,页面
来源： https://www.cnblogs.com/molei123ok/p/16634564.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。