Làm cách nào để kết nối các trang trong Bootstrap Studio?

Bây giờ trong bảng tùy chọn ở bên phải, bạn sẽ tìm thấy tùy chọn URL, ở đó bạn phải thêm đường dẫn chuyển hướng theo một thứ tự cụ thể đó là

webpage_name/#ID Tên

trong trường hợp của chúng ta, nó sẽ là ``` index. html/#nhảy tới đây

**#jump-here** is the ID that we had given to the container. 
> Make sure the # is used or else html will not consider it as an ID and the jump navigation will not work

in code, it will be

Trang chủ ```

Vậy là xong, bạn đã tạo thành công một liên kết để chuyển đến một phần cụ thể của trang

Để học thiết kế trang web trong Bootstrap Studio và không cần mã hóa, bạn có thể đăng ký khóa học của tôi trên Keet Classroom

Bootstrap studio là một phần mềm mạnh mẽ cho phép tạo nguyên mẫu của các trang web và ứng dụng tương tác nhờ vào khung bootstrap (css, JavaScript, SASS)

Hướng dẫn này được thực hiện bằng bootstrap studio 5. 0. 3

Phiên bản của bootstrap được sử dụng là 4. 4 và 3. 4

Bootstrap studio cho phép chúng tôi lưu trữ các trang web của mình trực tuyến, nó bao gồm một máy chủ cục bộ và một trình soạn thảo văn bản

điều kiện tiên quyết

Không yêu cầu kiến ​​thức lập trình, nhưng kiến ​​thức về html, JavaScript và css sẽ là lợi thế cho bạn

Cài đặt

Để cài đặt Bootstrap studio, rất tiếc là không miễn phí, có một phiên bản tiêu chuẩn có giá 29 đô la, quá đủ cho mục đích sử dụng cá nhân và cung cấp rất nhiều thành phần và phiên bản trọn đời có giá 60 đô la được khuyến nghị cho các dự án của công ty

Truy cập ứng dụng phòng thu bootstrap

Khi bạn mở ứng dụng, bạn sẽ thấy cửa sổ này

1. Thiết kế mới. để tạo ra một thiết kế

2. Mở ra. để mở một dự án studio bootstrap hiện có

3. Bắt đầu. cho phép bạn làm theo tài liệu của bootstrap studio

Bước 1. Tạo thiết kế mới

Nhấp vào nút thiết kế mới và bạn sẽ thấy rằng có một thiết kế đầy đủ đã được tạo cho chúng tôi, hãy chọn chỗ trống là một trang trống. Trong tên viết về nhà sẽ là tiêu đề của các trang trong thiết kế của chúng tôi, sau đó nhấp vào tạo

Bước 2. Khám phá studio bootstrap

Đây là cách studio bootstrap thể hiện bản thân khi tạo ra thiết kế của chúng tôi

1. Tab 1 cho phép bạn kiểm soát dự án của chúng tôi, cho phép chúng tôi mở các tham số, xuất thiết kế của chúng tôi, khởi động máy chủ, v.v. Tôi thực sự khuyên bạn nên khám phá nó
2. Tab 2 bao gồm các thành phần mặc định đi kèm với bootstrap studio (vui lòng khám phá) trong phần studio và trong phần trực tuyến, chúng là các thành phần mà chúng tôi tải xuống trực tuyến (như trang đăng nhập, bài viết, v.v.) Thành phần là các thành phần mà chúng tôi sẽ đưa vào trang của mình
3. Tab 3 Tổng quan là nơi hiển thị tất cả các thẻ html của trang chúng ta, mặc định thẻ html và body bị khóa nên chúng ta không sửa đổi được
4. Tab 4 nói về giao diện trang của chúng tôi, hoạt ảnh, chế độ hiển thị
5. Tab 5 Thiết kế có trang menu sẽ chứa tất cả các trang html của dự án của chúng tôi, kiểu menu sẽ chứa các tệp css của dự án của chúng tôi, menu javascript sẽ chứa. js của dự án của chúng tôi, phông chữ menu sẽ chứa các tệp phông chữ của dự án của chúng tôi, hình ảnh menu sẽ chứa tất cả các hình ảnh của dự án của chúng tôi
6. Tab 6 có trang trống của chúng tôi, là phần thân mà chúng tôi sẽ đặt các thành phần của mình, đã có chỉ mục trang. html được chọn theo mặc định và cũng là hình thức hiển thị thiết kế của chúng tôi theo kích thước của màn hình (điện thoại, máy tính bảng, MD, máy tính, máy tính để bàn)
7. Tab 7 giống nhau là trình soạn thảo văn bản có phần html cho phép bạn xem các thẻ khác nhau trên các trang khác nhau trong thiết kế của chúng tôi và phần kiểu cho phép bạn chỉnh sửa mã và xem kiểu trang của chúng tôi

Bước 3. Tải xuống các thành phần trực tuyến

• Nhấp vào khu vực tìm kiếm và viết thanh điều hướng để có menu, lấy thanh điều hướng có menu và đăng nhập nhấp vào cài đặt
• Nhập đăng nhập vào thanh tìm kiếm và lấy Hộp đăng nhập và cài đặt
• Làm tương tự cho một slide search best carousel slide và cài đặt nó

Bước 4. Kéo và thả các thành phần giao diện người dùng

Sau khi tải xuống các thành phần, chúng tôi thấy trong tab 2, phần studio có menu tải xuống vừa được thêm vào và chứa các thành phần đã tải xuống

Để sắp xếp các thành phần trên body chúng ta click vào thành phần kéo nó trên body và thả ca sẽ được đặt theo phân cấp các thành phần trong html

Chọn thanh điều hướng với menu và đăng nhập và thả nó vào trang của chúng tôi, làm tương tự để có những điều cơ bản về trang chiếu băng chuyền và chân trang tốt nhất

Bước 5. Tạo thông tin đăng nhập mới. trang html

Chuyển đến tab 5 trong menu trang nhấp vào trang đăng nhập. html ở đây bây giờ nó được chọn và chúng ta có một phần thân trống

Chọn ô Login [En] kéo thả vào body

Bước 6. chỉ mục liên kết. html để đăng nhập. html

trong chỉ mục. html chọn thanh điều hướng của chúng tôi và chỉnh sửa mã trong thẻ đăng nhập, nhập dưới dạng đăng nhập href. html rồi nhấn apply là xong, bạn vừa kết nối 2 trang

Bước 7. Khởi chạy máy chủ

Trong tab 1, nhấp vào xem trước và kích hoạt nó, bạn có thể vào tùy chọn xem trước để xem cổng được máy chủ của chúng tôi sử dụng, cũng như URL