BootStrap基本使用

BootStrap是基于HTML,CSS,JavaScript开发的前端框架,效果很彪悍。

环境搭建

BootStrap下载地址
JQuery下载地址

BootStrap基本使用_第1张图片
BootStrap基本使用_第2张图片


  
    Demo

    
    
    

  


注意引入的顺序

全局样式

BootStrap提供了大量的全局样式,基本的HTML元素均可以通过class设置样式并得到增强效果。

标题
class="h1~h6"
小标题


  
    Demo
    
    
    
  

  
        <%--传统的方式--%>
        

标题1

标题2

标题3

标题4

标题5
标题6
<%--BootStrap提供的class样式--%> 标题1小标题 标题2 标题3 标题4 标题5 标题6
BootStrap基本使用_第3张图片
效果
文本段落
BootStrap中的P标签
  默认文字大小:14px
  行高:20px
  底部外边距:10px

文本内容的对齐方式
  class="text-left"
  class="text-center"
  class="text-right"

文本大小写转换
  class="text-lowercase"
  class="text-uppercase"
  class="text-capitalize"

文本标记
  使文字底部有黄线
  删除线
  下划线
  加粗加重
  文本缩小显示
  
        

一袭白袍的陈平安“忘我”出拳,格外行云流水。
不再是窑工学徒拉坯,处处古板匠气如楷书,已如大家风流之行书。
其中精髓,唯有吃得住苦、抓得住福而已。

一袭白袍的陈平安“忘我”出拳,格外行云流水。
不再是窑工学徒拉坯,处处古板匠气如楷书,已如大家风流之行书。
其中精髓,唯有吃得住苦、抓得住福而已。

Accept what was and what is, and you’ll have more positive energy to pursue what will be.

效果
表格

  table:默认将表格样式铺满屏幕
  table-striped:斑马线效果
  table-bordered:表格边框
  table-hover:鼠标经过变色
  
行样式
  



    Demo

    
    
    

    



标题1 标题2 标题3 标题4 标题5
内容1 内容2 内容3 内容4 内容5
内容1 内容2 内容3 内容4 内容5
内容1 内容2 内容3 内容4 内容5
内容1 内容2 内容3 内容4 内容5
内容1 内容2 内容3 内容4 内容5
内容1 内容2 内容3 内容4 内容5
BootStrap基本使用_第4张图片
效果
表单
输入框

BootStrap主张将相同组的控件统一放到一个div中方便管理
提供了form-group
class="form-control input-sm input-lg" 可以作用在文本域,select form-control:输入框会编程圆角,有蓝色选中状态 input-sm:让输入框变得更大 input-lg:更小 让表单内容横向显示

效果
Button


  active:按钮激活
  disabled:按钮禁用
  btn-default:按钮默认样式
  btn-info:信息按钮
  btn-warning:警告按钮
  btn-success:成功按钮
  btn-danger:危险按钮
  btn-link:链接按钮
  
测试
测试
效果

响应式设计
ViewPort

    
    Demo


width:控制 viewport 的大小,可以指定的一个值,如 600。
也可以指定特殊的值,如 device-width:设备的宽度。
height:和 width 相对应,指定高度。

initial-scale:初始缩放比例,也即是当页面第一次加载的时候缩放比例。
maximum-scale:允许用户缩放到的最大比例。
minimum-scale:允许用户缩放到的最小比例。
user-scalable:用户是否可以手动缩放。
栅格布局
当屏幕到达预设宽度时,改变屏幕的显示

1.传统方式

    
    Demo
    
    
    

    



    
2. BootStrap Demo
col-lg-3:大屏的时候占三分之一 col-sm-2:小屏的时候占二分之一

BootStrap组件
字体图标
BootStrap提供了许多字体图标用以使用

    

下拉菜单


    


data-toggle="dropdown":用来关联下拉列表
BootStrap基本使用_第5张图片
控件组

    
$
导航

    

    

    


BootStrap基本使用_第6张图片
分页

    

进度条

    
    Demo
    
    
    

    




    
60%
列表

    
  • Item1 20
  • Item2 17
  • Item3 15
BootStrap基本使用_第7张图片
面板

  
弹出层
内容
BootStrap基本使用_第8张图片

你可能感兴趣的:(BootStrap基本使用)