Bootstarp框架用法

目录
  • Bootstrap框架
    • 布局容器
    • 栅格系统
    • 表格与表单
    • 按钮组
    • 图片
    • 图标
    • 导航条
    • 其他
    • elementui

Bootstrap框架

Bootstrap框架
	2.X 3.X 4.X  # 推荐使用3.X版本

使用框架调整页面样式一般都是操作标签的class属性即可

bootstrap需要依赖于jQuery才能正常执行(动态效果)

引入方式
	本地引入(最完整的)
    	1.引入jQuery
        2.引入bootstrap的css文件
        3.引入bootstrap的js文件
    CDN引入
    	1.引入jQuery CDN
        2.引入bootstrap css的 CDN   3.4.1
        3.引入bootstrap js的 CDN    3.4.1

在Bootstrap上复制别的网站的HTML代码

布局容器

"""
第一次使用该框架的时候最好采用本地导入的方式 
让pycharm记住bootstrap的关键字
"""
container		左右留白
container-fluid  左右不留白

栅格系统

row			行  # 一个row就是一行 一行是固定的12份
col-md-1	中等屏幕 桌面显示器 (≥992px)
col-sm-1	小屏幕 平板 (≥768px)
col-xs-1	超小屏幕 手机 (<768px)  手机端如果发生变形就用这个类
col-lg-1	大屏幕 大桌面显示器 (≥1200px)
			
.col-md-offset-*  列偏移

######可以在小份中再次分12份####


左右留白

表格与表单

表格

关键类名:
text-center 文字居中
table table-striped table-bordered table-hover  给table用的
success  danger warning  改变框颜色

左右留白
    

        

            
用户数据

            

                
                    

                        姓名
                        年龄
                        爱好
                    

                
                
                    

                        jason
                        18
                        读书
                    

                    

                        tony
                        20
                        电影
                    

                    

                        kevin
                        25
                        美女

表单

关键类名:
form-control  #input框变长
btn btn-danger btn-block  修改submit提交按钮的样式
注意:
	radio和checkbox不要加form-control  !!!

用户注册

            

                
username:
                    

                
password:

按钮组

a标签变成按钮
类名:btn btn-primary
其他按钮
类名:btn btn-info btn-block  样式    (修改其css调整颜色)
btn-lg btn-sm  大小
点我

图片

...
...
...

图标

bootstrap自带的
	加个span标签
	通过span标签修改class属性值(下图选中的就是class)


fontawesome网站
	专门提供图标库  # 完美兼容bootstrap框架

先下载

然后解压后cv进pycharm

用link引入后就可以随意使用了

复制图标的源码然后添加

例如: