⒂bootstrap组件折叠基础案例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,…

⒀bootstrap组件选项卡基础案例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-widt…

ps.这一次要说的是“Responsive column resets”,但是不知道为什么中文官网没有给出翻译,但是在看到案例的时候,感觉这就像一个bug,我自己姑且叫这个是一个高度bug吧,方便自己,要是大家有其他好的说法,请告诉我. ================================================================================================= Responsive column resets就是在某些阈值时,…

【10】了解Bootstrap栅格系统基础案例（5）

这次我们来说下列排序: 通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列(column)的顺序. <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8">  <…

【9】了解Bootstrap栅格系统基础案例（4）

这次我们来说下嵌套列: 为了使用内置的栅格系统将内容再次嵌套,可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内.被嵌套的行(row)所包含的列(column)的个数不能超过12(其实,没有要求你必须占满12列). <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <!--…

【8】了解Bootstrap栅格系统基础案例（3）

这次我们来说下列偏移: 列偏移就是使用 .col-md-offset-* 类可以将列向右侧偏移.这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距(margin).例如,.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列(column)的宽度. 废话不多说,直接上代码 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8&…

【6】了解Bootstrap栅格系统基础案例（1）

从上一张我们了解了栅格选项,那么我们就来了实战了解下吧(其实还是中文官网的案例) ps.我这里是电脑上用谷歌浏览器来观察的,毕竟电脑的分辨率高(1440*900px),谷歌浏览器最大化后,值比大屏幕设备的1200px的还要大,这样我们就可以通过拉缩浏览器改变可视区域来观察效果,当然,你会用谷歌浏览器模拟其他设备的话就另当别论了. [1]案例:从堆叠到水平排列这里我们使用单一的一组.col-md-*栅格class,你就可以创建一个基本的栅格系统. 1.在手机和平板设备上一开始是堆叠在一起的(超小…

⑤bootstrap表格使用基础案例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,…

④bootstrap列表使用基础案例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,…

③bootstrap文本使用基础案例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,…