bootstrap实践写下电商网页

首先感谢B站大佬的慷慨授课！！！！！

个人制作效果：

就下来记一下笔记巩固记忆；

1！引入bootsrap样式，用到网站bootcdn中文网.

用到的版本3.3.7，其他版本像4.0我不知道怎么回事引入后并没有效果.

有大佬知道怎么回事方便就@下小弟：感激不尽！

bootstrap样式可以下载保存本地也可直接采用外部链接使用，

在设计之前做好布局，导航栏以下部分是竖向排列3份，各占比例20%，50%，30%;

这里用col-lg属性 或者在css样式自定义属性调用；

**{注意：使用boot的col属性后效果是定义为浮动的 ，如果在后面编写时遇到内容不对
齐，*可以在class类选择里加入“clearfix’属性清除浮动}*

使用class类选择器可以调用bootstrap样式

导航栏 “navbar” ‘navbar-header” 建设内容框架

“navbar-brand”可以在导航头添加图片链接等等

“nav navbar-nav”书写导航栏里内容

可以使用

标签把内容包进去

“nav navbar-nav navbar-right/left”可实现内容的左右浮动

2！导航以下内容用”cotainer“包括

左侧栏使用列组”list-group“ 可以在class选择中加入其他伪类选择方便用css增加样式
下面每一个列组都使用”list-group-item“

使用css样式改变间距，文字，背景色，这里笔记记忆 ”display；block“ 块级显示；

”text-decoration: none”消除链接文字的下划线。

3！中间内容部分，用到“new-list” “new-list-item”

用到 标签书写里面的内容

4！最后右侧栏包括标签使用

这里记一下class里“desc”的样式：特小字体下注；

“text-lg” :字体大号显示；

“list“ ：列显示；

<div class="input-group">
                        class="form-control" type="text"/>
                        <div class="input-group-btn">
                            class="btn btn-default">搜索
                        div>
                    div>

这里实现一个输入框里显示的按钮组合；笔记”input-group“ ”input-group-btn“；”placeholder“属性可以书写搜索框中的隐形提示文字

5！登录页，注册页效果

用到标签 class选择”form-group’ 接下来的在上写不他的内容 如：密码。。

中class选择样式“form-control”样子就像图示那样。

下面的登录，注册按钮使用class选择：“btn btn-primary btn-block”

primary是按钮样式颜色；

block是块级显示；

这里要补充所有的btn样式：

default 白色默认样式；primary 蓝色首选样式；success 绿色成功样式； info 淡蓝

色一般样式；warning 黄色警告样式；danger 红色危险样式！