• bootsrap 样式笔记


    颜色

    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
    
    .text-muted:提示,使用浅灰色(#999)
    .text-primary:主要,使用蓝色(#428bca)
    .text-success:成功,使用浅绿色(#3c763d)
    .text-info:通知信息,使用浅蓝色(#31708f)
    .text-warning:警告,使用黄色(#8a6d3b)
    .text-danger:危险,使用褐色(#a94442)
    
    .bg-
    div bg-secondary progress-bar-striped  背景 透明 模糊 
    

    大小

    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    
    .lead	使段落突出显示
    .small	设定小文本 (设置为父文本的 85% 大小)
    
    
    
    .btn-lg	这会让按钮看起来比较大。
    .btn-sm	这会让按钮看起来比较小。
    .btn-xs	这会让按钮看起来特别小。
    .btn-block	这会创建块级的按钮,会横跨父元素的全部宽度。
    

    定位

    .mt-3 	 margin-top: 1rem !important;
    .h-100    height: 100% !important;
    
    .text-left	设定文本左对齐
    .text-center	设定文本居中对齐
    .text-right	设定文本右对齐
    .text-justify	设定文本对齐,段落中超出屏幕部分文字自动换行
    .text-nowrap	段落中超出屏幕部分不换行
    
    class .pull-right 向右对齐
    class .pull-left 向左对齐
    
    class .form-inline 内联	
    	<xx class="xx-inline"><xx/>
    		eg: <form class="form-inline">
    		
    class .form-horizontal 水平
    	向父 <form> 元素添加 class .form-horizontal。
    	把标签和控件放在一个带有 class .form-group 的 <div> 中。
    	向标签添加 class .control-label。
    	eg: <form class="form-horizontal" role="form">
    			<div class="form-group">
    				<label for="firstname" class="col-sm-2 control-label">名字</label>
    				 <div class="col-sm-10">
     					 <input type="text" class="form-control" id="firstname" placeholder="请输入名字">
    

    js类

    .text-lowercase	设定文本小写
    .text-uppercase	设定文本大写
    .text-capitalize	设定单词首字母大写
    
    .initialism	显示在 <abbr> 元素中的文本以小号字体展示,且可以将小写字母转换为大写字母
    .blockquote-reverse	设定引用右对齐
    
    .list-unstyled	移除默认的列表样式,列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项,你需要在嵌套的列表中使用该样式)
    .list-inline	将所有列表项放置同一行
    
    .dl-horizontal	该类设置了浮动和偏移,应用于 <dl> 元素和 <dt> 元素中,具体实现可以查看实例	
    .pre-scrollable	使 <pre> 元素可滚动,代码块区域最大高度为340px,一旦超出这个高度,就会在Y轴出现滚动条
    
    .show	强制元素显示
    .hidden	强制元素隐藏
    .text-hide	将页面元素所包含的文本内容替换为背景图
    .close	显示关闭按钮
    .caret	显示下拉式功能
    

    html样式

    .btn-link	让按钮看起来像个链接 (仍然保留按钮行为)
    .active	按钮被点击
    .disabled	禁用按钮
    

    group

    **-group
    	<**>
    	<**>
    	xx class="**-group-xx"
    	
    如果要设置垂直方向的按钮可以通过 .btn-group-vertical 类来设置:
    
  • 相关阅读:
    【转】使用Eclipse的几个必须掌握的快捷方式
    【原创】远景能源面试--一面
    vritualenv虚拟环境迁移
    Mysql数据库的增删改查
    Java面向对象的三大特征
    JAVA 数组
    JAVA简介
    web前端瀑布流设计分析
    华为C语言编程规范
    学生成绩管理系统1.0v 完成的学习总结
  • 原文地址:https://www.cnblogs.com/izhaong/p/12154305.html
Copyright © 2020-2023  润新知