Sublime Text
01首先用Sublime Text工具新建HTML5页面,导入bootstrap的样式文件和脚本文件,如下图所示
02然后我们调用input-group样式来让输入框组中的元素在同一行,如下图所示
03当然input-group-addon不只可以放在输入框的前面,也可以放在输入框的后面,如下图所示
04也可以通过input-group-lg样式让输入框组中的元素变大,还有其他的一些控制大小的样式你可以查一下API
05接下来你也可以在input前面加入复选框,如下图所示,将复选框放在input-group-addon里即可
06还可以在输入框组中定义button按钮,如下图所示,按钮可以通过btn-default,btn-primary等来定义样式
07最后也可以在输入框的前面加入下拉菜单,这种也是比较常用的功能,如下图所示
其实自己写demo更多的时候都是手写css的,因为可以自己定制,自由控制且可以随便折腾,但有时候很多流水工厂式的样式写起来就太无趣了,所以还是用Bootstrap吧……
首先新建一个Html页面,把Bootstrap的样式与脚本引用塞进去:
这里有个问题,Bootstrap4.0以上是彻底不支持IE8以下的浏览器的,最新版已经把IE9抛弃了;= =
因为Bootstrap是JQuery依赖的,所以需要在脚本中引入JQuery,要注意的是,Bootstrap3.3.6版本以下是不支持JQuery3的,只能用JQuery2.
引入之后,在页面上插入container容器:
在这里是使用container还是container-fluid,主要看页面需求,两者区别在于:container-fluid是一个全宽的容器,使用整个宽度,而container则相当于一个margin:auto;的响应式的静态宽度div盒子;
两者的css设置:
标题与导航栏都可以写在header里:
在这里,导航使用nav标签创建的,Bootstrap里的导航条称为 navbar,navbar默认样式为白色,.navbar-inverse为颜色反白,可以得到黑色的导航条,需要其他颜色可以自己手动设置;
在 .navbar-collapse 中写入导航栏, .nav表明该ul为一导航栏,各li为导航类目;.navbar-nav说明是用于 navbar 中的导航
在li中设置.active,可以在JavaScript中控制鼠标click或者mouseover效果;
例如:
.navbar-collapse 是说在视口的宽度小于 768px 的时候,将导航变成垂直方向。
对比:
如果想要获得移动端的三明治型显示,需要额外进行修改:
这里<a>标签是左侧的链接,button为右侧的三明治导航按钮,span为导航按钮的设计构成(三条白线和边框……);
然后要完成点击三明治导航菜单的显示/隐藏,这时需要用到<button>里的data-target="#navbar-menu",这个 #navbar-menu 就是我们为原来的导航所起的 id 标识。
其中showoff 和mainnav分别是给button 和div .navbar-collapse添加的id;
页面主体如果是传统样式,符合栅格化,则使用栅格化样式最快捷;
栅格样式具体可以参阅 Bootstrap文档 ;
以两栏布局为例:
然后设置侧边栏,侧边栏也可以设置为导航nav;
使用nav-tabs和nav-stacked设置导航栏外观;
这样主题搭建就完成了。
ref:
20分钟打造你的Bootstrap站点
Bootstrap 中文文档
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)