首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

生活的主题是敲代码-BootStrap篇

芦荟可以吸收空气中的异味,并且具有吸收辐射的能力,且作用时间长,小伙伴们电脑前但可以放一个芦荟再开始敲代码哦!

前端框架BootStrap

好处

1:开发简洁,定义了很多css样式和js插件

2响应式布局,同一套页面可以兼容不同分辨率的设备

快速入门:

1下载BootStrap(用于生产环境的bootstrap),离线文档,v3.bootcss.com->index.htm

2在项目中将三个文件夹复制

3创建一个html页面,引入必要的资源文件

*三个标签最开始不能变

*一个css一个jquery一个bootstrap

--响应式布局:

实现:依赖于栅格系统:将一行平均分成12个格子,可以指定元素占几个格子

步骤:

1定义容器。相当于table

容器分类:

container,:每种设备宽度不一样,左右有白空格

container-fluid :每一种设备都是100%宽度

2定义行。相当于tr 样式:row

3定义元素。指定该元素在不用的设备上,所占的gezi数目,样式:col-设备代号-格子数目

设备代号:4种

xs:超小屏幕

sm:平板 >=768px

md :中等屏幕电脑 >=992px

lg:大屏幕 >=1200px

注意事项:

1:一行中如果超过12个格子会自动换行

2:栅格类属性可以向上兼容应该使用.col-md-*,适用于与屏幕宽度大于或等于分界点大小的设备,使用xs最好,向上都兼容

3:如果设备宽度小于了设置了栅格类属性的设备代码的最小值,默认会一个元素占满一整行

Bootstrap 101 Template

你好,世界!

##css样式和插件

全局css样式:

,按钮class=”btn btn-default”

,图片,

响应式的图片设置:class=”img-responsive”,

图片形状有三种,方,,相框

,表格

class="tabletable-condensed表格更加紧凑

table-responsive响应式

table-bordered边框

table-hover”悬停的

,表单

水平排列的表单form-contral

组件

,导航条

class=”navbarnavbar-inverse”导航条设为黑色

navbar-inverse可以改变导航条的外观

,分页条

禁用

插件:

·轮播图Carousel

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181016A0M5WU00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券